jquery 数据表将类添加到行

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 ('s) 作为字符串化数组保存在localStorage中。 当页面被（重新）加载时，然后检索数组，如果它包含任何存储的索引，则突出显示相应的行。 下面是按说明顺序的代码示例：

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

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

演示 -> http://jsfiddle.net/f3ghvz4n/

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

---

更新。 当您使用每 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');