Question

I have an asp.net-MVC project and I have implemented a paging mechanism using this plugin.

On the first page I have products and a pager that calls a controller method returning the next page of products. This all works fine. The problem is, that I also have an option to update the products via buttons on that same page. In case I update the products with a button and NOT with the pager links the products are updated, but the pager plugin is not.

I need to manually update the pager and change the max_page number and the “null” in the updateRecentBooks to another value when the page is updated when not using the pagination plugin.

$().ready(function () { 
 $('.pagination').jqPagination({
        max_page: @Model.NumberOfPages,
        paged: function(page) {
            updateRecentBooks(page, null);
        }
    });
});

 $("#button").live("click", function () {
        ...
        // Calls the updateRecentBooks with the proper value

        updateRecentBooks(1, properValue);

    });

After the click event happens, the NumberOfPages attribute is updated and I need the pager to be updated to reflect the changes and look like this:

 $('.pagination').jqPagination({
        max_page: @Model.NumberOfPages, // Now contains new values.
        paged: function(page) {
            updateRecentBooks(page, propervalue); // Now contains proper value.
        }
    });

How should I go about solving this problem? Thanks for all the help.

Answer 1

Solved the problem by moving the pagination controls inside the panel I was updating with ajax. This way the pagination control gets rebinded with new values every time I update the partial view.