16

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

当我尝试使用

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

它不会重置显示的总页数。

4

6 回答 6

18

在分析了脚本代码后，我了解到该脚本使用.data()方法来保存分页的视图状态，并且我设法明确地做到了这一点。

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

重置分页的解决方案。

您只需要在“列表渲染”或“数据绑定”功能/方法之前调用

$('#pagination').empty();

$('#pagination').removeData("twbs-pagination");

$('#pagination').unbind("page");

这将重置分页的视图状态数据。（“twbs-pagination”是视图状态键）。

于 2014-08-04T10:53:10.697 回答
6

你可以利用destroy. 见这里。

所以：

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

然后重新初始化它：

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

小提琴

于 2016-08-04T16:24:57.110 回答
3

啊，我设法以不同的方式完成了这项工作。由于我将它与 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');
        }
    });
}
于 2014-09-18T08:11:20.377 回答
0

阅读 twbs-pagination 源码

这里告诉你为什么你没有重置总页数：

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

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

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

这是删除视图状态的解决方案：

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

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

于 2017-09-11T04:27:52.077 回答
0

destroy 方法对我不起作用（1.4.1），通过查看源代码，我发现有 2 个关键点可以使其正确重新实例化。

  1. pagination.data('twbs-pagination.js',null);
  2. 实例化参数 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);
                            }
                        }
                    );
                }
于 2018-03-25T00:30:19.513 回答
0 
$('#pagination').twbsPagination('destroy');
$('#pagination').remove();
$('.col-parent-pagination').html('<div id="pagination" class="d-inline-block"></div>');


<div class="row m-0">
    <div class="col-12 col-parent-pagination">
       <div id="pagination" class="d-inline-block"></div>
    </div>
</div>
于 2022-02-22T19:56:08.417 回答