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到5）。 10）。可以对此进行改进，也可以保留原样。

该代码也可以在fiddle中使用。

如何创建动态分页

1 个答案: