Reset total pages in jquery pagination plugin

Question

I am using TwbsPagination plug in for displaying paging in my app. It is working fine when we set the page size while initializing. However, based on the search result, I want to reset the total page count.

When I try using

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

it is not resetting the total pages displayed.

Answer 1

After analyzing the script code i get to know that this script uses .data() method to save view state of the pagination and i managed to do it explicitly.

.data(): Store arbitrary data associated with the matched elements or return the value at the named data store for the first element in the set of matched elements. ref: http://api.jquery.com/data/

Solution to reset pagination.

you just need to call before your "list rendering" OR "data binding" funciion / method

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

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

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

and this will reset view state data of the pagination. ("twbs-pagination" is the view state key).

Answer 2

You can make use of destroy. See here.

So:

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

Then reinitialize it:

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

Fiddle

Answer 3

Ah, I managed to get this work in a different way. Since I am using this in conjunction with JQGrid, I picked loadComplete event to patch my code. Here goes the steps:

1.Create a DIV to hold the paging buttons (of twbs control)

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

2.Crated a local js variable to hold current page

var currentPage=1;

3.Update page number before AJAX of JQgrid

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

4.Rebuild the pagination control on loadComplete. When user clicks on a page, I am updating the page number (currentPage) and reloading the grid.

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 4

destroy method not worked for me(1.4.1), by look into the source code i find that there are 2 key point to make it re-instantiate correctly.

1. pagination.data('twbs-pagination.js',null);
2. the instantiate parameter startPage must be int type not String type

above shows part of my code, hope it helps you:

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

Answer 5

Read the twbs-pagination source code

here tells why you failed to reset total page :

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

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

Viewstate param twbs-pagination exists, so you cannot re-render.

here is the solution to delete 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;
    },

So you can call destroy method @Robin Carlo Catacutan

OR manually execute inner method @Vipin Kohli