How not to show datatable when there are now rows (or less then N rows)

valentijn

Hi,

I have a page with multiple tables, which can and some will be empty or only a few rows. In these case I would rather not show any of the datatables and datatables controls. Is this possible without showing all the tables first and then hide them?

Solutions considered:
1) I could just let them initialize as usual and then hide them, but apart from the waste of cpu it may/will also lead to flickering pages/elements.

2) Count the rows first in javascript and only initialize the datatable if there's more then N rows.

3) On server server side do not render the datatables initialization javascript code if there's less then N rows.

All doable, but I was wondering if there's something built in to Datatables.

I saw something like the above on this example: https://datatables.net/extensions/buttons/examples/flash/hidden.html
There's usage of a 'visible' property/setting on the whole table it seems? I couldn't find it documented anywhere.

Might be for consideration a datatables option to only show the datable / controls if there's more then X rows.

Valentijn

kthorngren

I would probably opt for the example you linked to. You can use initComplete to determine the number of rows in the table (page.info()) then show the table if there are enough rows.

Kevin

valentijn

So just wrap it in another (initially hidden) div?
That could work to hide the table if there are no rows. If I would like to only load datatables if there are more then X rows, something else is needed. So I guess it's easiest to just count the row in javascript/jquery before initializing datatables.

rf1234

So just wrap it in another (initially hidden) div?

Yes that should work. I don't even hide them initially but decide on whether they should be hidden or not AFTER Data Table initialization.

So I guess it's easiest to just count the row in javascript/jquery before initializing datatables.

No need to do it in javascript/jquery because then it is more difficult to count the rows. I would just decide on "init" (same as option "initComplete") whether the container should be shown or not.

table
    .on('init', function () {      
        if ( table.data().count() > 10 ) {
            $('#tblContainer').removeClass("hidden");
        } else {
           $('#tblContainer').addClass("hidden");
        }
    } );

if the "init" event is triggered too late for you then you could use the "xhr" event. Here you can count the records returned from the server before the initialization will have been completed and hide the table early enough.
https://datatables.net/reference/event/xhr

table 
    .on('xhr', function( e, settings, json, xhr ) {
        $('#tblContainer').addClass("hidden"); //not need when hidden initially
        if ( json != null ) {
            if ( typeof json.data !== 'undefined' ) {
                if ( json.data.length > 10 ) {
                    $('#tblContainer').removeClass("hidden");
                }
            }
        }
    });