Podemos llevar a cabo una paginación de un listado sin necesidad de que la página tenga que llamar al servidor, obtener los datos y mostrar la siguiente página.
Hoy en día es muy conocido el XML como fuente de datos y, no tanto el acceso a datos mediante RDS (Remote Data Service). El ejemplo que voy a poner ahora lo he realizado con XML en vez de con RDS por este motivo.
<html>
<head>
<title>Prueba de paginación</title>
</head>
<xml id="xmlPrueba">
<LISTADO>
<REGISTRO>
<NOMBRE>Ismael</NOMBRE>
<APELLIDOS>Zori Martinez</APELLIDOS>
</REGISTRO>
<REGISTRO>
<NOMBRE>Alicia</NOMBRE>
<APELLIDOS>Campos Ortega</APELLIDOS>
</REGISTRO>
<REGISTRO>
<NOMBRE>Julio</NOMBRE>
<APELLIDOS>Camino del Bosque</APELLIDOS>
</REGISTRO>
<REGISTRO>
<NOMBRE>Juan</NOMBRE>
<APELLIDOS>Diges Sierra</APELLIDOS>
</REGISTRO>
<REGISTRO>
<NOMBRE>Roberto</NOMBRE>
<APELLIDOS>Cabeza Benito</APELLIDOS>
</REGISTRO>
<REGISTRO>
<NOMBRE>Rosa</NOMBRE>
<APELLIDOS>Jimenez Sancho</APELLIDOS>
</REGISTRO>
<REGISTRO>
<NOMBRE>Eva</NOMBRE>
<APELLIDOS>Soria del Pinar</APELLIDOS>
</REGISTRO>
<REGISTRO>
<NOMBRE>Pedro</NOMBRE>
<APELLIDOS>Zamora Reinoso</APELLIDOS>
</REGISTRO>
</LISTADO>
</xml>
<script language="JavaScript">
function go(numDonde)
{
switch (numDonde)
{
case 0:
tablaPrueba.firstPage();
break;
case 1:
tablaPrueba.previousPage();
break;
case 2:
tablaPrueba.nextPage();
break;
case 3:
tablaPrueba.lastPage();
break;
default:
alert("Opción de navegación incorrecta. Fallo de programación");
}
}
</script>
<body>
<center>
<table datasrc="#xmlPrueba" datapagesize="5" id="tablaPrueba" border="1" cellpadding="1" cellspacing="0">
<thead>
<tr>
<td align="center"><b>Nombre</b></td>
<td align="center"><b>Apellidos</b></td>
</tr>
</thead>
<tr>
<td><span datafld="NOMBRE"></span></td>
<td><span datafld="APELLIDOS"></span></td>
</tr>
</table>
<br><br>
<input type="button" name="btnPrimero" value="|<" onclick="go(0)">
<input type="button" name="btnAnterior" value="<" onclick="go(1)">
<input type="button" name="btnSiguiente" value=">" onclick="go(2)">
<input type="button" name="btnUltimo" value=">|" onclick="go(3)">
</center>
</body>
</html>
Por desgracia los registros te los tienes que traer todos del servidor por lo que la página ocupa mucho, pero no hace falta que el XML vaya en la página, puede estar en un fichero.XML, en ese caso en vez de poner
<XML id="xmlPrueba"><LISTADO>........</LISTADO></XML>
podemos poner
<XML id="xmlPrueba" src="fichero.xml"></XML>
Si tenéis algun problema no dudéis en consultármelo mandándome un mail a iszori@hotmail.com
<html>
<head>
<title>Prueba de paginación</title>
</head>
<xml id="xmlPrueba">
<LISTADO>
<REGISTRO>
<NOMBRE>Ismael</NOMBRE>
<APELLIDOS>Zori Martinez</APELLIDOS>
</REGISTRO>
<REGISTRO>
<NOMBRE>Alicia</NOMBRE>
<APELLIDOS>Campos Ortega</APELLIDOS>
</REGISTRO>
<REGISTRO>
<NOMBRE>Julio</NOMBRE>
<APELLIDOS>Camino del Bosque</APELLIDOS>
</REGISTRO>
<REGISTRO>
<NOMBRE>Juan</NOMBRE>
<APELLIDOS>Diges Sierra</APELLIDOS>
</REGISTRO>
<REGISTRO>
<NOMBRE>Roberto</NOMBRE>
<APELLIDOS>Cabeza Benito</APELLIDOS>
</REGISTRO>
<REGISTRO>
<NOMBRE>Rosa</NOMBRE>
<APELLIDOS>Jimenez Sancho</APELLIDOS>
</REGISTRO>
<REGISTRO>
<NOMBRE>Eva</NOMBRE>
<APELLIDOS>Soria del Pinar</APELLIDOS>
</REGISTRO>
<REGISTRO>
<NOMBRE>Pedro</NOMBRE>
<APELLIDOS>Zamora Reinoso</APELLIDOS>
</REGISTRO>
</LISTADO>
</xml>
<script language="JavaScript">
function go(numDonde)
{
switch (numDonde)
{
case 0:
tablaPrueba.firstPage();
break;
case 1:
tablaPrueba.previousPage();
break;
case 2:
tablaPrueba.nextPage();
break;
case 3:
tablaPrueba.lastPage();
break;
default:
alert("Opción de navegación incorrecta. Fallo de programación");
}
}
</script>
<body>
<center>
<table datasrc="#xmlPrueba" datapagesize="5" id="tablaPrueba" border="1" cellpadding="1" cellspacing="0">
<thead>
<tr>
<td align="center"><b>Nombre</b></td>
<td align="center"><b>Apellidos</b></td>
</tr>
</thead>
<tr>
<td><span datafld="NOMBRE"></span></td>
<td><span datafld="APELLIDOS"></span></td>
</tr>
</table>
<br><br>
<input type="button" name="btnPrimero" value="|<" onclick="go(0)">
<input type="button" name="btnAnterior" value="<" onclick="go(1)">
<input type="button" name="btnSiguiente" value=">" onclick="go(2)">
<input type="button" name="btnUltimo" value=">|" onclick="go(3)">
</center>
</body>
</html>
Por desgracia los registros te los tienes que traer todos del servidor por lo que la página ocupa mucho, pero no hace falta que el XML vaya en la página, puede estar en un fichero.XML, en ese caso en vez de poner
<XML id="xmlPrueba"><LISTADO>........</LISTADO></XML>
podemos poner
<XML id="xmlPrueba" src="fichero.xml"></XML>
Si tenéis algun problema no dudéis en consultármelo mandándome un mail a iszori@hotmail.com
Ismael Zori