Answers

• kthorngren Posts: 21,343Questions: 26Answers: 4,954

  May 2020

  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 Posts: 2Questions: 1Answers: 0

  May 2020

  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 Posts: 3,000Questions: 87Answers: 421

  May 2020 edited May 2020

  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");
                  }
              }
          }
      });