Datatables jQuery Full Example And Configuration

Datatables jQuery Full Example And Configuration

Full Page Demo and Download

Full Property Of Datatables

$('#example').dataTable({
     "bPaginate": false,
     "bLengthChange": false,
     "bFilter": true,
     "bSort": false,
     "bInfo": false,
     "bAutoWidth": false,
     "sScrollY": "200px",
     "bScrollCollapse": true,
     "aaSorting": [[4, "desc"]], // Column Sorting
     "aaSortingFixed": [[0, 'asc']], // This can be useful for grouping rows together.
     "aaSorting": [[0, 'asc'], [1, 'asc']], // Multi Column Sorting
     "aoColumnDefs": [{ "bSearchable": false, "bVisible": false, "aTargets": [0]}], // DataTables with hidden columns
     "bStateSave": true, // When enabled a cookie will be used to save table display information such as pagination information, display length, filtering and sorting. As such when the end user reloads the page the display display will match what thy had previously set up.
     "sPaginationType": "full_numbers", // two_button (default) and full_numbers with 'first', 'previous', 'next' and 'last' buttons
     "oLanguage": {
         "sLengthMenu": "Display _MENU_ records per page",
         "sZeroRecords": "Nothing found - sorry",
         "sInfo": "Showing _START_ to _END_ of _TOTAL_ records",
         "sInfoEmpty": "Showing 0 to 0 of 0 records",
         "sInfoFiltered": "(filtered from _MAX_ total records)"
     },
     "bJQueryUI": true,
     "bProcessing": true,
     "bServerSide": true,
     "sAjaxSource": '../ajax/sources/arrays.txt', // "../server_side/scripts/server_processing.php"
     "fnServerParams": function (aoData) {
         aoData.push({ "name": "more_data", "value": "my_value" }); // send a little bit of extra information to the server
     },
     "sServerMethod": "POST", // The default is 'GET'
     "aoColumns": [{ "sTitle": "Engine", "asSorting": ["asc"] }, { "sTitle": "Browser" }, { "sTitle": "Platform" }, { "sTitle": "Version", "sClass": "center" }, { "sTitle": "Grade", "sClass": "center"}],
     "aLengthMenu": [[10, 25, 50, -1], [10, 25, 50, "All"]],
     "sDom": '<"top"iflp<"clear">>rt<"bottom"iflp<"clear">>',
     //http://www.datatables.net/release-datatables/examples/basic_init/dom.html
     //l - Length changing
     //f - Filtering input
     //t - The table!
     //i - Information
     //p - Pagination
     //r - pRocessing
     //< and > - div elements
     //<"class" and > - div with a class
     "fnRowCallback": function (nRow, aData, iDisplayIndex) {
         /* Append the grade to the default row class name */
         if (aData[4] == "A") {
             $('td:eq(4)', nRow).html('A');
         }
     },
     "fnFooterCallback": function (nRow, aaData, iStart, iEnd, aiDisplay) {
         /*Calculate the total market share for all browsers in this table (ie inc. outside
         * the pagination)*/
         var iTotalMarket = 0;
         for (var i = 0; i < aaData.length; i++) {
             iTotalMarket += aaData[i][4] * 1;
         }
         /* Calculate the market share for browsers on this page */
         var iPageMarket = 0;
         for (var i = iStart; i < iEnd; i++) {
             iPageMarket += aaData[aiDisplay[i]][4] * 1;
         }
         /* Modify the footer row to match what we want */
         var nCells = nRow.getElementsByTagName('th');
         nCells[1].innerHTML = parseInt(iPageMarket * 100) / 100 +
         '% (' + parseInt(iTotalMarket * 100) / 100 + '% total)';
     },
     "fnDrawCallback": function (oSettings) {
         /* Need to redo the counters if filtered or sorted */
         if (oSettings.bSorted || oSettings.bFiltered) {
             this.$('td:first-child', { "filter": "applied" }).each(function (i) {
                 that.fnUpdate(i + 1, this.parentNode, 0, false, false);
             });
         }
     }
 });