Datatable : Table plug-in for jQuery

jQuery DataTables is very popular grid plug-in for the HTML table. Datatables uses to convert HTML table into useful grid listing with advanced features.

The Basic version of Data table has sorting searching and column level searching.There are many datatables supported plugins available which are use to create HTML Table into full functional data grid like export table data into CSV/Excel,child rows,scrollbar,dynamic width etc.

You can also check other tutorial of Datatable,

Simple Example of jQuery datatables

Step 1: Include js and css file into head tag of your index.html file.

Select Code
1
2
3
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/r/dt/dt-1.10.9/datatables.min.css"/>
<script type="text/javascript" src="https://cdn.datatables.net/r/dt/dt-1.10.9/datatables.min.js"></script>
<script type="text/javascript" charset="utf8" src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.8.2.min.js"></script>

Step 2 :
Instantiate dataTable() method on HTML table to integrate table list on that table.

Select Code
1
2
3
4
$(document).ready(function(){
    $('#myTable').dataTable();
    //myTable is you table id.
});

here our target table id is #myTable.We are calling dataTable method on it.

Datatable UI

datatable