javascript - 如何创建动态分页

Question

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

  <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 中找到。 .