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

时间:2017-04-13 20:38:23

标签: jquery datatables

我是Datatables的新手,我有一个默认显示前10行的表。我试图将此类添加到所有行,而不仅仅是默认的10 ...

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

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

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

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

2 个答案:

答案 0 :(得分:10)

我认为向所有行添加某个类的最佳方法是初始化:

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/

答案 1 :(得分:0)

向所有行添加类

$('#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');
}