jqPagination - How do you specify the number of records per page?

Question

I've recently been toying around with jqPagination, which is a jQuery plugin for pagination. It's a really neat plugin and I love how you can type in the page number. However, I'm having some difficulty because there isn't much documentation on it. Although this is probably a simple question, I was just curious as to if there was a way to specify how many records would be displayed per page. I currently have pagination working for one record per page, and that's controlled by jQuery selectors. I'd like to be able to specify how many numbers, however.

It might be simpler to show some of the code that I have. I actually used a previous stack overflow question as a basis:

<div id="container">
    <div id="div1">Any elements</div>
    <div id="div2">Any elements</div>
    <div id="div3">Any elements</div>
    ... and so on
</div>

And for the jQuery:

//Hide 
$("#container").children().not('#firstDiv').hide();

$('.pagination').jqPagination( {
    max_page    : $('#container').children().length,
    paged        : function(page) {

        //hide the other divs
        $('#container').children().hide();

        //show the divs on the specified page
        $($('#container').children()[page - 1]).show();

So the code above will only display one div at a time, I would like to specify how many elements/divs it can show.

Oh, and as a follow up question, is it possible to specify a certain div to appear on a certain page, e.g. having the footer only appear on the last page?

Update: Completed

With the help of the creator I was able to figure it out. I'm posting my solution below in case in could help anyone else out in the future. I'm having the user select the number of records per page in an XML file (didn't include XML selector). If there are less records per page than there are total, it'll display the pagination. I'm sure there's a more efficient way, but I'm happy with what I have. Here's the code below:

/*---------------------------------------------------------------------------
Place this anywhere in your script.
Automatically hide pagination. 
If there are less scenes per page than the total amount, then include pagination.
----------------------------------------------------------------------------*/
$(".pagination").hide();
var recordsPerPage = 5
var totalNumRecords = 20;

if (recordsPerPage < totalNumRecords) {
     pagination(recordsPerPage, totalNumRecords);
}



//recordsPerPage is the number of items you want to display on each page
//totalNumRecords is the total number of items that you have

function pagination(recordsPerPage, totalNumRecords){
    //Show the pagination controls
    $(".pagination").show();

    //loop through all of the divs and hide them by default.
    for (var i=1; i <= totalNumRecords; i++) {
        $("#container").find("#div" + i).hide();
    }

    //then only display the number of divs the user dictated
    for (var i = 1; i <= recordsPerPage; i++) {
        $("#container").find("#div" + i).show();
    }

    //maxPages is the maximum amount of pages needed for pagination. (round up) 
    var maxPages = Math.ceil(totalNumRecords/recordsPerPage);   

    $('.pagination').jqPagination({
        link_string : '/?page={page_number}',
        max_page     : maxPages,
        paged        : function(page) { 

            //a new page has been requested

            //loop through all of the divs and hide them all.
            for (var i=1; i <= totalNumRecords; i++) {
                $("#container").find("#div" + i).hide();
            }

            //Find the range of the records for the page: 
            var recordsFrom = recordsPerPage * (page-1) + 1;
            var recordsTo = recordsPerPage * (page);

            //then display only the records on the specified page
            for (var i = recordsFrom; i <= recordsTo; i++) {
                $("#container").find("#div" + i).show();
            }      

            //scroll to the top of the page if the page is changed
            $("html, body").animate({ scrollTop: 0 }, "slow");
        }
    });
}

Thanks Ben!

Answer 1

Could you have a range of div elements of which are your pages, and within those elements just display as many records as you desire? That way you can simply show / hide each page div using the plugin.

That's probably what I'd do in that situation.