数据表在创建后向行添加类

如何解决数据表在创建后向行添加类

我正在使用数据表并尝试根据可以在创建表后设置的其他输入来突出显示行。无法使用 createdrow 回调，我不确定它是否适用于此目的，因为它在我需要之后用于创建。

我可以用 javascript 来做，但我想也许数据表属性/函数有更好的选择。

$(document).ready( function () {
    $('#myTableId').DataTable();
} );

function itemSelected(sel) {
    var opts = [];
    var len = sel.options.length;
    for (var i = 0; i < len; i++) {
        if (sel.options[i].selected) {
        opts.push(sel.options[i].value);
    }
}

var table = document.getElementById("myTableId");
   for (var r = 0; r < table.rows.length; r++) {

        if(opts.indexOf(table.rows[r].cells[0].innerHTML) >= 0){
            table.rows[r].cells[0].classList.add('highlithRow');
            table.rows[r].cells[1].classList.add('highlithRow');
        }
        else{
            table.rows[r].cells[0].classList.remove('highlithRow');
            table.rows[r].cells[1].classList.remove('highlithRow');
       }
    }
}

解决方法

在初始化方法中添加回调函数：

$(document).ready( function () {
    $('#myTableId').DataTable( {
        "createdRow": function ( row,data,index ) {
            if (data[1] == 200) {
                $('td',row).eq(1).addClass("highlithRow");
            }
        }
    } );
} );

您可以在此处阅读更多相关信息：https://datatables.net/examples/advanced_init/row_callback.html

假设您已将表分配给一个变量，如下所示...

var table = $('#myTableId').DataTable();

你有一个看起来像这样的表格（帮助你想象代码在做什么）：

...然后您可以使用 DataTables API 遍历表中的所有行，并访问每个 <tr> 节点，以及相关的行数据：

table.rows().every( function () {
  rowNode = this.node();
  rowData = this.data();
  if (rowData.office === 'Tokyo') {
    $(rowNode).addClass( 'highlightme' ); 
  }
} );

这假设您的行数据是作为对象 {...},{...},... 提供的 - 例如，来自您的源 JSON。

如果 HTML 表格中已经提供了数据，或者每行都以数组 [...],[...]... 的形式提供，那么您需要使用索引访问数据单元格：

if (rowData[2] === 'Tokyo') {

最终结果是东京行的所有 <tr> 元素现在都添加了 highlightme 类：

<tr role="row" class="odd highlightme">
  <td class="sorting_1">Airi Satou</td>
  <td>Tokyo</td>
  <td>Tokyo</td>
  <td>Accountant</td>
  <td>2008/11/28</td>
  <td>$162,700</td>
</tr>