add pagination to html page using JQuery

Thu Jan 10, 2013 6:23 pm

Adding pagination to table with JQuery - show paging under table or any html content
javascript code

<html>
<head>
<title>Add paging to table</title>
 
<!--
 <script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js">
</script>
 Note you can download the JQuery package instead of using Google version. --> 
<script src="jquery-1.8.3.js"></script>
 <script type='text/javascript' src='jquery-latest.js'></script>
<script type='text/javascript' src='jquery.tablesorter.js'></script>
<script type='text/javascript' src='jquery.tablesorter.pager.js'></script>
  <script>
    $(document).ready(function() { 
 
   
    $("#tablePage") 
    .tablesorter({widthFixed: false}) 
    .tablesorterPager({container: $("#pager")}); 
}); 
     
</script>


</head>
<body>
	<table  id="tablePage"   border="1px"> 
<thead> 
<tr> 
    <th>ID</th> 
    <th>Student Name</th> 
    <th>Department</th> 
    <th>Class</th> 
    <th>GPA</th> 
</tr> 
</thead> 
<tbody> 
<tr> 
    <td>323</td> 
    <td>Smith</td> 
    <td>Computer Science</td> 
    <td>C1</td> 
    <td>3.4</td> 
</tr> 
<tr> 
    <td>345</td> 
    <td>Johan</td> 
    <td>Computer Science</td> 
    <td>A1</td> 
    <td>2.7</td> 
</tr> 
<tr> 
    <td>21</td> 
    <td>Ali</td> 
    <td>Electric Engineering</td> 
    <td>EE4</td> 
    <td>3.0</td> 
</tr> 
<tr> 
    <td>33</td> 
    <td>Tonson</td> 
    <td>Electric Engineering</td> 
    <td>EE4</td> 
    <td>3.2</td> 
</tr> 
<tr> 
    <td>323</td> 
    <td>Smith</td> 
    <td>Computer Science</td> 
    <td>C1</td> 
    <td>3.4</td> 
</tr> 
<tr> 
    <td>345</td> 
    <td>Johan</td> 
    <td>Computer Science</td> 
    <td>A1</td> 
    <td>2.7</td> 
</tr> 
<tr> 
    <td>21</td> 
    <td>Ali</td> 
    <td>Electric Engineering</td> 
    <td>EE4</td> 
    <td>3.0</td> 
</tr> 
<tr> 
    <td>33</td> 
    <td>Tonson</td> 
    <td>Electric Engineering</td> 
    <td>EE4</td> 
    <td>3.2</td> 
</tr> 
<tr> 
    <td>323</td> 
    <td>Smith</td> 
    <td>Computer Science</td> 
    <td>C1</td> 
    <td>3.4</td> 
</tr> 
<tr> 
    <td>345</td> 
    <td>Johan</td> 
    <td>Computer Science</td> 
    <td>A1</td> 
    <td>2.7</td> 
</tr> 
<tr> 
    <td>21</td> 
    <td>Ali</td> 
    <td>Electric Engineering</td> 
    <td>EE4</td> 
    <td>3.0</td> 
</tr> 
<tr> 
    <td>33</td> 
    <td>Tonson</td> 
    <td>Electric Engineering</td> 
    <td>EE4</td> 
    <td>3.2</td> 
</tr> 
<tr> 
    <td>323</td> 
    <td>Smith</td> 
    <td>Computer Science</td> 
    <td>C1</td> 
    <td>3.4</td> 
</tr> 
<tr> 
    <td>345</td> 
    <td>Johan</td> 
    <td>Computer Science</td> 
    <td>A1</td> 
    <td>2.7</td> 
</tr> 
<tr> 
    <td>21</td> 
    <td>Ali</td> 
    <td>Electric Engineering</td> 
    <td>EE4</td> 
    <td>3.0</td> 
</tr> 
<tr> 
    <td>33</td> 
    <td>Tonson</td> 
    <td>Electric Engineering</td> 
    <td>EE4</td> 
    <td>3.2</td> 
</tr> 
</tbody> 
</table> 
<div id="pager" class="pager">
	<form>
	<table>
	<tr>
		<td><div class="first"/><b>First</b></div></td>
		<td>|</td>
		<td><div   class="prev"/><b>Prev</b></div></td>
		<td>|</td>
		<td><input type="text" class="pagedisplay"/></td>
		<td>|</td>
		<td><div class="next" ><b>Next</b></div></td>
		 <td>|</td>
		<td><div class="last" ><b>Last</b></div></td>
		 <td>|</td>
		<td>Number Of Rows:<select class="pagesize">
			<option selected="selected"  value="5">5</option>
			<option value="10">10</option>
			<option value="15">15</option>
			<option  value="20">20</option>
		</select></td>
		</tr>
		</table>
	</form>
</div>
  
</body>

</html>

To run this code you will need jquery.tablesorter.pager.js:
javascript code

<script type='text/javascript' src='jquery.tablesorter.pager.js'></script>

Download it from here :

jquery.tablesorter.pager.js: (3.98 KiB) Downloaded 3920 times

Or you can get them from original web page :

Code:: http://tablesorter.com

Topic below contains information about
jquery-examples/sort-html-table-from-jquery-t10729.html

add pagination to html page using JQuery

add pagination to html page using JQuery

Topic Tags