Hello.
I need to create a pager for my data in view and i have created it by using this tutorial : https://docs.microsoft.com/en-us/aspnet/core/data/ef-mvc/sort-filter-page?view=aspnetcore-2.0
and some changes to show page numbers.
But now my problem is :
My pages are too much and i want to show only 3 first pages number and 3 last pages number and between them show just ... .
Can some one help me in this problem?
My paginatedlist helper class :
using System; using System.Collections.Generic; using System.Linq; using System.Threading.Tasks; using Microsoft.EntityFrameworkCore; namespace Project.Helpers { public class PaginatedList<T> : List<T> { public int PageIndex { get; private set; } public int TotalPages { get; private set; } public PaginatedList(List<T> items,int count,int pageIndex,int pageSize) { PageIndex = pageIndex; TotalPages = (int)Math.Ceiling(count / (double)pageSize); this.AddRange(items); } public bool HasPreviousPage { get { return (PageIndex > 1); } } public bool HasNextPage { get { return (PageIndex < TotalPages); } } public static async Task<PaginatedList<T>> CreateAsync(IQueryable<T> source,int pageIndex,int pageSize) { var count = await source.CountAsync(); var items = await source.Skip((pageIndex - 1 ) * pageSize).Take(pageSize).ToListAsync(); return new PaginatedList<T>(items,count,pageIndex,pageSize); } } }
My action method in controller :
public async Task<IActionResult> Index(int? id) { ViewBag.Title = "Home Page"; var page = id ?? 1; var pageSize = 12; var items = ipss.GetProducts(); //Get products as IQueryable var pagedPosts = await PaginatedList<Product>.CreateAsync(items.AsNoTracking(), page, pageSize); return View(pagedPosts); }
and finally my Index.cshtml :
<nav aria-label="Page navigation" class="center-align"><ul class="pagination"><li class="@prevDisabled"> @if(!String.IsNullOrEmpty(prevDisabled)) {<a href="#!"><i class="ion-chevron-right"></i></a> } else {<a asp-action="Index" asp-route-id="@(Model.PageIndex - 1)" class="@prevDisabled"><i class="ion-chevron-right"></i></a> }</li> @for(int i = 1; i <= totalPages; i++) { @if(i == pageIndex) {<li class="active"><a asp-action="Index" asp-route-id="@i" class="disabled">@i</a></li> } else {<li><a asp-action="Index" asp-route-id="@i">@i</a></li> } }<li class="@nextDisabled"> @if(!String.IsNullOrEmpty(nextDisabled)) {<a href="#!" class="@nextDisabled"><i class="ion-chevron-left"></i></a> } else {<a asp-action="Index" asp-route-id="@(Model.PageIndex + 1)" class="@nextDisabled"><i class="ion-chevron-left"></i></a> }</li></ul></nav>