数据表将类添加到所有正文行答案

【问题标题】：Datatables add class to all body rows数据表将类添加到所有正文行
【发布时间】：2017-04-13 20:38:22
【问题描述】：

我是 Datatables 的新手，我有一个默认情况下仅显示前 10 行的表。我正在尝试将此类添加到所有行，而不仅仅是默认的 10 ...

var table = $("#datatable-buttons").DataTable({...})
table.rows.removeClass('selected')

和

$('tbody tr').removeClass('selected')

和

$(tables.table().body()).removeClass('selected')

但没有任何成功:( 是否可以通过单击按钮将select 类添加/删除到所有行？

【问题讨论】：

我相信是的。但是是否有一个小提琴或某事，以便我们可以看到整个画面。

标签： jquery datatables

【解决方案1】：

我相信将某个类添加到所有行的最佳方法是在初始化时：

var table = $('#example').DataTable({
  createdRow: function ( row, data, index ) {
     $(row).addClass('selected')
  } 
})

您可以在点击时添加/删除一个类到一行中使用

table.on('click', 'tbody tr', function() {
  var $row = table.row(this).nodes().to$();
  var hasClass = $row.hasClass('selected');
  if (hasClass) {
    $row.removeClass('selected')
  } else {
    $row.addClass('selected')
  }
})

您也可以通过代码删除（或添加）一个类到所有行

table.rows().every(function() {
  this.nodes().to$().removeClass('selected')
})

这里的所有示例 -> http://jsfiddle.net/c67q2b4x/

【讨论】：

由于在使用jquery，toggleClass('selected') 在onClick 添加/删除类时更容易使用。

【解决方案2】：

为所有行添加类

$('#datatable tbody').on( 'click', 'tr', function () {
  $('#datatable tbody tr').addClass('selected');
}

从所有行中删除类（并仅选择您单击的行）

$('#datatable tbody').on( 'click', 'tr', function () {

  // Removing all the selections
  $('#datatable tbody tr').removeClass('selected');

  // selecting the on which you clicked
  $(this).toggleClass('selected');
}

【讨论】：

你没有抓住重点。您需要通过 API 以保持更改的持久性。建议的 jQuery 调用将在用户更改页面、过滤或排序另一列时丢失。这就是为什么我在接受的答案中处理 $row 的原因。但是使用 toggleClass 而不是 if 语句肯定是个好主意。
问题不是关于“使更改持久化”，只是更改类。没有必要让事情变得比现在更复杂。
你用过 jQuery DataTables 吗？ DT 使用未连接到 DOM 的内部数据集。