window load not displaying correct else message if table empty

Mr_P

I have code with a .on click event and that works fine. However, if I change it to window load or doc ready, it displays ‘data in row’ even though there is no data.

What I am trying to do is if the table is empty, disable the buttons. I checked the html in inspector and it appears that dt applies a class of 'dataTables_empty' if the table is empty.

I am confused as to why it works on click event and not on load. Comments would be appreciated as this is driving me nuts. Many thanks

dataTables v1.10

This works

$('#nirqst').on('click', 'tr', function () {
var table = $('#nirqst').DataTable();
 //get the current row
  var currentRow = $(this).closest("tr");
  var col1 = currentRow.find(".dataTables_empty").html(); 
  if((col1)=='No data available in table') { 
    console.log(col1); 
    table.buttons().disable();
    } else {
    console.log('data in row');
    table.buttons().enable();
    }
});

This dosen’t

$( window ).on( "load", function() {
var table = $('#nirqst').DataTable();
 //get the current row
  var currentRow = $('#nirqst').closest("tr");
  var col1 = currentRow.find(".dataTables_empty").html(); 
  if((col1)=='No data available in table') { 
    console.log(col1); 
    table.buttons().disable();
    } else {
    console.log('data in row');
    table.buttons().enable();
    }
});

Generated html table

<table class="display stripe dataTable no-footer" id="nirqst" role="grid" aria-describedby="nirqst_info" width="100%" cellspacing="0">
  <!--        <caption>New Intake Requests</caption>-->
  <thead>
    <tr role="row">
      <th style="width: 4%;" class="hide_id sorting_disabled" rowspan="1" colspan="1" aria-label="ID#">ID#</th>
      <th style="width: 4%;" class="hide_id sorting" tabindex="0" aria-controls="nirqst" rowspan="1" colspan="1" aria-label="ID Number: activate to sort column ascending">ID Number</th>
      <th class="sorting" tabindex="0" aria-controls="nirqst" rowspan="1" colspan="1" style="width: 20px;" aria-label="Select-->: activate to sort column ascending">Select
        <!--<input type="checkbox" id="select_all" name="select_intake" />-->
      </th>
      <th class="sorting" tabindex="0" aria-controls="nirqst" rowspan="1" colspan="1" style="width: 40px;" aria-label="Service: activate to sort column ascending">Service</th>
      <th class="sorting" tabindex="0" aria-controls="nirqst" rowspan="1" colspan="1" aria-label="Activity: activate to sort column ascending">Activity</th>
      <th class="sorting" tabindex="0" aria-controls="nirqst" rowspan="1" colspan="1" aria-label="Dept: activate to sort column ascending">Dept</th>
      <th class="sorting" tabindex="0" aria-controls="nirqst" rowspan="1" colspan="1" aria-label="Company: activate to sort column ascending">Company</th>
      <th class="sorting" tabindex="0" aria-controls="nirqst" rowspan="1" colspan="1" style="width: 160px;" aria-label="Address: activate to sort column ascending">Address</th>
      <th class="sorting" tabindex="0" aria-controls="nirqst" rowspan="1" colspan="1" aria-label="User: activate to sort column ascending">User</th>
      <th class="sorting" tabindex="0" aria-controls="nirqst" rowspan="1" colspan="1" aria-label="Box#: activate to sort column ascending">Box#</th>
      <th class="sorting" tabindex="0" aria-controls="nirqst" rowspan="1" colspan="1" aria-label="Destroy Date: activate to sort column ascending">Destroy Date</th>
      <th class="sorting_desc" tabindex="0" aria-controls="nirqst" rowspan="1" colspan="1" aria-label="Request Date: activate to sort column ascending" aria-sort="descending">Request Date</th>
      <th class="sorting_disabled" rowspan="1" colspan="1" style="width: 110px;" aria-label="Action">Action</th>
    </tr>
  </thead>
  <tbody>
    <tr class="odd">
      <td colspan="11" class="dataTables_empty" valign="top">No data available in table</td>
    </tr>
  </tbody>
</table>

colin

Hi @Mr_P ,

We're happy to take a look, but as per the forum rules, please link to a test case - a test case that replicates the issue will ensure you'll get a quick and accurate response. Information on how to create a test case (if you aren't able to link to the page you are working on) is available here.

Cheers,

Colin

Mr_P

Hi @colin

Many thanks for reply. I have done a test case and on live.datatables.net and it is working fine. Guess there must be something stopping it working it properly on my site. Will keep plugging away. Many thanks

allan

Are you Ajax loading the data into your table? if so, you'll need to wait for that Ajax to complete before checking to see if there are any rows or not.

Allan

Mr_P

Hi allan
Yes I am loading through ajax. How do I know when it completes. Thanks

colin

Hi @Mr_P ,

You can do that in the initComplete,

Cheers,

Colin

Mr_P

Hi colin
Thank you very much. Worked a treat.