Saturday, 2 May 2015

Jquery Datatable Plugin Tutorial


Jquery Datatable Plugin Tutorial

Datatables are mainly used to enhance the accessibility of data in HTML tables.

DataTables is a plug-in for the jQuery Javascript library. It is a highly flexible tool and will add advanced interaction controls to your HTML table like Pagination, instant search and multi-column ordering.

It is very to use Datatable plugin in your HTML pages. Just take a peice of code below: a single function call to initialise the table is all it takes!


$(document).ready(function(){
    $('#myTable').DataTable();
});
 


You can start using DataTables by simply including two files in your web-site, the CSS styling and the DataTables script itself which are also available free on the  DataTables CDN:

CSS : //cdn.datatables.net/1.10.7/css/jquery.dataTables.min.css
JS : //cdn.datatables.net/1.10.7/js/jquery.dataTables.min.js

////////////////////////////////////////---Example---////////////////////////////////////////

<html>
    <head>
        <title></title>
        <link rel="stylesheet" href="//cdn.datatables.net/1.10.7/css/jquery.dataTables.css"/>
        <script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
        <script src="//cdn.datatables.net/1.10.7/js/jquery.dataTables.min.js"></script>
        <script>
            $(document).ready(function () {
                $('#example').DataTable();
            });
        </script>
    </head>
    <body>
        <table id="example" class="display" cellspacing="0" width="100%">
            <thead>
                <tr>
                    <th>Name</th>
                    <th>Position</th>
                    <th>Office</th>
                    <th>Age</th>
                    <th>Start date</th>
                    <th>Salary</th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td>Tiger Nixon</td>
                    <td>System Architect</td>
                    <td>Edinburgh</td>
                    <td>61</td>
                    <td>2011/04/25</td>
                    <td>$320,800</td>
                </tr>
            </tbody>
        </table>
    </body>
</html>

//////////////////////////////////////////////////////////////////////////////////////////

Feature enable / disable : 

$(document).ready(function() {
    $('#example').dataTable( {
        "paging":   false,
        "ordering": false,
        "info":     false
    } );
} );

//////////////////////////////////////////////////////////////////////////////////////////

Default ordering (sorting) :

Specify column number and sorting order.

$(document).ready(function() {
    $('#example').dataTable( {
        "order": [[ 3, "desc" ]]
    } );
} );

//////////////////////////////////////////////////////////////////////////////////////////

Scroll - horizontal and vertical :

$(document).ready(function() {
    $('#example').dataTable( {
        "scrollY": 200,
        "scrollX": true
    } );
} );

//////////////////////////////////////////////////////////////////////////////////////////

Information Options:

$(document).ready(function() {
    $('#example').dataTable( {
        "language": {
            "lengthMenu": "Display _MENU_ records per page",
            "zeroRecords": "Nothing found - sorry",
            "info": "Showing page _PAGE_ of _PAGES_",
            "infoEmpty": "No records available",
            "infoFiltered": "(filtered from _MAX_ total records)"
        }
    } );
} );

And many more options, reference Datatables .

Please leave your comments if you have any queries.