motivación:
Para facilitar que los usuarios vean grandes cantidades de datos, utilizaremos paginación dinámica, por lo que la función de paginación es el módulo funcional más común y utilizado que hemos visto en el sitio web. En el pasado, la paginación de información estaba conectada a la base de datos y cada clic requería el soporte de la base de datos en segundo plano. Esto no sólo aumenta la carga sobre el servidor, sino que también afecta seriamente la velocidad de navegación del usuario.
Imagínese, si la función de paginación se aplica al cliente, ¿qué tipo de efecto tendrá? Jaja, ¡mira el diseño a continuación! .
Material:
La paginación dinámica del volumen XML tiene dos archivos: páginas.xml y páginas.xsl.
Las funciones son:
Coloque la función de paginación en el lado del cliente. Filtre datos sin actualizar la página, mejorando efectivamente la eficiencia de los datos de navegación.
Efecto:
Navegar aquí
Código:
paginas.xml
<?xml versión="1.0" codificación="gb2312" ?>
<?xml-stylesheet type="text/xsl" href="pages.xsl" ?>
<Idea Azul>
<equipo>
<blue_ID>1</blue_ID>
<blue_name>Vuelo en vela</blue_name>
<blue_text>Una paginación simple</blue_text>
<blue_time>2002-1-11 17:35:33</blue_time>
<blue_class>Tema XML</blue_class>
</equipo>
<equipo>
<azul_ID>2</azul_ID>
<blue_name>pájaro volador</blue_name>
<blue_text>Casarse contigo te hará daño</blue_text>
<blue_time>2001-09-06 12:45:51</blue_time>
<blue_class>Esencia de Riego</blue_class>
</equipo>
<equipo>
<azul_ID>3</azul_ID>
<blue_name>Kao Zi</blue_name>
<blue_text>Aplicación de expresiones regulares en el foro UBB</blue_text>
<blue_time>2001-11-23 21:02:16</blue_time>
<blue_class>Esencia de programación web</blue_class>
</equipo>
<equipo>
<blue_ID>4</blue_ID>
<blue_name>Tayilang</blue_name>
<blue_text>Manual completo del equipo de dirección clásico de fin de año v0.1</blue_text>
<blue_time>2000-12-08 10:22:48</blue_time>
<blue_class>Zona de riego del foro</blue_class>
</equipo>
<equipo>
<azul_ID>5</azul_ID>
<nombre_azul>mmkk</nombre_azul>
<blue_text>Resumen del mensaje de error de Asp</blue_text>
<blue_time>2001-10-13 16:39:05</blue_time>
<blue_class>javascript</blue_class>
</equipo>
</AzulIdea>
páginas.xsl
<?xml versión="1.0" codificación="gb2312" ?>
<xsl:hoja de estilo xmlns:xsl=" http://www.w3.org/TR/WD-xsl ">
<xsl:coincidencia de plantilla="/">
<html>
<cabeza>
<title> Consejos prácticos para el volumen XML (3): paginación dinámica</title>
<estilo>
cuerpo,BlueIdea,equipo,blue_ID,blue_name,blue_text,blue_time,blue_class{ fuente: 12px "宋体", "Arial", "Times New Roman" }
tabla {tamaño de fuente: 12px; borde: 0px doble; color de borde: #99CC99 #99CC99 #CCCCCC #CCCCCC; espacio entre celdas: 3; bgcolor:#eeeeee;
abarcar {tamaño de fuente: 12px; color: rojo}
.keybutton {cursor:mano; tamaño de fuente: 12px; color: #003300; fondo: #ffffff;
</estilo>
<guión>
<xsl:comentario>
<![CDATA[
varOnePageNum=2;
varNúmPágina=1;
var XMLPageNum=1;
páginas de funciones (Núm)
{
hoja de estilo=documento.XSLDocumento;
fuente=documento.XMLDocumento;
nodos=source.documentElement.childNodes;
len=nodos.longitud;
for(i=1;i<=(len/OnePageNum);i++);
NúmPáginaXML=i;
var primerNum=0;
var últimoNum=0;
if (Num=="primero") {NumPágina=1;}
if (Num=="anterior") {if (PageNum>1) PageNum -=1;}
if (Num=="siguiente") {if (NumPágina<XMLPageNum) NumPágina +=1;}
if (Num=="último") {PageNum =XMLPageNum;}
sortField=document.XSLDocument.selectSingleNode(" //@expr ");
primerNum=OnePageNum*(PageNum-1)+1;
lastNum=OnePageNum*(PageNum-1)+OnePageNum;
text="númeroniño(este)>="+primerNum+" & númeroniño(este)<="+últimoNum;
sortField.value=texto;
Layer1.innerHTML=source.documentElement.transformNode(hoja de estilo);
}
]]>
</xsl:comentario>
</script>
</cabeza>
<cuerpo>
<p align="center"><span>Consejos prácticos para el volumen XML (3): paginación dinámica</span></p>
<tabla align="centro" ancho="500" >
<tr>
<td>
<button id="cmdfirstPage" class="keybutton" onclick="pages('first');" >Página de inicio</button>
<button id="cmdpreviousPage" class="keybutton" onclick="pages('previous');" >Página anterior</button>
<button id="cmdnextPage" class="keybutton" onclick="pages('next');">Página siguiente</button>
<button id="cmdlastPage" class="keybutton" onclick="pages('last');">Última página</button>
</td>
</tr>
</tabla>
<div id="Capa1" nombre="Capa1"> <xsl:apply-templates select="BlueIdea" /></div>
</cuerpo>
</html>
</xsl:plantilla>
<xsl: coincidencia de plantilla="BlueIdea">
<table width="500" border="1" align="center" cellpadding="1" cellpacing="1" bordercolordark="#ffffff" bordercolorlight="#ADAAAD">
<tr bgcolor="#FFCC99" align="centro">
<td>Número</td>
<td>Nombre</td>
<td>Tema</td>
<td>Hora de publicación</td>
<td>Clasificación</td>
</tr>
<xsl:apply-templates select="equipo" order-by="blue_ID"/>
</tabla>
</xsl:plantilla>
<xsl:partida de plantilla="equipo">
<xsl:if expr="númeroniño(este)>=1 & númeroniño(este)<=2 ">
<tr align="centro">
<xsl:apply-templates select="blue_ID" />
<xsl:apply-templates select="nombre_azul" />
<xsl:aplicar-templates select="blue_text" />
<xsl:apply-templates select="blue_time" />
<xsl:apply-templates select="blue_class" />
</tr>
</xsl:si>
</xsl:plantilla>
<xsl: coincidencia de plantilla="blue_ID">
<td bgcolor="#eeeeee">
<xsl:valor-de />
</td>
</xsl:plantilla>
<xsl:template match="nombre_azul">
<td>
<xsl:valor-de />
</td>
</xsl:plantilla>
<xsl: coincidencia de plantilla="texto_azul">
<td>
<xsl:valor-de />
</td>
</xsl:plantilla>
<xsl:template match="blue_time">
<td>
<xsl:valor-de />
</td>
</xsl:plantilla>
<xsl:template match="blue_class">
<td>
<xsl:valor-de />
</td>
</xsl:plantilla>
</xsl:hoja de estilo>
explicar:
1) search.xml es un archivo de datos, creo que no habrá ningún problema para todos.
2) search.xsl es un archivo de formato, hay varias cosas a las que prestar atención.
(1) En el script:
nodos=source.documentElement.childNodes;
La función es: encontrar todos los nodos. nodes.length es el número total de nodos que cumplen las condiciones
sortField=document.XSLDocument.selectSingleNode(" //@expr ");
La función es: encontrar el primer nodo con el atributo expr, por lo que su nodo correspondiente es
<xsl:if expr="númeroniño(este)>=1 & númeroniño(este)<=2 ">
Por lo tanto, el valor de expr durante el primer onLoad es
númeroniño(este)<=1 & númeroniño(este)>=2
Acerca de > Es posible que esté más familiarizado con él. Entonces, ¿qué es & Es "y".
Puede encontrar otros en libros XML.
Descripción del parámetro:
OnePageNum: la cantidad de datos que se muestran en cada página
PageNum: número de página actual
XMLPageNum: número total de páginas
firstNum: el primer valor de datos de la página actual
lastNum: el último valor de datos de la página actual
(2) En el texto:
<xsl:if expr="childnumber(this)>=1 & childnumber(this)<=2 ">
En la paginación, necesitamos generar datos apropiados, por lo que usamos una condición de juicio if para controlarlos.
Al principio, solicitamos que solo se generaran los valores de los dos primeros nodos.
número de niño (este)
Función: Devuelve el número del nodo actual en su lista de nodos superiores. El número predeterminado del primer nodo de la lista es 1.
En la paginación, juzgamos a qué página pertenece según el número del nodo.
exprés
No sé si habrás notado que las dos primeras veces usamos test, pero esta vez usamos expr.
Existen ciertas diferencias entre ellos y su uso también es diferente.
expr: expresión del lenguaje de secuencias de comandos. El resultado del cálculo es "verdadero" o "falso". Si el resultado es "verdadero" y pasa la prueba, el contenido se mostrará en la salida (este atributo se puede omitir).
prueba ── condiciones de prueba de datos fuente.
<button id="cmdfirstPage" class="keybutton" onclick="pages('first');" >Página de inicio</button>
La función es devolver los datos a la página anterior. Los otros botones funcionan de manera similar.
Un punto adicional: cómo utilizar archivos de ejemplo XML
1) Guarde los dos archivos de cada ejemplo por separado según sus nombres de archivo.
2) Utilice un navegador para explorar el archivo XML. Este es el efecto que verás, ¡debería ser bueno!
posdata:
Jaja, puedes agregar la función de paginación después de la clasificación dinámica. Luego haga que el número de listas sea configurable. Usa tu imaginación para hacer estas funciones más perfectas. Puede investigar mejores formas de implementar la funcionalidad de paginación. ¡Es genial discutir entre nosotros!