I am having trouble trying to see if a table td has a certain class. If it does then do something. The code I am using always shows empty in console.log even if the table td has data. I would be grateful if someone could check my code and point out my error. Thanks
if ($('#nirqst').find('tbody tr').length<=1) {
console.log('empty');
} else {
console.log('not empty');
}
also tried
if ($("#nirqst").hasClass("dataTables_empty")) {
console.log('empty');
} else {
console.log('not empty');
}
This is saying "if I find at least 1, or less than that, it’s empty. You can just do…
if (!$('#nirqst tbody tr").length) {
The second doesn’t work because you’re just targeting #nirqst which I take it as the table, and you mentioned the class should be on the <td> . A codepen example would make this easier to debug.
Thank you for reply Ryan. It is still showing ‘not empty’ even though it is. All I am trying to do is if a table td has a class of dataTables_empty then console.log(‘empty’); or not empty. Thanks
does dataTables put a class on the table if the table is empty?
Do you have an example you can show us of the HTML generated by your table? I suspect your problem is your seeking.
Yes, that is correct. let me grab the html from inspector.
Here is the html from inspector.
<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 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>
Right. So let’s go over why what you tried DIDNT work, and then come on to what WOULD work.
if ($('#nirqst').find('tbody tr').length<=1) {
Problem with this is, there is a tr inside the tbody. But this will also be true if the number of rows is equal to 1. So there’s a false positive here.
if ($("#nirqst").hasClass("dataTables_empty")) {
The table itself does not have this class. So this will never be true.
if (!$('#nirqst tbody tr").length) {
This fails because of the same problem as #1, just in reverse: Because the lack of information is put into a table row, this finds a length of 1, and so it won’t ever tell you it’s empty. Because it’s not.
So. Let’s figure out what exactly WOULD work.
Some of this is speculation, because I don’t know how dataTables creates its HTML. But here’s what I will operate on the assumption of:
If there is no data in the table, Create a row with a single cell in it. That cell has the class dataTables_empty, colspans the entire row, and contains the text “No data available in table”.
There are no circumstances in which a table that contains data will have any cells that have the class ‘dataTable_empty’.
Given those two assumptions, then there are several possibilities for detecting the presence of an empty table.
The simplest (complete selector) is:
if(!$("#nirqst tbody tr td.dataTables_empty").length)
Thank you for informative reply. However, your suggested solution is still showing empty when there is data in the table and there i no .dataTables_empty class. Seems to be working in reverse. Thanks
$(function()
{
if (!$("#nirqst tbody tr td.dataTables_empty").length)
{
// has specialclass
console.log('empty');
}
else
{
console.log('not empty');
}
});
Is this file available online somewhere?
From what you have shown us, this code should work.
EDIT: This code should work, given that the assumptions listed hold true.
Sorry, it is a private file so can only be used localhost. I have posted all the information I have. Thanks
The only other thing i can think of is that you’ve got more than one thing with the ID “nirqst” in your HTML file.
Open your inspector and put this into your console:
$("#nirqst").length;
$("#nirqst tbody").length;
$("#nirqst tbody tr td.dataTables_empty").length;
!$("#nirqst tbody tr td.dataTables_empty").length;
If you don’t see the responses as 1, 1, 1, false, something’s wrong.
all i got in inspector is: false
er… send each line individually. Sorry, should have been specific.
Yeh i just realised that. shows as 1,1,1,false
So your inspector is telling you that it’s correctly identifying the values as false…
You’re invoking this code on document ready.
I’m suspecting your code is firing before dataTables is done changing things…which would make it think that there isnt anything in the tables at the time…
Stick those lines of code into console logs and put them into your function. See if it still tells you 1,1,1 false.
it is showing as: 1,1,0 true. However there is 1 row of data in the table
Well then the table isnt empty, is it 
so that result is correct.
Except i’ve turned the code around and not made it clear.
True means that there IS data in the table. False means there ISNT. so make sure you’re logging the right message for those cases.
let me try both scenarios, data and no data and post the results
with no data. 1,1,1,false. However, that is if I take the doc ready away. if I leave in, 1,1,0,true