w3school una página para pagina otra misma hipervinculos hipervinculo hacer etiqueta enlazar enlaces enlace ejemplos dentro como codigo algorithm paging

algorithm - una - hipervinculos en html ejemplos



¿Algoritmo/pseudocódigo para crear enlaces de búsqueda? (5)

Bueno, si conoce la página actual, es bastante trivial simplemente restar el número por 1, y agregarlo por 1, luego verifique esos números con los límites y muestre siempre la primera y la última página, luego, si no están en secuencia , agrega las elipsis.

¿O está preguntando sobre obtener el número total de páginas y determinar el número de página actual ...?

¿Alguna vez puede proporcionar código o pseudocódigo sobre cómo se generan los enlaces de búsqueda en StackOverflow?

Sigo trabajando duro en mi cerebro, pero no puedo pensar en una forma decente para construir los enlaces dinámicos que siempre muestran las 2 páginas alrededor de la corriente, más la primera y la última.

Ejemplo: 1 ... 5 6 7 ... 593


Los controles generalmente muestran controles para: P1, Pn, Pc (página actual), Pc + 1, Pc-1. La única vez que esto cambia es en cualquiera de los extremos del rango de paginación {Pc <P3 o Pc> (Pn-3)}

  • El primer paso es calcular el número de páginas:

numPages = ceiling(totalRecords / numPerPage)

  • Si tiene 4 o menos, abandone en este punto, porque, según las reglas anteriores, la paginación siempre será fija (P1, P2, Pn-1, Pn), donde uno será efectivamente PC

  • de lo contrario, tienes tres "estados"

a. (Pc <P3) - así que muestre P1, P2, P3, Pn, Siguiente si Pc> 1, muestre un enlace ''anterior'' antes de P1.

segundo. (Pc> Pn - 2), entonces muestra Prev, P1, Pn - 2, Pn -1, Pn, muestra un Siguiente enlace si Pc <Pn

do. Mostrar Prev, P1, Pc -1, PC, PC +1, Pn, Siguiente

Fácil como Pie en pseudo código. Los bucles pueden ser un poco desagradables cuando se implementan, ya que hay que iterar para generar los enlaces.

Editar: por supuesto, Prev y Next son idénticos a Pc +/- 1


public void PageLinks(int currentPage, int lastPage) { if (currentPage > 2) Add(''[1]'', ''...''); for(int i=Math.Max(1, currentPage-1); i< Math.Min(currentPage+1, lastPage); i++) Add(''[i]''); if (currentPage < lastPage-1) Add(''...'', ''[lastpage]''); }

lastPage se calcula como Math.Ceiling (totalRecords / RecordsPerPage).

hmmm. de hecho, en el caso de que currentpage sea 3, todavía muestra [1] ... [2] [3] [4] ... [xxx] creo que las elipsis son superfluas en ese caso. Pero así es como funciona.

Editar: la vista previa formatea el bloque de código correctamente, ¿por qué se arruina? seguro, es solo pseudocódigo ... pero aún ...


Este es mi enfoque para hacer un enlace de búsqueda. El siguiente código de Java es solo un pseudo.

package com.edde; /** * @author Yang Shuai */ public class Pager { /** * This is a method used to display the paging links(pagination or sometimes called pager). * The totalPages are the total page you need to display. You can get this value using the * formula: * * total_pages = total_records / items_per_page * * This methods is just a pseudo-code. * * * @param totalPages how many pages you need to display * @param currentPage you are in which page now */ public static void printPageLinks(int totalPages, int currentPage) { // how many pages to display before and after the current page int x = 2; // if we just have one page, show nothing if (totalPages == 1) { return; } // if we are not at the first page, show the "Prev" button if (currentPage > 1) { System.out.print("Prev"); } // always display the first page if (currentPage == 1) { System.out.print(" [1]"); } else { System.out.print(" 1"); } // besides the first and last page, how many pages do we need to display? int how_many_times = 2 * x + 1; // we use the left and right to restrict the range that we need to display int left = Math.max(2, currentPage - 2 * x - 1); int right = Math.min(totalPages - 1, currentPage + 2 * x + 1); // the upper range restricted by left and right are more loosely than we need, // so we further restrict this range we need to display while (right - left > 2 * x) { if (currentPage - left < right - currentPage) { right--; right = right < currentPage ? currentPage : right; } else { left++; left = left > currentPage ? currentPage : left; } } // do we need display the left "..." if (left >= 3) { System.out.print(" ..."); } // now display the middle pages, we display how_many_times pages from page left for (int i = 1, out = left; i <= how_many_times; i++, out++) { // there are some pages we need not to display if (out > right) { continue; } // display the actual page if (out == currentPage) { System.out.print(" [" + out + "]"); } else { System.out.print(" " + out); } } // do we need the right "..." if (totalPages - right >= 2) { System.out.print(" ..."); } // always display the last page if (currentPage == totalPages) { System.out.print(" [" + totalPages + "]"); } else { System.out.print(" " + totalPages); } // if we are not at the last page, then display the "Next" button if (currentPage < totalPages) { System.out.print(" Next"); } System.out.println(); } public static void main(String[] args) { // printPageLinks(50, 3); help(500); } public static void test(int n) { for (int i = 1; i <= n; i++) { printPageLinks(n, i); } System.out.println("------------------------------"); } public static void help(int n) { for (int i = 1; i <= n; i++) { test(i); } } public static void help(int from, int to) { for (int i = from; i <= to; i++) { test(i); } } }


Ya hay varias otras respuestas, pero me gustaría mostrarle el enfoque que tomé para resolverlo: Primero, veamos cómo maneja casos normales y casos extremos. Cada una de mis páginas muestra 10 resultados, por lo tanto, para saber qué hace para 1 página, busque una etiqueta que tenga menos de 11 entradas: la usabilidad funciona hoy. Podemos ver que no se muestra nada, lo cual tiene sentido.

¿Qué tal 2 páginas? Busque una etiqueta que tenga entre 11 y 20 entradas ( emacs funciona hoy). Vemos: " 1 2 Next" o "Prev 1 2 ", según en qué página estamos.

3 páginas? " 1 2 3 ... 3 Siguiente", "Anterior 1 2 3 Siguiente" y "Anterior 1 ... 2 3 ". Curiosamente, podemos ver que no maneja muy bien este borde: debería mostrar " 1 2 ... 3 Next"

4 páginas? " 1 2 3 ... 4 Siguiente", "Anterior 1 2 3 ... 4 Siguiente", "Anterior 1 ... 2 3 4 Siguiente" y "Anterior 1 ... 3 4 "

Finalmente, veamos el caso general, N páginas: " 1 2 3 ... N Siguiente", "Anterior 1 2 3 ... N Siguiente", "Anterior 1 ... 2 3 4 ... N Siguiente", "Anterior 1 ... 3 4 5 ... N siguiente", etc.

Vamos a generalizar en función de lo que hemos visto: el algoritmo parece tener estos rasgos en común:

  • Si no estamos en la primera página, mostrar el enlace a Prev
  • Mostrar siempre el primer número de página
  • Mostrar siempre el número de página actual
  • Siempre muestre la página antes de esta página y la página después de esta.
  • Mostrar siempre el último número de página
  • Si no estamos en la última página, mostrar el vínculo a Siguiente

Vamos a ignorar el caso límite de una sola página y hacer un buen primer intento con el algoritmo: (Como se ha mencionado, el código para imprimir realmente los enlaces sería más complicado. Imagine cada lugar donde colocamos un número de página, Anterior o Siguiente como una llamada de función que devolverá la URL correcta).

function printPageLinksFirstTry(num totalPages, num currentPage) if ( currentPage > 1 ) print "Prev" print "1" print "..." print currentPage - 1 print currentPage print currentPage + 1 print "..." print totalPages if ( currentPage < totalPages ) print "Next" endFunction

Esta función funciona bien, pero no tiene en cuenta si estamos cerca de la primera o la última página. Mirando los ejemplos anteriores, solo queremos mostrar el ... si la página actual está a dos o más de distancia.

function printPageLinksHandleCloseToEnds(num totalPages, num currentPage) if ( currentPage > 1 ) print "Prev" print "1" if ( currentPage > 2 ) print "..." if ( currentPage > 2 ) print currentPage - 1 print currentPage if ( currentPage < totalPages - 1 ) print currentPage + 1 if ( currentPage < totalPages - 1 ) print "..." print totalPages if ( currentPage < totalPages ) print "Next" endFunction

Como puede ver, tenemos algunas duplicaciones aquí. Podemos seguir adelante y limpiar eso para ser legibles:

function printPageLinksCleanedUp(num totalPages, num currentPage) if ( currentPage > 1 ) print "Prev" print "1" if ( currentPage > 2 ) print "..." print currentPage - 1 print currentPage if ( currentPage < totalPages - 1 ) print currentPage + 1 print "..." print totalPages if ( currentPage < totalPages ) print "Next" endFunction

Solo quedan dos problemas. Primero, no imprimimos correctamente para una página, y en segundo lugar, imprimiremos "1" dos veces si estamos en la primera o la última página. Limpiemos los dos de una vez:

function printPageLinksFinal(num totalPages, num currentPage) if ( totalPages == 1 ) return if ( currentPage > 1 ) print "Prev" print "1" if ( currentPage > 2 ) print "..." print currentPage - 1 if ( currentPage != 1 and currentPage != totalPages ) print currentPage if ( currentPage < totalPages - 1 ) print currentPage + 1 print "..." print totalPages if ( currentPage < totalPages ) print "Next" endFunction

En realidad, mentí: tenemos un problema restante. Cuando tienes al menos 4 páginas y estás en la primera o la última página, obtienes una página adicional en tu pantalla. En lugar de " 1 2 ... 10 Siguiente" obtienes " 1 2 3 ... 10 Siguiente". Para que coincida exactamente con lo que está sucediendo en , tendrá que verificar esta situación:

function printPageLinksFinalReally(num totalPages, num currentPage) if ( totalPages == 1 ) return if ( currentPage > 1 ) print "Prev" print "1" if ( currentPage > 2 ) print "..." if ( currentPage == totalPages and totalPages > 3 ) print currentPage - 2 print currentPage - 1 if ( currentPage != 1 and currentPage != totalPages ) print currentPage if ( currentPage < totalPages - 1 ) print currentPage + 1 if ( currentPage == 1 and totalPages > 3 ) print currentPage + 2 print "..." print totalPages if ( currentPage < totalPages ) print "Next" endFunction

¡Espero que esto ayude!