Krishna Sarma Krishna Sarma - 3 months ago 52
jQuery Question

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.

Answer

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