jQuery數據表在重新加載后保留行突出顯示

Question

我正在每隔10秒重新加載我的數據表。 當用戶單擊一行時，該行將突出顯示。 但是，當重新加載數據表時，高光消失了。

這是我的數據的簡化代碼：

$(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');
  });
});

以上所有功能都可以正常工作。 重新加載數據表后，我只需要保留行突出顯示。

另外，我嘗試了這篇文章的答案，但是由於該行不再突出顯示，因此我將其廢棄了。

Answer 1

請通過以下更改更新js文件。 下面的代碼將單擊的行保存在全局參數中，然后在ajax調用后集中單擊的行。

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

您應該查看其實際選擇文檔以進行操作。 該功能已內置並已設置，因此在ajax.reload（）上將保留您的選擇。

您還可以將類/樣式及其方法一起應用。

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