CODEWITHSUNDEEP
javascriptjquerydatatables
joe92
joe92

Reputation: 643

Datatables: Remove row without affecting "(filtered from X total entries)"

I have a reasonably large table which when run through the Datatables API takes a couple of seconds to render.

While it's rendering I have the opacity of all the rows set to 0 with an additional row at the beginning containing a note that reads "Rendering table..." so there's less juttering and ugly tables on display till it's ready to be seen.

Using the initComplete callback function this row is then deleted and the other rows made visible:

"initComplete": function(){
    $( 'table.MIS_return_data tbody.MIS_returned_content tr.render-note' ).remove();
    $( 'table.MIS_return_data tbody.MIS_returned_content tr:not(.no-select)' ).css('opacity', 1);
    $( 'table.MIS_return_data tbody.MIS_returned_content tr.no-select' ).css('opacity', 0.6);
},

The problem with this is that at the bottom of the table I get a note:

Showing 1 to 580 of 580 entries (filtered from 581 total entries)

That 1 entry that it has filtered is the row with the rendering note.

I need the row completely removed and no longer "seen" by the API. How can I do this?

I have tried using the following as well instead of the jQuery.remove():

"initComplete": function(){
    table.rows( $( 'table.MIS_return_data tbody.MIS_returned_content tr.render-note' ) ).remove();
    table.draw();
    $( 'table.MIS_return_data tbody.MIS_returned_content tr:not(.no-select)' ).css('opacity', 1);
    $( 'table.MIS_return_data tbody.MIS_returned_content tr.no-select' ).css('opacity', 0.6);
},

But not only does this not work, uniquely it also only applies the opacity to the first row in the table.

One workaround is the remove the note at the bottom completely using:

"language": {
    "infoFiltered": "",
},

However, this is not ideal as I would like for users to be able to filter the results, hiding/displaying rows by certain parameters. That note therefore will have a practical use.

If you need any more details or clarification on what's written please ask.

Any help is appreciated! Thanks

Upvotes: 0

Views: 1085

Answers (1)

user1037355
user1037355

Reputation:

Like @annoyingmouse said above..

Inject over the table a "block" that represents the table... once the javascript has finished building the table.. hide the block and show the table either with a crude hide/show or using CSS fade transitions on the parent. This way it is a better separation of concerns... the datatable does its thing with correct data, the ui does its thing by showing and hiding at the right time.

This is a the same strategy that other sites such as linkedin and facebook use. On initial load the page renders a static block (on the fb wall for example this block looks like a faded out wall post)... then once the xhr request has returned with data the frontend app replaces the static block with actual content.

In your case it would be the same, but instead of waiting for an xhr to resolve it would be triggered by the datatables render callback.

Upvotes: 2

Related Questions