Below is the fully functional pagination which uses this jQuery Pagination Plugin .I have provided some nice pagination css which can be further modified to fulfil the requirement.
Below is screen shot of jquery pagination css :
How to use it :
1) Extract the rar.
2) Run index.html.
3) Check pagination.css for the css you liked.
4) index.html contains below jQuery code to initialize the pagination:
Below code demonstrate how to initialize the jQuery pagination and set pagination options.Also it explains how to handle page select event to do some ajax stuff.
//function will be called when any page is selected.perform some ajax and load the contents in div.
function pageselectCallback(page_index, jq){
//below if is only for demo purpose.
if(page_index ==6 ){
return;
}
alert("Perform some ajax stuff for page number :"+(page_index+1));
return false;
}
$(document).ready(function(){
//set properties of pagination.
var totalEntries = 500;
var options = {
items_per_page:10,
num_display_entries:6,
current_page:6,
num_edge_entries:2,
link_to:"#",
prev_text:"Prev",
next_text:"Next",
ellipse_text:"...",
prev_show_always:true,
next_show_always:true,
callback:pageselectCallback
};
//provide pagination functionality inside specified pagination div.
$("#Pagination").pagination(totalEntries, options);
$("#bootstrap_pagination").pagination(totalEntries, options);
$("#grey_pagination").pagination(totalEntries, options);
$("#orange_pagination").pagination(totalEntries, options);
$("#pagination_1").pagination(totalEntries, options);
});
5)Pagination.js is the pagination plug-in which take care of pagination functionality.
If you find this post useful please share and leave a comment below, thanks! :)
