dominic-tancredi.com

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:

1
2
3
4
5
6
    $(document).ready(function(){

    $.globalVars = {}

    $.globalVars.num_entries = 0;

    $.globalVars.items_per_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):

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
    $.ajax({

        url: 'snippet.html',

    type: 'GET',

    dataType: 'html',

    timeout: 1000,

    error: function(){

    alert('Error loading data');

    },

    success: function(html){

    $('#hiddenresult').html(html);



    $.globalVars.num_entries = $('#hiddenresult div.result').length;

    // Create pagination element

    //alert(num_entries);

    $("#Pagination").pagination($.globalVars.num_entries, {

        num_edge_entries: 2,

        num_display_entries: 1,

        callback: pageselectCallback,

            items_per_page:$.globalVars.items_per_page

    });

    }

    });

});

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
function pageselectCallback(page_index, jq){

    var start_splice = $.globalVars.items_per_page * page_index;

    var end_splice = start_splice+$.globalVars.items_per_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();



    $('#Searchresult').empty().append(new_content);

    return false;

}

You can see the demo here

Happy Coding!

FTD