jQuery DataTables check Checkboxes on header click

Question

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?

Gyrocode.com · Accepted Answer · 2018-01-08 15:59:30Z

1

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.

answered Jan 8, 2018 at 15:59

Gyrocode.com

59k16 gold badges157 silver badges192 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

jQuery DataTables check Checkboxes on header click

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related