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.

such a good question..... – Navid_pdp11 May 09 '16 at 13:39 — Navid_pdp11, May 09 '16 at 13:39

score 18 · Answer 1 · edited Nov 29 '18 at 22:12

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).

saving life in 2017. YAY – Kimberlee Ho Jun 08 '17 at 12:03 — Kimberlee Ho, Jun 08 '17 at 12:03

Robin Carlo Catacutan · Answer 2 · 2016-08-04T16:35:23.647

6

You can make use of destroy. See here.

So:

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

Then reinitialize it:

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

Fiddle

edited Aug 04 '16 at 16:35

answered Aug 04 '16 at 16:24

Robin Carlo Catacutan

13,249
11
52
85

If you have a onPageClick implemented then this is a really bad idea. It will cause an infinite loop. I did a search in the onPageClick and it sent a flood of requests to my backend. So dont use destroy. There are other options. – Martijn Hiemstra Sep 30 '20 at 20:44

score 3 · Accepted Answer · answered Sep 18 '14 at 08:11

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

masonshu · Answer 4 · 2017-09-11T05:59:01.453

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

score 0 · Answer 5 · answered Mar 25 '18 at 00:30

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.

pagination.data('twbs-pagination.js',null);
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);
                            }
                        }
                    );
                }

score 0 · Answer 6 · answered Feb 22 '22 at 19:56

$('#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>

Reset total pages in jquery pagination plugin

6 Answers6

Linked