Simple Pagination Using JavaScript – Simple Pagination JS Example Code

Simple pagination is a java-script library with which we can achieve pagination to be handled on front end itself. No need to send the request again and again on the server. No need to maintain form fields to send filter data again to the server. Its quite simple as its name is.

Plugin is – jquery.simplePagination.js

JS Need to Include (Click To Download)

• Simple Pagination JS
• Jquery

HTML Code

<table>
	<tr>
		<td>Simple</td>
		<td>Pagination</td>
	</tr>
	<tr>
		<td>Simple</td>
		<td>Pagination</td>
	</tr>
	<tr>
		<td>Simple</td>
		<td>Pagination</td>
	</tr>
	<tr>
		<td>Simple</td>
		<td>Pagination</td>
	</tr>
</table>

<div class="pagination">
</div>

JS Code to Handle Pagination

$( document ).ready(function() {	
	var items = $("table tr");
	var numItems = items.length;
	var perPage = 2;
	items.slice(perPage).hide();
	if(numItems != 0){
		$(".pagination").pagination({
			items: numItems,
			itemsOnPage: perPage,
			cssStyle: "light-theme",
			onPageClick: function(pageNumber) { 
				var showFrom = perPage * (pageNumber - 1);
				var showTo = showFrom + perPage;
				items.hide().slice(showFrom, showTo).show();
			}
		});
	}
});

For more Click Here