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