JQuery Pagination Plugin Update - Multiple Results

Made some adjustments to the jquery pagination plugin.

Originally, it display use one result per page, but doesn't display multiple results per page. It DOES adjust the pagination navigation which is nice. So I modified it.

First, I need a global vars object to be able to track the items per page and number of entries on the page. Ideally, these would be incorporated within the plugin itself_

    $.globalVars = {}
    $.globalVars.numentries = 0;
    $.globalVars.itemsper_page = 1; 


Second, when the document is ready, I want to be able to load any content, not just html, as in the demo (though, it is html since we're using their files):

        url_ 'snippet.html',
    type_ 'GET',
    dataType_ 'html',
    timeout_ 1000,
    error_ function(){
    alert('Error loading data');
    success_ function(html){

$.globalVars.num_entries = $('#hiddenresult div.result').length;
// Create pagination element
$("#Pagination").pagination($.globalVars.num_entries, {
    num_edge_entries_ 2,
    num_display_entries_ 1,
    callback_ pageselectCallback,


Last, I want to show multiple results, by replacing the eq: tag with splice_

function pageselectCallback(pageindex, jq){
    var startsplice = $.globalVars.itemsperpage * pageindex;
    var endsplice = startsplice+$.globalVars.itemsper_page;

if(page_index != 0 ) {
    start_splice += ($.globalVars.num_entries % $.globalVars.items_per_page);

if((end_splice > $.globalVars.num_entries) && ($.globalVars.num_entries > 1)) {
    end_splice = $.globalVars.num_entries;

var new_content = $('#hiddenresult div.result').slice(start_splice,end_splice).clone();

return false;


You can see the demo here

Happy Coding!


This article is my 39th oldest. It is 218 words long, and it’s got 12 comments for now.