Как выполнять навигацию по страницам для многих, многих страниц? Логарифмическая навигация по страницам

Каков наилучший способ отображения навигации по страницам для многих, многих страниц?

(Первоначально это было опубликовано как подсказка с ответом, включенным в вопрос. Теперь я отделил свой ответ в разделе «ответы» ниже).


Чтобы быть более конкретным:

Предположим, вы показываете пользователю набор записей, разбитых на страницы фиксированного размера (например, результаты поиска Google). Если есть только несколько страниц, вы можете отобразить область навигации страницы в конце результатов, которые могут выглядеть так:

[<<] [<] 1 2 3 4 5 6 7 8 9 10 11 12 13 [>] [>>]

Но это быстро становится непередаваемым, если есть более 20 или 30 страниц результатов.

Иногда вы увидите такие вещи:

[<<] [<] … 665 666 667 668 669 670 671 672 673 … [>] [>>]

или это:

[<<] [<] 1 2 3 … 667 668 669 670 671 … 845 846 847 [>] [>>]

но в обоих случаях для навигации в любом месте середины разделов «…» потребуется много, много мышц. Иногда предоставляется поле ввода для ввода номера страницы; в противном случае (предполагая, что мы говорим о веб-странице здесь) опытный пользователь, скорее всего, посмотрит URL-адрес, чтобы узнать, могут ли они редактировать его напрямую.

Что было бы неплохо, так это иметь экран отображения страниц, который позволяет пользователю добираться до любой страницы всего за несколько музык, без смехотворного множества ссылок.

Как это было бы лучше всего достигнуто?

    4 Solutions collect form web for “Как выполнять навигацию по страницам для многих, многих страниц? Логарифмическая навигация по страницам”

    Вот мое решение – используйте «Логарифмическая навигационная страница»:

    Это может быть достигнуто за счет того, что номера страниц распределены логарифмически, в зависимости от расстояния от конечных точек или текущей страницы. Вот пример того, что я имею в виду:

    1 2 3 4 5 6. 10. 20. 30. 40. 50 .. 100 .. 200. 210. 220. 230. 240. 250. 252 253 254 255 256 257 258 259 260 261 262. 270. 280. 290. 300. 310 .. 400 .. 500 .. 600 .. 700 .. 800 .. 900 .. 950. 960. 970. 980. 990. 995 996 997 998 999 1000

    Обратите внимание, как в пробелах нумерация идет от 1s, до 10s, до 100s (и т. Д.). (Я использую полномочия 10, но в принципе вы можете использовать другую схему – полномочия 2, скажем).

    Я написал код, который делает это еще в 2004 году, и подумал, что я поделился им здесь. Существуют версии PHP и ASP, но логика должна быть простой для перевода на любой язык. Обратите внимание, что бит внизу (в обоих случаях) просто отображает некоторые примеры. Очевидно, что форматирование будет нуждаться в настройке в соответствии с вашей веб-страницей (или приложением), поэтому здесь довольно просто. Измените LINKS_PER_STEP в LINKS_PER_STEP чтобы определить, сколько чисел будет отображаться до увеличения размера шага при удалении от конечных точек или текущей страницы.

    Для более компактного выхода вы также можете рассмотреть возможность изменения кода, чтобы нумерация не была «плотной» вокруг конечных точек (т. Е. Плотная только вокруг текущей страницы).

    Вот код:

    Версия PHP:

     < ? // Used by paginationHTML below... function paginationLink($p, $page, $URL) { if ($p==$page) return '' . $p . ''; return '' . $p . ''; } // Used by paginationHTML below... function paginationGap($p1, $p2) { $x = $p2-$p1; if ($x==0) return ''; if ($x==1) return ' '; if ($x< =10) return ' . '; if ($x<=100) return ' .. '; return ' ... '; } // URL requires the $page number be appended to it. // eg it should end in '&page=' or something similar. function paginationHTML($page, $lastPage, $URL) { $LINKS_PER_STEP = 5; // Nav buttons if ($page>1) $result = '
     ' . '
    '; else $result = ' '; $result .= '  ' . $page . '  '; if ($page< $lastPage) $result .= '
     ' . '
    '; else $result .= ' '; $result .= "
    "; // Now calculate page links... $lastp1 = 1; $lastp2 = $page; $p1 = 1; $p2 = $page; $c1 = $LINKS_PER_STEP+1; $c2 = $LINKS_PER_STEP+1; $s1 = ''; $s2 = ''; $step = 1; while (true) { if ($c1>=$c2) { $s1 .= paginationGap($lastp1,$p1) . paginationLink($p1,$page,$URL); $lastp1 = $p1; $p1 += $step; $c1--; } else { $s2 = paginationLink($p2,$page,$URL) . paginationGap($p2,$lastp2) . $s2; $lastp2 = $p2; $p2 -= $step; $c2--; } if ($c2==0) { $step *= 10; $p1 += $step-1; // Round UP to nearest multiple of $step $p1 -= ($p1 % $step); $p2 -= ($p2 % $step); // Round DOWN to nearest multiple of $step $c1 = $LINKS_PER_STEP; $c2 = $LINKS_PER_STEP; } if ($p1>$p2) { $result .= $s1 . paginationGap($lastp1,$lastp2) . $s2; if (($lastp2>$page)||($page>=$lastPage)) return $result; $lastp1 = $page; $lastp2 = $lastPage; $p1 = $page+1; $p2 = $lastPage; $c1 = $LINKS_PER_STEP; $c2 = $LINKS_PER_STEP+1; $s1 = ''; $s2 = ''; $step = 1; } } } ?>


    < ?=paginationHTML(1,1,'?page=')?>


    < ?=paginationHTML(2,3,'?page=')?>


    < ?=paginationHTML(3,3,'?page=')?>


    < ?=paginationHTML(73,100,'?page=')?>


    < ?=paginationHTML(4,100,'?page=')?>


    < ?=paginationHTML(257,1000,'?page=')?>


    < ?=paginationHTML(7062,10555,'?page=')?>


    < ?=paginationHTML(22080,503456,'?page=')?>

    Версия ASP:

     < % ' Used by paginationHTML below... Function paginationLink(p, page, URL) if p=page then paginationLink = "" & p & "" else paginationLink = "" & p & "" end if End Function ' Used by paginationHTML below... Function paginationGap(p1, p2) Dim x x = p2-p1 if x=0 then paginationGap = "" elseif x=1 then paginationGap = " " elseif x< =10 then paginationGap = " . " elseif x<=100 then paginationGap = " .. " else paginationGap = " ... " end if End Function ' URL requires the page number be appended to it. ' eg it should end in "&page=" or something similar. Function paginationHTML(page, lastPage, URL) const LINKS_PER_STEP = 5 Dim p1, p2, c1, c2, s1, s2, lastp1, lastp2, step ' Nav buttons if page>1 then paginationHTML = "
     " & _ "
    " else paginationHTML = " " end if paginationHTML = paginationHTML & "  " & page & "  " if page " & _ "
    " else paginationHTML = paginationHTML & " " end if paginationHTML = paginationHTML & "
    " ' Now calculate page links... lastp1 = 1 lastp2 = page p1 = 1 p2 = page c1 = LINKS_PER_STEP+1 c2 = LINKS_PER_STEP+1 s1 = "" s2 = "" step = 1 do if c1>=c2 then s1 = s1 & paginationGap(lastp1, p1) & paginationLink(p1, page, URL) lastp1 = p1 p1 = p1+step c1 = c1-1 else s2 = paginationLink(p2, page, URL) & paginationGap(p2, lastp2) & s2 lastp2 = p2 p2 = p2-step c2 = c2-1 end if if c2=0 then step = step*10 p1 = p1+step-1 ' Round UP to nearest multiple of step p1 = p1-(p1 mod step) p2 = p2-(p2 mod step) ' Round DOWN to nearest multiple of step c1 = LINKS_PER_STEP c2 = LINKS_PER_STEP end if if p1>p2 then paginationHTML = paginationHTML & s1 & paginationGap(lastp1, lastp2) & s2 if (lastp2>page) or (page>=lastPage) then exit do lastp1 = page lastp2 = lastPage p1 = page+1 p2 = lastPage c1 = LINKS_PER_STEP c2 = LINKS_PER_STEP+1 s1 = "" s2 = "" step = 1 end if loop End Function %>


    < %=paginationHTML(1,1,"?page=")%>


    < %=paginationHTML(2,3,"?page=")%>


    < %=paginationHTML(3,3,"?page=")%>


    < %=paginationHTML(73,100,"?page=")%>


    < %=paginationHTML(4,100,"?page=")%>


    < %=paginationHTML(257,1000,"?page=")%>


    < %=paginationHTML(7062,10555,"?page=")%>


    < %=paginationHTML(22080,503456,"?page=")%>

    Версия Javascript (в пределах полной тестовой страницы):

     < !doctype html>   Logarithmic Pagination Demo     
    Select number of pages:     and records per page:    

    Go to page:
    Column Heading...
    Go to page:

    Упрощенная версия «Логарифмическая Навигация по страницам» в JavaScript:

    Создает выпадающее меню. Этот образец просто document.write, но вы можете развивать его дальше в соответствии с вашими потребностями (добавьте onChange и т. Д.). Преобразование Javascript благодаря http://www.basereality.com/PHPToJavascript .

      

    Как насчет:

    a) добавить < -100 <-10 [pagination] +10> +100> вместо того, чтобы взорвать само разбиение на страницы

    b) предлагает прямой ввод страницы [# ..] [просмотр], отфильтруйте входной сигнал от действительного диапазона страниц

    c) нуждается в некотором правильном кодировании, но: разверните внутренний, плавающий диапазон, произнесите +/- 10, +/- 25, +/- 100 страниц вместо того, чтобы взорвать полный диапазон подкачки

    Я думаю о двух вариантах логарифмической разбивки на страницы:

    1. Если это необходимо, вы можете разделить свои данные по разделам, разделам и книгам. Это старый способ, когда бумага была королем, а библиотеки занимались интернетом. В некоторых документах PDF это все еще есть.

    2. Вы можете предложить окно поиска, ala Wikipedia, если кто-то хочет перейти к части больших данных, где упоминается supercalifragilisticexpialidocious .

    Interesting Posts

    Что может вызвать java.lang.reflect.InvocationTargetException?

    Возможно ли RDP в Windows Server 2008 на машине без какой-либо видеокарты или встроенной графики?

    Почему WinDirStat сообщает, что меньше места используется, чем Windows?

    Удаление нескольких столбцов на основе имен столбцов в Pandas

    Не удалось выполнить инструменты \ android.bat: решение

    Ошибка AngularJS .success не является функцией

    Заставить Chrome открывать новые страницы в новом окне, а не вкладке? (При открытии из программы)

    Наличие Windows 7 «Сортировка по типу файла» по умолчанию

    Как объявить глобальную переменную в VBA?

    Компиляция времени

    Когда использовать volatile с многопоточным?

    Служба Windows не запускается с пользовательским пользователем до тех пор, пока не будет запущена один раз с локальным пользователем

    Преобразование кадра данных с столбцом даты в таймсерии

    Как сохранить версию для печати в формате HTML?

    Android-R нельзя разрешить переменной

    Давайте будем гением компьютера.