jQuery数据表在重新加载后保留行突出显示

Question

I am reloading my datatable on 10 second intervals. When a user clicks on a row, that row will highlight. But when the datatable reloads, the highlight is gone.

Here is the shortened code for my datable:

$(document).ready(function() 
{
  // set datatable
  $('#example1').DataTable({        
    "ajax": {
      "url": "api/process.php",
      "type": "POST",
      "dataSrc": ''
    },
    "columns": [
      { "data": "" },
      { "data": "column1" },
      { "data": "column2" },
      { "data": "column3" }
    ],
    "iDisplayLength": 25,
    "order": [[ 6, "desc" ]],
    "scrollY": 600,
    "scrollX": true,
    "bDestroy": true,
    "stateSave": true
  });

  // reload datatable every 30 seconds
  setInterval(function()
  {
    var table = $('#example1').DataTable();
    table.ajax.reload();
  }, 30000);

  // highlight row
  $('#example1 tbody').on('click', 'tr', function()
  {
    $('#example1 tbody > tr').removeClass('selected');
    $(this).addClass('selected');
  });
});

All of the above works exactly how it's supposed to work. I just need to retain the row highlight after the datatable reloads.

Also, I attempted the answer from this post , but I scrapped it as the row no longer highlights.

Answer 1

Kindly update js file with below changes. Below code will save row clicked in global parameter and then focus the clicked row after ajax call.

var gblIndex = 0; //this will save row clicked index

function setFocus(){ 
$($('#example1 tbody > tr')[gblIndex]).addClass('selected');  

}


$(document).ready(function() 
{
  // set datatable
  $('#example1').DataTable({        
    "ajax": {
      "url": "api/process.php",
      "type": "POST",
      "dataSrc": ''
    },
    "columns": [
      { "data": "" },
      { "data": "column1" },
      { "data": "column2" },
      { "data": "column3" }
    ],
    "iDisplayLength": 25,
    "order": [[ 6, "desc" ]],
    "scrollY": 600,
    "scrollX": true,
    "bDestroy": true,
    "stateSave": true
  });

  // reload datatable every 30 seconds
  setInterval(function()
  {
    var table = $('#example1').DataTable();
    table.ajax.reload();
    setFocus(); // this will set focus/highlight row
  }, 30000);

  // highlight row
  $('#example1 tbody').on('click', 'tr', function()
  {
    $('#example1 tbody > tr').removeClass('selected');
    $(this).addClass('selected');
    gblIndex = $(this).index(); // this will save the index clicked
  });
});

Answer 2

You should review their actual selection documentation to manipulate this. This feature is already built in and setup so on ajax.reload() it will keep your selections.

You can apply classes/styling with their methods as well.

https://datatables.net/reference/option/#select