DataTables is a plug-in for the jQuery Javascript library.
It is a highly flexible tool which has all the advanced features like Pagination, Sorting & Filter in HTML tables.
This plugin is created by Mr. Allan Jardine
——————————————————————————————————————————
Download these files:
1 . jquery.dataTables
2. demos.css
[ download images: 
]
——————————————————————————————————————————
Here is the Step by step example :
1. Create table in your HTML File:
<script type=”text/javascript” language=”javascript” src=”/html/js/jquery/jquery.js”></script>
<script type=”text/javascript” language=”javascript” src=”/html/testing/zubair/jquery.dataTables.js”></script>
<link rel=”stylesheet” type=”text/css” href=”/html/testing/zubair/demos.css”>
<table id=”example” class=”display”>
<thead>
<th>First Name </th>
<th>Last Name</th>
<th> Country</th>
<th> Phone</th>
<th>Grade</th>
</thead>
<tbody>
<tr>
<td>Allan </td>
<td>Jardine</td>
<td>America</td>
<td>42345</td>
<td>X</td>
</tr>
<tr>
<td>Gnaniyar</td>
<td>Zubair</td>
<td>India</td>
<td>52123</td>
<td>C</td>
</tr>
<tr>
<td>Zahid</td>
<td>Khan</td>
<td>Bangalore</td>
<td>6784</td>
<td>A</td>
</tr>
<tr>
<td>Musarath</td>
<td>Ahmed</td>
<td>Dubai</td>
<td>61111</td>
<td>A</td>
</tr>
<tr>
<td>Faisal</td>
<td>K</td>
<td>Kerela</td>
<td>712121</td>
<td>A</td>
</tr>
<tr>
<td>Mohammed</td>
<td>Ali</td>
<td>Salem</td>
<td>612121</td>
<td>A</td>
</tr>
<tr>
<td>Abdur</td>
<td>Rasheed</td>
<td>Eruvadi</td>
<td>12347</td>
<td>A</td>
</tr>
<tr>
<td>Masroor</td>
<td>Khan</td>
<td>Bangalore</td>
<td>12228</td>
<td>A</td>
</tr>
<tr>
<td>Arun</td>
<td>Kumar</td>
<td>Bangalore</td>
<td>32428</td>
<td>A</td>
</tr>
<tr>
<td>Vijayan</td>
<td>C</td>
<td>Salem</td>
<td>90138</td>
<td>D</td>
</tr>
</tbody>
<tfoot>
<tr>
<th><input type=”text” name=”firstName” value=”First Name” class=”search_init” /></th>
<th><input type=”text” name=”lastName” value=”Last Name” class=”search_init” /></th>
<th><input type=”text” name=”location” value=”Location” class=”search_init” /></th>
<th><input type=”text” name=”Phone” value=”phone” class=”search_init” /></th>
<th><input type=”text” name=”Grade” value=”grade” class=”search_init” /></th>
</tr>
</tfoot>
</table>
<%– jQueryscript –%>
<script type=”text/javascript” charset=”utf-8″>
var oTable;
var asInitVals = new Array();
jQuery(document).ready(function() {
oTable = jQuery(‘#example’).dataTable( {
“sPaginationType”: “full_numbers”,
“iDisplayLength”: 5,
“sDom”: ‘tfpli<”clear”>’
} );
/*
* This is for individual Column Filter in Footer text box
*/
jQuery(“tfoot input”).keyup( function () {
/* Filter on the column (the index) of this element */
oTable.fnFilter( this.value, jQuery(“tfoot input”).index(this) );
} );
jQuery(“tfoot input”).each( function (i) {
asInitVals[i] = this.value;
} );
jQuery(“tfoot input”).focus( function () {
if ( this.className == “search_init” )
{
this.className = “”;
this.value = “”;
}
} );
jQuery(“tfoot input”).blur( function (i) {
if ( this.value == “” )
{
this.className = “search_init”;
this.value = asInitVals[jQuery("tfoot input").index(this)];
}
} );
} );
</script>
<%– Css style –%>
<style>
div.dataTables_paginate span.paginate_button {
background-color:#DDDDDD;
}
div.dataTables_paginate span.paginate_button, .example_alt_pagination div.dataTables_paginate span.paginate_active {
-moz-border-radius-bottomleft:5px;
-moz-border-radius-bottomright:5px;
-moz-border-radius-topleft:5px;
-moz-border-radius-topright:5px;
border:1px solid #AAAAAA;
cursor:pointer;
margin:0 3px;
padding:2px 5px;
}
.dataTables_paginate {
line-height:22px;
}
.dataTables_paginate {
text-align:left;
}
</style>
Output:
Customization:
You can change the pagination style by changing this line “sPaginationType”: “full_numbers”,
to
sPaginationType”: “two_button”
this two_button pagination is default pagination. it will be looking like this :
Output 1:
- Gnaniyar Zubair
