Question

我有一个数据表，当我点击一行时，它会突出显示该行。我想保存行索引，并在重新加载页面时使用它重新突出显示该行。

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] }
                    ],
                } );

我可以使用以下内容获取行索引：

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

但是，我不确定如何使用行索引重新突出显示。

Answer 1

我认为这个问题值得一个更彻底的例子。

我会将id中选定的localStorage（'s）保存为字符串化数组。当（重新）加载页面然后检索数组，如果它包含任何存储的索引，则突出显示相应的行。下面是解释顺序的代码示例：

单击时突出显示行的示例代码：

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

在localStorage中维护突出显示的行索引数组的基本代码：

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

加载页面后，从localStorage中检索数组：

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

最后，在初始化dataTable时重新突出显示存储的行索引：

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

演示 - ＆gt;的 http://jsfiddle.net/f3ghvz4n/

尝试演示，突出显示某些行，然后重新加载页面。请注意，这也适用于分页的dataTable！

<强>更新即可。当您使用每30秒重新加载一次AJAX datasrc时，我认为您可以跳过initComplete并依赖draw.dt事件：

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

完全未经测试，但无法理解为什么它不起作用。

Answer 2

这应该可以解决问题：

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

或

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

jquery datatable将类添加到行

2 个答案: