Question

我正在使用SimplePagination jquery插件 - http://flaviusmatis.github.io/simplePagination.js/ 我能够通过这些项目成功地启动插件和分页。但我试图添加一个传说说：＆＃34;显示20条记录中的1-10条和＃34;除了＆＃39; prev＆＃39;和＆＃39; next＆＃39;按钮，像这样：

Showing 1-10 of 20 << Prev 1 2 3 Next >>

有什么办法可以使用simplePagination插件添加这个图例吗？谢谢！

Answer 1

你可以这样做，但如果你真的希望这个工作，你应该选择一个不同的插件。基本上，你必须：

存储原始记录数
使用插件
使用getCurrentPage（）结合您使用的每页项目数和原始＃或记录来创建文本，以确定您正在显示哪些记录（例如，如果您在第2页，则有20个每页的项目，你有60个项目，你的文字将“显示20-40的60”）
使用您的文本将html字符串添加到页面控件的容器中。
创建分页器时，添加一个更新文本的onPageClick回调。

Answer 2

因为你的分页插件清理父元素并在每次用户切换页面时呈现它，我的解决方案并不优雅，但是正常工作。

JSFiddle

顺便说一下。我没有在CDN上找到你的插件，因此插件的代码包含在javascript JSFiddle框架的开头（请滚动到底部以查看我的代码）。

<强> HTML：

<div id="pagination-container"></div>

<强> CSS：

.pagination-addon {
    width: auto;
    height: 26px;
    line-height: 26px;
    padding-right: 16px;
    float: left;
}

.pagination-addon div {
    display: inline-block;
}

<强> JS：

$(document).ready(function (){

    $('#pagination-container').pagination({

        items: 40,
        itemsOnPage: 10,
        //here You can set Your label title
        labelText: 'Showing',
        onInit: function (){

            var startItem = ((this.currentPage*this.itemsOnPage)+1);
            var endItem = ((startItem-1)+this.itemsOnPage);

            if(endItem > this.items){

                endItem = this.items;
            }

            $('#pagination-container').prepend('<div class="pagination-addon">'+
            '<div class="pagination-label">'+this.labelText+'</div> '+
            '<div class="pagination-start-item">'+startItem+'</div> - '+
            '<div class="pagination-end-item">'+endItem+'</div> of '+
            '<div class="pagination-total-items">'+this.items+'</div></div>');
        },
        onPageClick: function (){

            this.onInit();
        }
    });
});

如何使用simplePagination jquery插件为分页添加“显示1-10（20）”

2 个答案: