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

以上所有内容都与它的工作原理完全相同。我只需要在数据表重新加载后保留行高亮显示。

另外，我尝试了this post的答案，但是由于该行不再突出显示，我将其废弃。

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

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

2 个答案: