Datatables Checkbox, Header and Each Checkboxes

Question

I am using the Datatable plugin and i use checkboxes in the table. I want to achieve using the Header checkbox to check all the single checkboxes and check each checkboxes to count and display each and all. Also I want display (hide and show) a div while checking the checkboxes.

I have been able to achieve checking all, but i want to check each too (in respect to the header checkbox) i.e if all is checked, the header will all be checked, if one is unchecked, it unchecks the header checkbox and vice versa. This is my code

$('#selectAllCheck').change(function(e) {
                        var chk = $(this).prop('checked');
                        var currentRows = $('#example tbody tr');
                        $.each(currentRows, function(){
                            $(this).find(':checkbox[name=haschecked]').each(function(){
                                $(this).prop('checked', chk);
                                $(':checkbox[name=haschecked]').prop('checked', chk );
                                $('#inboxcheck')[ chk ? 'show' : 'hide' ](); // Hide and show div
                                $('.checkbox-logo-pane')[ chk ? 'show' : 'hide' ](); // Hide and show div
                                do_count();
                            });
                        });
                      });

                      var do_count =function(){
                          var n = $(':checkbox[name=haschecked]:checked').length;
                          $('.inbox-counter').html( n ); // The checkbox counter
                          return n
                      }
                    });

The problem is that `$('#example tbody tr')` selects rows on current page only. Show your DataTables initialization script, the solution will depend on whether you're doing client-side or server-side processing in DataTables. — Gyrocode.com, Jun 04 '15 at 15:07

score 0 · Accepted Answer · edited May 23 '17 at 10:26

This seems like a general checkboxes problem. Many good answers have already been posted here:

How to implement "select all" check box in HTML?

You can also use a less known state of the checkboxes called 'intermediate'. Here is another article the should help you:

https://css-tricks.com/indeterminate-checkboxes/

However you do it, the logic is pretty simple. Count checked checkboxes, if 0 leave head unchecked, if count == checkboxes.length then leave head checked, and for anything else leave the head check box intermediate.

Datatables Checkbox, Header and Each Checkboxes

1 Answers1