CODEWITHSUNDEEP
javascriptjquerycheckboxdatatables
nameless
nameless

Reputation: 1521

jQuery DataTables check Checkboxes on header click

I'm having a table in my current project and using DataTables to provide search and sort function on this table.

Now, I am adding checkboxes in front of every row, so one can check a row, to later only process checked rows.

What I would love is to be able to click the header (which is a checkbox as well) and then 1. not having a sort function for that column, as well as checking all checkbox when clicking, and unchecking all, if all are ticked already.

So I could do something like use the jQuery selector :checkbox to find the checkboxes and set the property checked to true, then if clicking again, check every if its checked and if yes uncheck them, if not check all, and so on.

But is there a more elegant, respectively a better way to do this? Also, how can I disable the sort, so its not a asc/desc sort icon showing in that column?

Upvotes: 3

Views: 2837

Answers (1)

Gyrocode.com
Gyrocode.com

Reputation: 58880

See jQuery DataTables Checkboxes plug-in that adds support for checkboxes and "select all" control in the header.

var table = $('#example').DataTable({
   'columnDefs': [
      {
         'targets': 0,
         'checkboxes': {
            'selectRow': true
         }
      }
   ],
   'select': {
      'style': 'multi'
   },
   'order': [[1, 'asc']]
});

See this example for code and demonstration.

Upvotes: 1

Related Questions