Question

我正在使用TwbsPagination插件在我的应用中显示分页。我们在初始化时设置页面大小时工作正常。但是，根据搜索结果，我想重置总页数。

当我尝试使用

时

$('#pagination').twbsPagination({totalPages:10});

它没有重置显示的总页数。

Answer 1

在分析了脚本代码之后，我知道这个脚本使用 .data（）方法来保存分页的视图状态，并且我设法明确地执行了此操作。

.data（）：存储与匹配元素关联的任意数据，或者在指定数据存储中返回匹配元素集中第一个元素的值。参考：http://api.jquery.com/data/

重置分页的解决方案。

你只需要在你的＆＃34;列表渲染之前调用＆＃34; OR＆＃34;数据绑定＆＃34;功能/方法

<强> $（＆＃39;＃分页＆＃39）空（）;

$（＆＃39; #pagination＆＃39;）。removeData（＆＃34; twbs-pagination＆＃34;）;

<强> $（＆＃39;＃分页＆＃39）。解除绑定（＆＃34;页面＆＃34）;

这将重置分页的视图状态数据。（＆＃34; twbs-pagination＆＃34;是视图状态键）。

Answer 2

啊，我设法以不同的方式完成这项工作。由于我将此与JQGrid结合使用，因此我选择了loadComplete事件来修补我的代码。以下是步骤：

1.创建DIV以保持分页按钮（twbs控制）

<div id="paginationholder"></div>

2.创建一个本地js变量来保存当前页面

var currentPage=1;

3.在JQgrid的AJAX之前更新页码

beforeRequest: function () {
    var postData = grid.jqGrid('getGridParam', "postData");
    postData.page = currentPage;
    postData.rows = $("#rows").val();
}

4.在loadComplete上重建分页控件。当用户点击页面时，我正在更新页码（currentPage）并重新加载网格。

loadComplete: function (data) {
    $('#paginationholder').html('');
    $('#paginationholder').html('<ul id="pagination" class="pagination-sm"></ul>');
    $('#pagination').twbsPagination({
        startPage: data.page,
        totalPages: data.total,
        visiblePages: 5,
        onPageClick: function (event, page) {
            currentPage = page;
            grid.trigger('reloadGrid');
        }
    });
}

Answer 3

您可以使用destroy。请参阅here。

所以：

$('#pagination').twbsPagination('destroy');

然后重新初始化它：

$('#pagination').twbsPagination({totalPages:5});

Fiddle

Answer 4

阅读 twbs-pagination源代码

here说明您无法重置总页数的原因：

    var data = $this.data('twbs-pagination');

    if (!data) $this.data('twbs-pagination', (data = new TwbsPagination(this, options) ));

Viewstate param twbs-pagination存在，因此您无法重新渲染。

here是删除viewstate的解决方案：

TwbsPagination.prototype = {

    destroy: function () {
        this.$element.empty();//remove child nodes
        this.$element.removeData('twbs-pagination');//remove viewstate
        this.$element.off('page');//unbind $(this) node from page
        return this;
    },

所以你可以打电话给destroy方法@Robin Carlo Catacutan

OR 手动执行内部方法@Vipin Kohli

Answer 5

破坏方法对我不起作用（1.4.1），通过查看源代码，我发现有两个关键点可以使它重新实例化。

pagination.data（＆＃39;拼焊板-pagination.js＆＃39;，NULL）;
实例化参数startPage必须是int类型而不是String类型

显示了我的部分代码，希望它对您有所帮助：

$('.unstyled > li >a').on('click', function (e) {
            e.preventDefault();
            pagination.data('twbs-pagination.js',null);
            loadPage(1,$(e.target).attr('categoryId'));
        });

function initilizePagination(totalPages,currentPage,blogCategory){
                pagination.twbsPagination({
                    initiateStartPageClick: false, 
                    totalPages: totalPages,
                    startPage: currentPage,
                    onPageClick: function (event, page) {
                        loadPage(page, blogCategory);
                    }
                });
                pagination.twbsPagination({render:currentPage});
            }

function loadPage(page,blogCategory) {
                    $.ajax("url",
                        {
                            method: "get",
                            success: function (data) {
                                $("#blogListWrapper").html(data);
                                var ajaxPageCount = $('#ajaxPageCount').val();
                                var ajaxPageNo = parseInt($('#ajaxPageNo').val());
                             initilizePagination(ajaxPageCount,ajaxPageNo,blogCategory);
                            }
                        }
                    );
                }

重置jquery分页插件中的总页数

5 个答案: