如何创建动态分页

Question

我已经在 MVC 中完成了服务器端分页，但我无法动态显示数字和 Next 和 prev 链接按钮。请给我一些想法。

  <nav aria-label="Page navigation example">
            <ul class="pagination">
                @for (int i = 1; i <= Model.PageCount; i++) // PageCount is Number of total Pages
                {

                    <li class="page-item">
                        @if (i != Model.CurrentPageIndex) //Current Page say 1..2...3..etc
                        {

                            <a class="page-link" href="javascript:;" onclick="myClick(@i)">@i</a>

                        }
                        else
                        {
                            <span>@i</span>
                        }
                    </li>
                }
            </ul>
        </nav>

我的问题是，如果我总共有 10 页（比如说）。我想在“下一步”按钮中显示数字 1 到 5 的链接按钮。这样分页导航就会变成动态的。请帮助

Answer 1

如果我理解正确，您担心的是您希望限制生成的链接数量，以便用户看到而不是链接到每个页面，从 1 开始到 PageCount 结束只是完整链接列表的范围。

这里的想法是引入另一个参数，称为numbersToShow，它表示您要呈现的链接总数。

例如，当有 10 个页面时，链接的总数可能是 5 个。

计算这个子集的开始和结束索引的示例函数可能是这样的：

static (int min, int max) GetPagingRange( int currentPage, int totalPages, int numbersToShow = 5 )
{
    if ( currentPage < 1 || totalPages < 1 || currentPage > totalPages ) throw new ArgumentException();
    if ( numbersToShow < 1 ) throw new ArgumentException();

    var min = Math.Max(1, currentPage - numbersToShow/2);
    var max = Math.Min(totalPages, currentPage + numbersToShow/2 + Math.Max( 0, min - currentPage + numbersToShow/2 ) );

    return (min, max);
}

这里发生的情况是，我们从当前页面开始并尝试使其位于动态范围的中间（因此我们将numbersToShow/2 置于左侧和右侧）。 Math.Min 和 Math.Max 都确保我们保持在有效范围内。

在计算max 时，还有另一个组件会在您呈现前几页时尝试补偿范围左侧部分的缺失。

考虑这个显示返回什么范围值的示例用法：

    Console.WriteLine( "Total pages:    10" );
    Console.WriteLine( "Numers to show: 5" );

    int totalPages = 10;

    for ( int currentPage = 1; currentPage <= totalPages; currentPage++ )                 
    {
        var result = GetPagingRange( currentPage, totalPages );
        Console.WriteLine( $"CurrentPage: {currentPage}, starting page index: {result.min} ending page index: {result.max}");
    }   

这里的输出是

Total pages:    10
Numers to show: 5
CurrentPage: 1, starting page index: 1 ending page index: 5
CurrentPage: 2, starting page index: 1 ending page index: 5
CurrentPage: 3, starting page index: 1 ending page index: 5
CurrentPage: 4, starting page index: 2 ending page index: 6
CurrentPage: 5, starting page index: 3 ending page index: 7
CurrentPage: 6, starting page index: 4 ending page index: 8
CurrentPage: 7, starting page index: 5 ending page index: 9
CurrentPage: 8, starting page index: 6 ending page index: 10
CurrentPage: 9, starting page index: 7 ending page index: 10
CurrentPage: 10, starting page index: 8 ending page index: 10

请注意，虽然补偿适用于起始页（例如，当当前页为 1 时，范围为 1 到 5），但在呈现少数最后一页时（例如，在最后 10 页上，范围为 8 到10）。这可能会得到改进，或者您可以保持原样。

代码也可以在fiddle 中找到。