In this article I will try to demonstrate, how can we implement paging in HTML table.
Grid control is the most popular control to show a list of data with inbuild features like paging or filters. But do you know that behind the scene grids uses HTML table format to render. Then how they show paging or other such features. Can we implement these features without using a Grid control? I will say yes. In this article I will show, how can we implement paging and search in HTML table. I am using DataTable plugin in my example. You can use any other plugin like bootstrap.
Let's start step by step. First of all let's see the plugins references which I am using in this example. Below are the plugin references I am using except bootstrap.css
Let's add css and jquery referennces to my page.
<head>
<link rel="stylesheet" type="text/css" href="CSS/bootstrap.css">
<link rel="stylesheet" type="text/css" href="CSS/dataTables.bootstrap.css">
<link rel="stylesheet" type="text/css" href="CSS/Style.css">
<script type="text/javascript" src="JS/jquery-1.10.2.min.js"></script>
<script type="text/javascript" src="JS/jquery.dataTables.js"></script>
<script type="text/javascript" src="JS/dataTables.bootstrap.js"></script>
</head>
Now it's time to add HTML. Below is my HTML.
<div class="body-content">
<h3>Paging in HTML table-Example</h3>
<hr />
<table id="tblContact" class="table table-striped table-bordered" cellspacing="0" style="width:100%;">
<thead>
<tr>
<th>S No</th>
<th>First Name</th>
<th>Last Name</th>
<th>Age</th>
<th>Country</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>Joe</td>
<td>Dean</td>
<td>36</td>
<td>United State</td>
</tr>
<tr>
<td>2</td>
<td>Tim</td>
<td>Pass</td>
<td>50</td>
<td>United State</td>
</tr>
<tr>
<td>3</td>
<td>Ajay</td>
<td>Yadav</td>
<td>23</td>
<td>India</td>
</tr>
<tr>
<td>4</td>
<td>Sonu</td>
<td>Bahel</td>
<td>20</td>
<td>India</td>
</tr>
<tr>
<td>5</td>
<td>Chang</td>
<td>Lee</td>
<td>50</td>
<td>China</td>
</tr>
<tr>
<td>6</td>
<td>Joe</td>
<td>Li</td>
<td>34</td>
<td>United State</td>
</tr>
<tr>
<td>7</td>
<td>Chang</td>
<td>Le</td>
<td>50</td>
<td>China</td>
</tr>
<tr>
<td>8</td>
<td>Rong</td>
<td>Lee</td>
<td>20</td>
<td>China</td>
</tr>
<tr>
<td>9</td>
<td>Mahesh</td>
<td>Kumar</td>
<td>28</td>
<td>India</td>
</tr>
<tr>
<td>10</td>
<td>Ajay</td>
<td>Bansal</td>
<td>54</td>
<td>India</td>
</tr>
</tbody>
</table>
</div>
I am almost done. After HTML code now let's add few lines of script to make my table functional.
<script type="text/javascript">
$(document).ready(function () {
$('#tblContact').dataTable({
"iDisplayLength": 5,
"lengthMenu": [5,10, 25, 50, 100]
});
});
</script>
And I am done. You will find a good looking table with features like paging and search. You can search any column of your choice. Hope this can help help. Use this code and try yourself.
