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

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

Reusable jQuery function to show or hide element

With following code sample, you can show or hide element by element id.

  • Pass following parameter to function
  • A Boolean flag, true for show and false for hide element
  • Your html element unique id

Code example

function showHideHtmlElement(toShow,elementId) {
    if (toShow) {
        if ($(elementId).is(":hidden")) {
            $(elementId).show();
        }
    }
    else {
        if ($(elementId).is(":visible")) {
            $(elementId).hide();
        }
    }
}