How to detect empty table when selecting a row in a jQuery Datatable

Question

Giving a simple table like this

<table id="exampleTable" class="table hover nowrap">
   <thead>
      <tr>
         <th>Id</th>
         <th>Name</th>
      </tr>
   </thead></table>

Also, using the jQuery Datatable plugin and making the rows selectable, like in this example. The Javascript goes like this:

var exampleTable = $("#exampleTable").DataTable(
                    {
                        "bDestroy": true,
                        "lengthChange": false,
                        "bPaginate": false
                    });

$('#exampleTable tbody').on( 'click', 'tr', function () {
        if ( $(this).hasClass('selected') ) {
            $(this).removeClass('selected');
        }
        else {
            $('#exampleTable tr.selected').removeClass('selected');
            $(this).addClass('selected');
        }
    } );

So, when the table is empty, it shows a selectable row which says something like:

No data available in table

How to detect the table is empty and not allow selection on that kind of "message rows"?

Here is a fiddle with the code.

But what happen then when I have only one row? @Murali no, I want to disable the selection on the "No data" row. — Daniel Marín
– Daniel Marín, Commented Jan 27, 2017 at 10:09

Daniel Marín · Accepted Answer · 2017-01-27 13:54:07Z

3

you can check if there is td with the class dataTables_empty like this:

$('#exampleTable tbody').on( 'click', 'tr', function () {
        if ( $(this).hasClass('selected')) {
            $(this).removeClass('selected');
        }
        else if(! $(this).find('td.dataTables_empty').length){
            $('#exampleTable').DataTable().rows().nodes().each(function(){
               $(this).removeClass('selected');
            });
            $(this).addClass('selected');
        }
    } );

edited Jan 27, 2017 at 13:54

Daniel Marín

1,45716 silver badges40 bronze badges

answered Jan 27, 2017 at 9:58

Sepultura

1,0571 gold badge11 silver badges28 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

Daniel Marín Over a year ago

Yes, I was thinking in this possibility, but I was hoping to find a "cleaner" way to do it.

Sepultura Over a year ago

looks clean enough for me :), I don't know how else you would check if there are entries? Maybe Datatable provides some callback functions where you can check it

Daniel Marín Over a year ago

That was exacly what I was hoping for :)

Daniel Marín Over a year ago

I have updated your answer, cause it is necessary to remove the selected class from the hidden rows too.

Parikshit Bhagawati · Accepted Answer · 2017-01-27 10:22:12Z

0

You can use the - .row().data() method to see if there is data. if this returns undefined, you can disable selection of the row.

i also think this would be an ideal solution instead of dom traversal which is more expensive. what do you guys think ?

below is the updated fiddle. you can comment the tbody from the html to test it.

Let me know if this helps.

Modified Fiddle

answered Jan 27, 2017 at 10:22

Parikshit Bhagawati

1621 silver badge15 bronze badges

4 Comments

Daniel Marín Over a year ago

It doesn't work. Just make a search with some random letters and you will see that the "No matching records found" row is still selectable.

Parikshit Bhagawati Over a year ago

sorry about that. had not considered that scenario. from the api documentation what i found was adding the two resources for select there is not additional logic required. just an option to enable select. i.e 'select:true'. here is the updated fiddle. jsfiddle.net/vje9e2sL . please check resources in the fiddle for required css and js files.

Parikshit Bhagawati Over a year ago

the on 'select' is not mandatory. its just if you want to do additional processing. so please ignore if not required.

Daniel Marín Over a year ago

Yes, I have seen that, but I need to do more things in the select event, so I need to handle it.

Elmer Dantas · Accepted Answer · 2017-01-27 10:15:09Z

-1

inside your click method, add before everything

if($('#exampleTable tbody tr td').length == 1){
      return;
    }

edited Jan 27, 2017 at 10:15

answered Jan 27, 2017 at 10:08

Elmer Dantas

4,8895 gold badges33 silver badges39 bronze badges

2 Comments

Daniel Marín Over a year ago

This will disable the selection always there is only one row, even when the row is a valid record.

Elmer Dantas Over a year ago

so check with td (I've updated) because your 'no message' row just have one td (assuming that your datatable data has more than one td) should work as expected

Collectives™ on Stack Overflow

How to detect empty table when selecting a row in a jQuery Datatable

3 Answers 3

4 Comments

4 Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

4 Comments

4 Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related