CODEWITHSUNDEEP
jquerydatatables
LAffair
LAffair

Reputation: 1998

Datatables add class to all body rows

I'm new in Datatables and I have a table that displays just the first 10 rows by default. I'm trying to add this class to all rows, not just for the default 10 ...

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

and

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

and

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

but without any success :( Is it possible to add/remove the select class to all rows just by clicking a button?

Upvotes: 5

Views: 16857

Answers (2)

Antti A
Antti A

Reputation: 500

To add class to all the rows

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

To remove class from all the rows (and select only the one you clicked)

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

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

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

Upvotes: 0

davidkonrad
davidkonrad

Reputation: 85598

I believe the best way to add a certain class to all rows is upon initialization :

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

You can add/remove a class to a row upon click by using 

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

You can also by code remove (or add) a class to all rows by 

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

All examples in action here -> http://jsfiddle.net/c67q2b4x/

Upvotes: 21

Related Questions