'Reset total pages in jquery pagination plugin

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.

jqueryresetjquery-pagination


Solution 1:[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).

Solution 2:[2]

You can make use of destroy. See here.

So:

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

Then reinitialize it:

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

Fiddle

Solution 3:[3]

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

Solution 4:[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);
                            }
                        }
                    );
                }

Solution 5:[5]

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

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 user3071284
Solution 2
Solution 3
Solution 4 SalutonMondo
Solution 5 Mohsen_AB

Related Questions