Remember page size in bootstrap table

Question

I use standard pagination in Bootstrap table. I want to remember in cookie page size value selected by user.

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');
    }
});

How can I detect page size changing to save in cookie this value?

score 2 · Answer 1 · answered Nov 18 '15 at 04:42

2

In order to solve this you have to use the Cookie extension that is supported by Bootstrap table plugin. Please see this: https://github.com/wenzhixin/bootstrap-table/tree/master/src/extensions/cookie and this example: http://issues.wenzhixin.net.cn/bootstrap-table/#extensions/cookie.html

answered Nov 18 '15 at 04:42

Dennis Hernández

122
4

Example can now be found on https://examples.bootstrap-table.com/#extensions/cookie.html – Anders Wendt Nov 16 '21 at 17:13

score 1 · Accepted Answer · edited Aug 17 '22 at 07:31

You can override onPreBody and onPageChange method for check if pageSize is changed and set it from cookie before post to server.

There is code

    var CookieName = "ShipmentsInSessionTablePageSize";

    $('#table').bootstrapTable({

        onPreBody: function(data) {

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

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

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

Rudie Visser · Answer 3 · 2015-11-13T14:18:05.477

0

Use jQuery to get the page-size:

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

Save the value in a cookie using the jquery-cookie plugin:

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

Retrieve it:

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

And set the table size after retrieving:

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

edited Nov 13 '15 at 14:18

answered Nov 13 '15 at 13:50

Rudie Visser

570
6
23

score 0 · Answer 4 · answered Nov 13 '15 at 14:13

You have to detect the click in size dropdown located under table to get the size selected by the user and save it in cookies using Jquery-cookies or js-cookie.

Detect user choice Example.

This is example using 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);
});

Hope this helps.

Remember page size in bootstrap table

4 Answers4