jquery datatable add class to row

Question

I have a datatable which when I click on a row, it highlights the row. I want to save the row index and use it to re-highlight that row when the page is reloaded.

var table = $('#example').DataTable( {
                    "ajax": "DataQueries/FetchOpenJobs.asp",
                    stateSave: true,
                    "aLengthMenu": [[10, 25, 50, 100], [10, 25, 50, 100]],
                    "iDisplayLength": 25,
                    "order": [[ 0, "desc" ]],
                    columnDefs: [
                        {"visible": false, "targets": [2,3]},
                        {"type": 'date-uk', "targets": [1,9,10] },
                        {"type": 'title-string', "targets": [11] }
                    ],
                } );

I am able to get the row index using the below:

var selectedRowIndex = table.row(this).index();

However, I am unsure as to how to re-highlight using the row index.

Are you saving it to server side anywhere? or just on client browser? — Guruprasad J Rao
– Guruprasad J Rao, Commented Sep 8, 2015 at 6:49

davidkonrad · Accepted Answer · 2015-09-11 07:32:31Z

2

I think this question deserves a more thorough example.

I would save the selected id('s) in the localStorage as an stringified array. When the page is (re)loaded then retrieve the array and if it contains any stored indexes, highlight the corresponding rows. Below a code example in explanatory order :

Sample code of highlightning rows when they are clicked :

$('#example').on('click', 'tr', function() {
    $(this).toggleClass('highlight');
    processSelected(table.row(this).index(), $(this).hasClass('highlight'));
});

Basic code for maintaining an array of highlighted row indexes in the localStorage :

function processSelected(id, selected) {
   if (selected) {
      selectedRows.push(id);
   } else {
      selectedRows.splice(selectedRows.indexOf(id), 1);
   }
   localStorage.setItem('selectedRows', JSON.stringify(selectedRows));
}

When the page is loaded, retrieve the array from localStorage :

var selectedRows = JSON.parse(localStorage.getItem('selectedRows'));

Finally, re-highlight stored row indexes when the dataTable is initialised :

var table = $('#example').DataTable({
    initComplete : function() {
       if (!Array.isArray(selectedRows)) {
          //selectedRows does not exists in localStorage or is messed up
          selectedRows = [];
       } else {   
          var _table = this.api(); 
          selectedRows.forEach(function(index) {
             //for some reason to$() doesnt work here 
             $(_table.row(index).node()).addClass('highlight');
          })
       }    
   }
});

demo -> http://jsfiddle.net/f3ghvz4n/

Try the demo, highlight some rows and then reload the page. Notice that this works on a paginated dataTable as well!

Update. When you are using a AJAX datasrc reloaded each 30 secs, I think you could skip the initComplete and just rely on the draw.dt event :

var table = $('#example').DataTable();

$('#example').on('draw.dt', function() {
   if (!Array.isArray(selectedRows)) {
      selectedRows = [];
   } else {   
      selectedRows.forEach(function(index) {
         $(table.row(index).node()).addClass('highlight');
      })
   }   
})

Completely untested, but cannot see why it shouldnt work.

edited Sep 11, 2015 at 7:32

answered Sep 8, 2015 at 11:01

davidkonrad

85.7k17 gold badges211 silver badges273 bronze badges

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

4 Comments

Saj Over a year ago

This is great. It actually does hold the highlight but I still have a small problem. I used table.ajax.reload() function to reload the table every 30 secs. At that point, I lose the highlight. But if I refresh the entire page, The highlight comes back on again (until the next ajax,reload() kicks in)

davidkonrad Over a year ago

@Saj, place the code inside initComplete in a function you can call after each ajax.reload().

Saj Over a year ago

Can I call it this way? table.ajax.reload( function() { if (!Array.isArray(selectedRows)) { selectedRows = []; } else { var _table = this.api(); selectedRows.forEach(function(index) { $(_table.row(index).node()).addClass('selected'); }); } });

davidkonrad Over a year ago

@Saj, see update - it was something like this I had in mind.

ozil · Accepted Answer · 2015-09-08 06:52:05Z

0

This should do the trick:

$('#id tbody > tr').eq(rowindex)

or

$('#id tbody > tr').eq(rowindex).children().addClass('myClass');

answered Sep 8, 2015 at 6:52

ozil

7,1639 gold badges38 silver badges62 bronze badges

7 Comments

Saj Over a year ago

tried that but no luck. When the page reloads, it still drops off the highlight

ozil Over a year ago

Put this code in "fnInitComplete": function (oSettings, json) {// code here}});

Saj Over a year ago

I have added that to the initComplete but still no luck

ozil Over a year ago

what does $('#id tbody > tr').eq(rowindex).children() return does it return an object or null??

Saj Over a year ago

it returns an [object Object]

|

Collectives™ on Stack Overflow

jquery datatable add class to row

2 Answers 2

4 Comments

7 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

4 Comments

7 Comments

Your Answer

Sign up or log in

Post as a guest

Related