Nonfactors mvcgrid paging server side problems

Question

Sorry for my bad English .I've just started using NonFactors.Grid.Mvc6 -Version 7.2.0 server side pagination. Here is my code in index.cshtml

 .Pageable(pager =>
 {
     pager.PageSizes = new Dictionary<Int32, String> { { 10, "10" }, { 20, "20" }, { 50, "50" }, { 100, "100" } };
     pager.ShowPageSizes = true;
     pager.PagesToDisplay = Model.TotalPages;
     pager.CurrentPage = Model.Page;
     pager.RowsPerPage = Model.PageSize;
     pager.TotalRows = Model.TotalItems;
 })
 .Sortable()

Here is my paging model:

public class PagingModel<T>
{
    public int Page { get; set; }
    public int PageSize { get; set; }
    public int TotalItems { get; set; }
    public List<T> Items { get; set; }

    public int TotalPages => (int)Math.Ceiling((double)TotalItems / PageSize);
}

I put some code in this Post

1: Nonfactors mvcgrid paging problems to _Grid.cshtml:

 @if (Model.Pager != null)
 {
     Model.Pager.TotalRows = Model.Pager.PagesToDisplay * Model.Pager.RowsPerPage;

     @await Html.PartialAsync(Model.Pager.PartialViewName, Model.Pager)
 }

And this is my result:

I want to show only 3 page. When i go to page 3, other page 4, 5, 6 is display in pager like this

I will be grateful for any help you can provide. the documentation is pretty poor

Answer 1

Inside your .Pageable method, set the number pages to display to 3 instead of total. TotalRows and TotalItems keep reflecting the actual total. The reason for this is that you should both work with the number of pages that actually exist in your grid (TotalRows and TotalItems) as well as with the number thereof you want to display (PagesToDisplay). Note that TotalRows is not about visual rows, but about rows of data like in a database, which kind of means number of items (in the data, not in the visualization thereof).

.Pageable(pager =>
{
    pager.PageSizes = new Dictionary<Int32, String> { { 10, "10" }, { 20, "20" }, { 50, "50" }, { 100, "100" } };
    pager.ShowPageSizes = true;
    pager.PagesToDisplay = 3; // Only affects the display of page numbers in the UI
    pager.CurrentPage = Model.Page;
    pager.RowsPerPage = Model.PageSize;
    pager.TotalRows = Model.TotalItems; // Set this to the actual total number of items in your dataset
})
.Sortable()

In your _Grid.cshtml file, you need to add the forward and backward buttons. Something like this:

@if (Model.Pager != null)
{
    <div class="grid-pagination">
        <!-- Previous Button -->
        @if (Model.Pager.CurrentPage > 1)
        {
            <a href="@Url.Action("YourAction", new { page = Model.Pager.CurrentPage - 1 })" class="btn-previous">Previous</a>
        }

        <!-- Pagination Numbers (Keep your existing code here) -->
        @await Html.PartialAsync(Model.Pager.PartialViewName, Model.Pager)

        <!-- Next Button -->
        @if (Model.Pager.CurrentPage < Model.Pager.TotalPages)
        {
            <a href="@Url.Action("YourAction", new { page = Model.Pager.CurrentPage + 1 })" class="btn-next">Next</a>
        }
    </div>
}