Codechef4u is a community for computer professionals,by computer professionals,just like you; who loves sharing and helping each others,Join them
Share your post

Check-Uncheck all child checkboxes if parent checkbox checked or unchecked

In a table, with rows, every row has a check box, and there is a main check box at the thead.

Use following code example if you want to check and uncheck child check box when parent check box checked or unchecked(on change)

Code example

$("#chkParent").change(function () {
            if ($(this).prop('checked')) {
                $('#c4uSampleTable tbody input:checkbox ').each(function () {
                    $(this).prop('checked', true);
                });
            } else {
                $('#c4uSampleTable tbody input:checkbox').each(function () {
                    $(this).prop('checked', false);
                });
            }
        });


Default column-based ordering in jQuery data table

To set the default column to sort once default table instance created and table or page loaded properly, try following code sample for same.

Code example,

In following code sample in jQuery data table 3rd column default sorting/ordering is descending.

var SampleTable = $("#" + htmlElementId).DataTable(
                {
                    'columnDefs': [{
                        'searchable': true,
                        'orderable': true
                    }],
                   aaSorting: [[2, 'desc']]
                }
            ); 

Preserve checkboxes state in jQuery data table with pagination

Following code maintain checkbox state in jQuery debatable with pagination, for table C4uTable.

Code example,

$("#c4uTable").on('page.dt', function () {
 
var table = null;
  table = $('#c4uTable').DataTable();
 
  var selectedallChecks = true;
  var page = null;
  page =table.rows({ page: 'current' });
 
            page.nodes().to$().find('input[type="checkbox"]').each(function (value, index) {
 
 var checkboxchecked = $(this).prop('checked');
 
if (checkboxchecked === false) {
       selectedallChecks= false;
                }
         });
      $('#chlAll').prop('checked', selectedallChecks);
        });