记住 bootstrap table 中的页面大小

Question

我在 Bootstrap table 中使用标准分页。我想在 cookie 中记住用户选择的页面大小值。

HTML:

<table id="users-table" class="table table-striped table-condensed" 
   data-toggle="table"
   data-url="/data.json"
   data-side-pagination="server"
   data-pagination="true"
   data-page-size="25">
...
</table>

Javascript:

$('#users-table').bootstrapTable({
    onLoadError: function (status) {
        SetErrorMessage('error');
    }
});

如何检测页面大小的变化以将此值保存在 cookie 中？

Answer 1

使用jQuery获取页面大小：

var pagesize = $('#users-table').data('page-size');

使用 jquery-cookie 插件将值保存在 cookie 中：

$.cookie('size', pagesize, {
      expires: 30 //Expires in 30 days
});

检索：

var cookie = $.cookie('size');

并在检索后设置table尺寸：

$('#users-table').data('page-size', cookie);

Answer 2

您必须检测位于 table 下尺寸 dropdown 的点击，以获取用户选择的尺寸并使用 Jquery-cookies or js-cookie[将其保存在 cookie 中=25=].

Detect user choice Example.

这是使用 js-cookie 的示例：

var page_size = 25; //Default size //If cookie page_size exist if( Cookies.get('page_size') != null ) { page_size = Cookies.get('page_size'); $('#inpost-users-table').data('page-size', page_size); //set page size } //When user choose new size $(document).on('click', '.dropdown-menu', function() { var size_selected = $('.pagination-detail .page-size').text(); Cookies.set('page_size', size_selected); });

希望这对您有所帮助。

Answer 3

您可以覆盖 onPreBody 和 onPageChange 方法来检查 pageSize 是否已更改，并从 post 之前的 cookie 设置到服务器。

有代码

    var CookieName = "ShipmentsInSessionTablePageSize";

    $('#table').bootstrapTable({

        onPreBody: function(data) {

            var pageSizeCookie = $.cookie(CookieName);
            if (pageSizeCookie != null) {

                var pageSizeInt = parseInt(pageSizeCookie);
                this.pageSize = pageSizeInt;
            }
        },
        onPageChange: function (pageSize, pageNumber) {

            $.cookie(CookieName, pageSize, { expires: 30 });
        },
        ...

Answer 4

为了解决这个问题，您必须使用 Bootstrap table 插件支持的 Cookie 扩展。请看这个：https://github.com/wenzhixin/bootstrap-table/tree/master/src/extensions/cookie and this example: http://issues.wenzhixin.net.cn/bootstrap-table/#extensions/cookie.html

记住 bootstrap table 中的页面大小

Remember page size in bootstrap table

html

javascript

css

twitter-bootstrap

bootstrap-table