jquery - jqPagination - 如何指定每页的记录数？

Question

我最近一直在摆弄 jqPagination ，这是一个用于分页的 jQuery 插件。这是一个非常简洁的插件，我喜欢你如何输入页码。但是，我遇到了一些困难，因为没有太多相关文档。虽然这可能是一个简单的问题，但我只是好奇是否有一种方法可以指定每页显示多少条记录。目前，我对每页一条记录进行分页，这是由 jQuery 选择器控制的。不过，我希望能够指定有多少个数字。

显示我拥有的一些代码可能会更简单。我实际上使用了之前的堆栈溢出question作为基础:

<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>

对于 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();

所以上面的代码一次只会显示一个div，我想指定它可以显示多少个元素/div。

哦，作为一个后续问题，是否可以指定某个 div 出现在某个页面上，例如页脚只出现在最后一页吗？

更新:已完成

在创建者的帮助下，我终于弄清楚了。我在下面发布我的解决方案，以防将来可以帮助其他人。我让用户选择 XML 文件中每页的记录数(不包括 XML 选择器)。如果每页的记录数少于总记录数，则会显示分页。我确信有一种更有效的方法，但我对我所拥有的感到满意。下面是代码:

/*---------------------------------------------------------------------------
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");
        }
    });
}

谢谢本!

Answer 1

您是否可以拥有一系列 div 元素(其中包含您的页面)，并且在这些元素中仅显示您想要的任意数量的记录？这样您就可以使用插件简单地显示/隐藏每个页面div。

在那种情况下我可能会这么做。