Search code examples
asp.netasp.net-mvcpagedlist

Issue with pagination in PagedList MVC

I am using MVC PagedList to handle pagination in my project. Everything works fine except that in my controller I have to initialize pageNumber parameter with "1" (Default page number). The problem is the blue activated button on page 1 that remains there no matter which page button link you click. Moreover this button is also missing the actionLink.

One last thing I am integrating my search with pagination as you can see in the controller code.

Paged List

public PartialViewResult List_Items(string keyword, int? page)
{
    var newlists = from s in db.TrMs
                   orderby s.S1
                   select s;

    int pageNumber = (page ?? 1);
    int pageSize = 10;
    var data = newlists.Where(f => f.S1.ToString().Contains(keyword) && f.S100 == vt).ToPagedList(pageNumber, pageSize);
    return PartialView(data);
}

Here is the generated Html for PagedList in my view

<div class="pagination-container">
    <ul class="pagination">
        <li class="active">
            <a>1</a>
        </li>
        <li>
            <a data-ajax="true" data-ajax-method="GET" data-ajax-mode="replace" data-ajax-update="#searchResult" href="/TrM/Search_Items?keyword=&amp;page=2">2</a>
        </li>
        <li>
            <a data-ajax="true" data-ajax-method="GET" data-ajax-mode="replace" data-ajax-update="#searchResult" href="/TrM/Search_Items?keyword=&amp;page=3">3</a>
        </li>
        <li>
            <a data-ajax="true" data-ajax-method="GET" data-ajax-mode="replace" data-ajax-update="#searchResult" href="/TrM/Search_Items?keyword=&amp;page=4">4</a>
        </li>
        <li class="PagedList-skipToNext">
            <a data-ajax="true" data-ajax-method="GET" data-ajax-mode="replace" data-ajax-update="#searchResult" href="/TrM/Search_Items?keyword=&amp;page=2" rel="next">»</a>
        </li>
    </ul>
</div>

Here is how I am using the pagination helper.

Page @(Model.PageCount < Model.PageNumber ? 0 : Model.PageNumber) of @Model.PageCount
@Html.PagedListPager(Model, page => Url.Action("List_Items", "TrM", new {keyword="", page }), PagedListRenderOptions.EnableUnobtrusiveAjaxReplacing(new AjaxOptions() { HttpMethod = "GET", UpdateTargetId = "searchResult" }))
Solution

  • Your paging controls are most likely outside of the searchResult container. When you click on a page you're replacing the table but not the paging controls. Move your paging controls inside of your searchResult container!

    Hope this helps.