Datatables -- A jQuery plugin

Datatables has turned to be a boon in programming as it reduces the hardships and at the same time provides various features. The use of this plugin is to list records. Datatables also gives a great experience for the end user as it adds features like ordering, searching, paging thus providing the ability to find the information they want as quickly as possible.

Some of the features provided by Datatables are:

  1. Pagination, instant search and multi-column ordering
  2. Easily themable --- Can apply the theme of your choice
  3. Supports almost any data source:DOM, Javascript, Ajax and server-side processing
  4. Wide range of easily configurable options
  5. User friendly

Installation:

Basic installation of the plugin is a simple 2 step process: 

  1. Include DataTables Javascript file and DataTables CSS file 
    <!-- DataTables CSS -->
    <link rel="stylesheet" type="text/css" href="/DataTables-1.10.2/css/jquery.dataTables.css"> 
    <!-- jQuery -->
    <script type="text/javascript" charset="utf8" src="/DataTables-1.10.2/js/jquery.js"></script> 
    <!-- DataTables -->
    <script type="text/javascript" charset="utf8" src="/DataTables-1.10.2/js/jquery.dataTables.js"></script>

    Note: Simply download the latest version of DataTables, extract and upload to your web-server 
  2. Initialization of Datatables
    A few lines of code in the js file and the plugin is ready to be used
    $(document).ready( function () {
        $('#table_id').DataTable();
    } );

Below image shows a simple Initialization of DataTable.


Exploring Datatables:

There are many options available in Datatables some of which are defined below:

  1. Server side processing: 

    In some cases when we have to deal with thousands of records, loading data from the DOM is not a wise idea. Here comes the server side processing feature of the datatables.

    In server side processing of data filtering, paging and sorting calculations are all performed by a server unlike the client side where everything is performed in web browser.

    Server-side processing is enabled by using the serverSide option, and configured using ajax.

    var oTable = $('#filter-dataTables').dataTable({
    "bScrollCollapse": true,
    "sPaginationType": "full_numbers",
    "bAutoWidth": true,
    "bSortCellsTop": true,
    "iDisplayLength": 10,
    "bProcessing": true,
    "bServerSide": true,
    "sAjaxSource": ajaxActiveDriverOverviewUrl,
    "sDom": 'RC<"clear">lfrt<"bottom"i>p',
    "oLanguage": {
    "sSearch": 'Search all columns:',
    "sEmptyTable": 'No records found'
    },
    });


    Where “sAjaxSource” loads data for the table's content from an Ajax source. This reduces the loading time of the page. “oLanguage” is the language configuration option for datatables.

  2. Fixed Header: 

    Datatable header remains fixed, even if the number of records displayed at a time increases from 10 to 25 to 50 or 100 and so on.

    var oTable = $('#filter-dataTables').dataTable({
    "sScrollY": (0.6 * $(window).height()),
    "bScrollCollapse": true,
    "sPaginationType": "full_numbers",
    "bAutoWidth": true,
    "sScrollX": "100%",
    "sScrollXInner": "100%",
    "bSortCellsTop": true,
    "iDisplayLength": paginationValue,
    "bProcessing": true,
    "bServerSide": true,
    "sAjaxSource": ajaxActiveDriverOverviewUrl,
    "sDom": 'RC<"clear">lfrt<"bottom"i>p',
    });


  3. Handling error message:  

    Whenever something goes wrong in the search [syntax error or anything else] datatables throw error message in a pop up which does not appear quite good. The error can be caught and displayed in a more presentable way. 


var oTable = $('#filter-dataTables').dataTable({
"bScrollCollapse": true,
"sPaginationType": "full_numbers",
"bAutoWidth": true,
"bSortCellsTop": true,
"iDisplayLength": paginationValue,
"bProcessing": true,
"bServerSide": true,
"sAjaxSource": ajaxActiveDriverOverviewUrl,
"sDom": 'RC<"clear">lfrt<"bottom"i>p',
"fnServerData": function(sSource, aoData, fnCallback, oSettings) {
oSettings.jqXHR = $.ajax({
"dataType": 'json',
"type": "GET",
"url": sSource,
"data": aoData,
"success": fnCallback,
"error": function(e) {
dialog('#error', null);
}
});
}
});



In Gist: 

Datatable is a jQuery plugin which is open source and easy to configure. It is user-friendly plugin with easy search, order and pagination facilities.  It has got various options using which the plugin can be configured to get any desired output.

Reference:

http://www.datatables.net


Categories: HTML JavaScript

Copyright © 2019 Lelesys Informatik GmbH, Deutschland. All Rights Reserved.