Как создать динамическую пагинацию

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 .