DataTable with Pagination , Search & Sorting

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

Tags: jQuery