c# - ASP.NET MVC - 如何限制分页元素的数量并在记录较多时使用 '...'(三个点)进行过滤

Question

当记录数量非常多时，分页会显示所有页面并破坏 View 。

如何插入该过滤器，该过滤器在页数中间显示“..”三个点？

这是 View 上的结果，如果记录很多，就不太实用了

分页类

 public class Pagination<T> where T : class
    {
        public Pagination()
        {

        }      

        public Pagination(List<T> itens, int count)
        {
            this.Count = count;
            this.List = itens;
        }
        public IEnumerable<T> List { get; set; } 
        public int Count { get; set; }
    }

存储库 在这里使用 Dapper

public Pagination<LocalDaOperacao> ObterLocalOperacaoPaginado(string nome, int pageSize, int pageNumber)
    {
        var cn = this.DbContext.Database.Connection;

        var sql = @"SELECT * FROM LOCAL_OPERACAO local 
                  WHERE (LTRIM(:Nome) IS NULL OR LTRIM(local.NOME) LIKE LTRIM(CONCAT(:Nome, '%')))
                  ORDER BY local.NOME 
                  OFFSET :pageSize * (:pageNumber - 1)  ROWS 
                  FETCH NEXT :pageSize  ROWS ONLY ";

         var sqlCount = @"SELECT COUNT(Id) FROM Local_Operacao local 
                  WHERE (:Nome IS NULL OR local.Nome LIKE CONCAT(:Nome, '%'))";

         var multi2 = cn.QueryMultiple(sqlCount, new { Nome = nome });


        var multi = cn.QueryMultiple(sql, new { Nome = nome, PageSize = pageSize, PageNumber = pageNumber });
        var locais = multi.Read<LocalDaOperacao>();
        var total = multi2.Read<int>().FirstOrDefault();

        var pagedList= new Pagination<LocalDaOperacao>()
        {
            List = locais,
            Count = total
        };

        return pagedList;
    }

Controller

 public const int PageSize = 8;    
    public ActionResult Index(string search, int pageNumber= 1 )
        {
            var pagination= _localDaOperacaoAppService.getAll(search, PageSize ,pageNumber);
            ViewBag.Total = Math.Ceiling((double)pagination.Count / PageSize);
            ViewBag.PageNumber= pageNumber;
            ViewBag.SearchRecord= search;

            return View(pagination.List);
        }

前端

    <li class="page-item">
        @if (ViewBag.PageNumber> 1)
        {
        <a class="page-link" href="@Url.Action("Index", "LocalDaOperacao", new { search= ViewBag.SearchRecord, pageNumber= ViewBag.PageNumber- 1 })"> Anterior</a>

        }
        else
        {
            <a class="page-item disabled">
                <span class="page-link">Previus</span>
            </a>
        }
    </li>

    @{
        var currentPage= ViewBag.PageNumber;

        for (int i = 1; i <= ViewBag.Total; i++)
        {
            <li @Html.Raw(currentPage== i ? "class=\"page-item active\"" : "") )>
                <a class="page-link" href="@Url.Action("Index", "LocalDaOperacao", new { search= ViewBag.SearchRecord, pageNumber= i })">@i</a>
            </li>
        }

    }

    <li class="page-item">
        @if (ViewBag.PageNumber< ViewBag.Total)
        {                   
             <a class="page-link" href="@Url.Action(" Index", "LocalDaOperacao" , new { search=ViewBag.SearchRecord, pageNumber=ViewBag.NumeroDePaginas + 1 })">Next</a>                 
        }
        else
        {
            <a class="page-item disabled">
                <span class="page-link">Next</span>
            </a>
        }
</ul>

Answer 1

如果你像这样分页:

上一页 | 1 | ... | 10 | 10 11 | 11 12 | 13 | 14 | 14 ...最后|下一页

您可以使用此代码:

 <ul>
    <li class="page-item">
        @if (ViewBag.PageNumber > 1)
        {
            <a class="page-link" href="@Url.Action("Index", "LocalDaOperacao", new { search= ViewBag.SearchRecord, pageNumber= ViewBag.PageNumber- 1 })"> Anterior</a>

        }
        else
        {
            <a class="page-item disabled">
                <span class="page-link">Previus</span>
            </a>
        }
    </li>

    @{
        var currentPage = (int)ViewBag.PageNumber;
        var pageCount = (int)ViewBag.Total;

        // How many pages views right or left of currentPage
        const int PageLeft = 2;
        const int PagesRight = 2;

        // get first page befor ...
        var fromPage = Math.Max(1, currentPage - PageLeft);

        // get last page after ...
        var toPage = Math.Min(pageCount, currentPage + PagesRight);

        if (pageCount - toPage == 1)
        {
            toPage = pageCount;
        }

        if (fromPage > 1)
        {
            // view First page
            <li>
                <a class="page-link" href="@Url.Action("Index", "LocalDaOperacao", new { search= ViewBag.SearchRecord, pageNumber= 1 })">1</a>
            </li>
            if (fromPage > 2)
            {
                // view first ...
                // calculate number page for link ..., it's middle between first page and fromPage
                var middleNumber = (int)Math.Ceiling((double)(fromPage - 2) / 2) + 1;
                <li>
                    <a class="page-link" href="@Url.Action("Index", "LocalDaOperacao", new { search= ViewBag.SearchRecord, pageNumber= middleNumber })">...</a>
                </li>
            }
        }


        // view paginator between currentPage
        for (int i = fromPage; i <= toPage; i++)
        {
            <li @Html.Raw(currentPage == i ? "class=\"page-item active\"" : "") )>
                <a class="page-link" href="@Url.Action("Index", "LocalDaOperacao", new { search= ViewBag.SearchRecord, pageNumber= i })">@i</a>
            </li>
        }


        // view second ...
        if (toPage < pageCount)
        {
            int middleNumber = (int)Math.Ceiling((double)(pageCount - toPage) / 2) + toPage;
            <li>
                <a class="page-link" href="@Url.Action("Index", "LocalDaOperacao", new { search= ViewBag.SearchRecord, pageNumber= middleNumber })">...</a>
            </li>
            // view last page
            if (toPage < pageCount - 1)
            {
                <li>
                    <a class="page-link" href="@Url.Action("Index", "LocalDaOperacao", new { search= ViewBag.SearchRecord, pageNumber= pageCount })">@pageCount</a>
                </li>
            }

        }

    }

    <li class="page-item">
        @if (ViewBag.PageNumber < ViewBag.Total)
        {
            <a class="page-link" href="@Url.Action(" Index", "LocalDaOperacao" , new { search=ViewBag.SearchRecord, pageNumber=ViewBag.NumeroDePaginas + 1 })">Next</a>
        }
        else
        {
            <a class="page-item disabled">
                <span class="page-link">Next</span>
            </a>
        }
</ul>

您可以更改 PageLeft 和 PagesRight 以正确显示当前页面之前和之后的查看页面数。它的代码应该被优化，但是对于演示算法 View 链接“...”是正常的。