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

完全未经测试，但不明白为什么它不应该工作。