jQuery Datatables keep selection after refresh

Question

I created a Datatable, when clicking on a row, the row will be highlighted.

$("#example tbody").click(function(event) {
  $(eTable.fnSettings().aoData).each(function (){
     $(this.nTr).removeClass('row_selected');
  });

 $(event.target.parentNode).addClass('row_selected');

});

The data in the table will be refreshed automatically

function refreshTable(table){
  eTable.fnReloadAjax(null, null, true);    
}           

function tableRefresher() {
    refreshTable(eTable);
    tid = setTimeout(tableRefresher, 1000); // repeat myself
}

After the table is refreshed, the selected row is not highlighted anymore.

Any ideas how to keep the selection intact after refreshing?

Thanks!

I've also tried this: eTable._fnAjaxUpdate(), it does make an ajax call but for some reason it does not update the table with the fetched data. — user955732
– user955732, Commented Aug 3, 2013 at 22:04
This might be worth looking at: datatables.net/extensions/select/examples/initialisation/… — yeniv
– yeniv, Commented Nov 19, 2020 at 7:07

user955732 · Accepted Answer · 2013-08-05 09:14:32Z

2

For anyone insterested,

this is more or less how I solved the problem

First store the hidden selected row id in a variable, selectedRowId

$('#example tbody tr').live('click', function () {
    var data = eTable.fnGetData(this);
    selectedRowId = data[4];
});

Refresh the table

refreshTable(eTable,'getAlerts');

function refreshTable(table, urlData)
{
  $.getJSON(urlData, null, function( json )
  {
    //table = $(tableId).dataTable();
    oSettings = table.fnSettings();
    table.fnClearTable(this);
    for (var i=0; i<json.aaData.length; i++)
    {
      table.oApi._fnAddData(oSettings, json.aaData[i]);
    }
    oSettings.aiDisplay = oSettings.aiDisplayMaster.slice();
    table.fnDraw();
    setSelectedRow();
  });
}

And re-selected the row after refresh

function setSelectedRow(){
    $(eTable.fnSettings().aoData).each(function (){
        var data = eTable.fnGetData(this.nTr);
        if(selectedRowId == data[4]){
            $(this.nTr).addClass('row_selected');   
        }   
    });
}

answered Aug 5, 2013 at 9:14

user955732

1,3603 gold badges22 silver badges49 bronze badges

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

1 Comment

Betard Fooser Over a year ago

Since you have done essentially what I suggested, you could mark my answer as the 'accepted' one

Betard Fooser · Accepted Answer · 2013-08-03 23:38:17Z

0

The simplest way would be to have your $("#example tbody").click() event also store a cookie with the value of the row selected.

Then have your refreshTable(table) function, read the cookie, and re-add the 'row_selected' class, after the ajax call returns successfully.

So --> table loads, user selects a row, row index is stored in cookie, table refreshes, cookie read, row re-selected.

Magic!

answered Aug 3, 2013 at 23:38

Betard Fooser

5265 silver badges14 bronze badges

3 Comments

Betard Fooser Over a year ago

You could also try to have your refreshTable() function detect what row is selected before the ajax call, and after the ajax call re-set it.

user955732 Over a year ago

Its only the data in the table that is refreshed, not the whole page. There is a hidden column with a unique value in every row in the table. So it should be possible to store the value of the hidden column for selected row, refresh the data, and then add the 'row_selected' class for the row with same hidden column value. The question is how to do that?

user955732 Over a year ago

I've managed to find the unique id in the hidden column for the selected row like this:

var selectedRowId; $('#example tbody tr').live('click', function () {  var data = eTable.fnGetData(this);  selectedRowId = data[4]; });

Now, how to find the corresponding row after table data refresh?

Collectives™ on Stack Overflow

jQuery Datatables keep selection after refresh

2 Answers 2

1 Comment

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related