jquery datatable добавить класс в строку

Question

У меня есть datatable, который, когда я нажимаю на строку, выделяет строку. Я хочу сохранить индекс строки и использовать его для повторного выделения этой строки при перезагрузке страницы.

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 tbody > tr').eq(rowindex) 

или

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

Answer 2

Я думаю, этот вопрос заслуживает более тщательного пример.

Я бы сохранил выбранные id (s) в localStorage как стробированный массив. Когда страница загружается (повторно), затем извлекайте массив и, если он содержит любые сохраненные индексы, выделите соответствующие строки. Ниже пример кода в объяснительной порядке:

Sample код highlightning строки, когда они кликают:

$('#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/

Попробуйте демо, выделить несколько строк, а затем перезагрузите страницу. Обратите внимание, что это работает и с разбитым на страницы dataTable!

---

Update. При использовании AJAX DATASRC перезагрузке каждые 30 секунд, я думаю, что вы могли бы пропустить 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'); 
     }) 
    } 
}) 

Полностью тестировался, но не может понять, почему он не должен работать.