JQuery DataTables

DataTable JQuery Plug-in

The DataTable plug-in can be used to create tables in the web application.

DataTable Features

The DataTable JQuery plugin has the following features –

• Pagination

• Instant Search

• Ordering the columns

• Suitable for Bootstrap, etc.

Installation Process

Include the following CDNs in the web application

• //ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js

• //cdn.datatables.net/1.10.7/css/jquery.dataTables.min.css

• //cdn.datatables.net/1.10.7/js/jquery.dataTables.min.js

How to use JQuery DataTable Plug-in?

• In index.html , just include the table tag with an id

<table id=”datatable-table” cellspacing=”0″ width=”100%”></table>

• In script.js, include the data to be displayed in the table and the column headings as below

$(function(){
     var dataSet1 = [
          [‘Alice’,’A ‘],
          [‘Jack’,’B’]
     ];
     $(‘#datatable-table’).dataTable( {
          “destroy”:true,
          “data”: dataSet1,
          “iDisplayLength”: 8,
          “bLengthChange”: false,
          “columns”: [
               { “title”: “Student Name” },
               { “title”: “Student Grade” }
          ],
     });
});

Error : Cannot reinitialise DataTable

If the above error occurs, include  “destroy”:true, in the begining of a dataTable instance. This destroys any datatable instance created earlier.

$(‘#datatable-table’).dataTable( {
          “destroy”:true
})

Working Example

Check the below link for a working example.

JQuery DataTable Example

References

• JQuery DataTable Plug-in