-
Cómo construir una paginación Ajax con jQuery y PHP
-
Si se necesita mostrar largos fragmentos de texto, tales como artículos o historias, en su sitio web, puede separarlo en las páginas, utilizando la funcionalidad de paginación escrito en jQuery, Ajax y PHP. Al igual que con la mayoría de páginas web dinámicas, el ejemplo que aquí también implica HTML y CSS. En este artículo se supone que tiene un conocimiento básico de las lenguas implicadas, y proporciona enlaces a ejemplos de trabajo.Instrucciones
1 Descarga jquery-1.5.1.min.js (ver Recursos).
2 Abrir Bloc de notas y escriba los datos de prueba en el archivo. Debe haber por lo menos 20 líneas. Guarde el archivo como "mytestdata.txt" en el escritorio. Cierre Bloc de notas.
3 Copia y pega el código siguiente en un archivo en blanco en el Bloc de notas. Guarde el archivo como "pagination.php" en el escritorio. Tenga en cuenta que este es un archivo PHP auto-llamada. Pone a prueba a si se llama a través de Ajax. Si es así, se da salida a los contenidos de la "mytestdata.txt" y luego se cierra. De lo contrario, se muestra la sección HTML. Vea la sección Recursos para el enlace a un ejemplo de trabajo.
<? Php
$ Archivo = "mytestdata.txt";
$ file = fopen ($ archivo, "rb");
$ Data = fread ($ archivo, tamaño de archivo ($ archivo));
fclose ($ archivo);
if ((strtolower ($ _ SERVER == 'xmlhttprequest') [ 'HTTP_X_REQUESTED_WITH'])
&& ($ _GET [ "Página"]! = "")) {
$ Data = '<estilo pre = "border: sólido; border-width: 1px; word-wrap: break-palabra; font-size: 80%; font-family: Times New Roman;"> "$ data'.. </ pre> ';
echo $ datos;
regreso;
}
?>
<Html> <head> </ head> <body>
<Texto '' div id => </ div>
<Script type = "text / javascript" src = "jquery-1.5.1.min.js"> </ script>
<Script>
$ (Document) ready (function () {
. $ ( '# Text') carga ( '? Pagination.php page = 1');
});
</ Script>
</ Body> </ html>
4 Copie las siguientes líneas y pegarlas después de "$ archivo =" mytestdata.txt ";". Tenga en cuenta que estas líneas de prueba de si se ha especificado el número de líneas por página, o nombre de archivo en la URL, de otro modo por defecto a 10 líneas por página y "mytestdata.txt".
$ LinesPerPage = $ _GET [ "LPP"];
if ($ linesPerPage == "") $ linesPerPage = 10;
$ Archivo = $ _ GET [ 'archivo'];
si ($ archivo == "") $ archivo = "mytestdata.txt";
5 Copie las siguientes líneas y pegarlas después de "fclose ($ archivo);". Observe que los contenidos del archivo se leen en una matriz denominada "$ líneas", de la que se calcula el número total de páginas. Después extrae sólo las líneas que pertenecen a la página especificada en el "$ data" variable. El número de página se especifica en el parámetro "página" en la URL de solicitud. Vea la sección Recursos para el enlace a un ejemplo de trabajo.
$ = explotar líneas ( "\ n", $ data);
$ NumberOfPages = count ($ líneas) / $ linesPerPage;
if ($ NumberOfPages> piso ($ NumberOfPages))
$numberOfPages=floor($numberOfPages)+1;$ FromPage = $ _ [ 'page'] GET;
$ FromLine = ($ fromPage - 1) * $ linesPerPage;
$ = $ Toline fromPage * $ linesPerPage;
$ Data = "";
for ($ i = $ fromLine; $ i <$ Toline; $ i ++) {
$data=$data.$lines[$i];}
6 Copie las siguientes líneas, y pegar después de "<div id =" texto "> </ div>". Observe que esto crea una lista de números de página para la selección del usuario.
<Ul ID = "paginación">
<? Php
for ($ i = 1; $ i <= $ NumberOfPages; $ i ++) {
echo "<id = li '" $ i.. "'>" $ i "</ li>"..;
}
?>
</ Ul>
7 Copie las siguientes líneas, y pegar después de "ready $ (document) (function ()) {". Observe que el código PHP asigna a las variables de PHP las variables JavaScript.
<? Php
echo "var archivo = '" $ archivo. ".'; \ n";
echo "var = linesperpage '" $ linesPerPage. ".'; \ n";
?>
8 Copie las siguientes líneas, y pegar debajo de la línea "$ ( '# text') carga ( 'pagination.php page = 1?');".. Nótese que la función JavaScript "dispLoad ()" tiene el número de página como parámetro y utiliza ") carga (" función de la jQuery Ajax para cargar el archivo en el "texto" div. El nombre de archivo, número de página y líneas por página se especifican como parámetros en la URL de solicitud.
función dispLoad (numPag) {
. $ ( '# Text') carga ( '? Pagination.php archivo =' + nombre + '& page =' + numPag + '& LPP =' + linesperpage);
}
$ ( '# Paginación li') haga clic (function () {dispLoad (this.id);}).;
9 Copia y pega el siguiente sección de estilo dentro de la sección de cabecera del código HTML. Observe que estos cambian el diseño de los números de página de selección de usuario, por lo que ya no se muestran como puntos de bala.
<Style>
li {list-style: none; flotador izquierdo; frontera: 1px solid #eeeeee; color: # 0000aa; cursor: default; margin-right: 0px;}
</ Style>
10 Vuelva a colocar la línea "$ ( '# text') carga ( 'pagination.php page = 1?');"., Con la línea de abajo.
dispLoad (1);
11 Copiar y pegar las siguientes líneas justo después de la "función dispLoad (numPag) {". Tenga en cuenta que los primeros grises línea de todos los números de página y la segunda destaca sólo el número de la página seleccionada. Vea la sección Recursos para el enlace a un ejemplo de trabajo.
$ ( '# Paginación li') css ({ "color": "# aaaaaa '}) css ({' frontera ':' #eeeeee 1px solid '})..;
$ ( '#' + NumPag) .css ({ "color": '# 000000'}) css ({ 'frontera': '#aaaaaa 1px solid'}).;
12 Guardar pagination.php, y subirlo al directorio raíz de su servidor web, junto con mytestdata.txt y jquery-1.5.1.min.js. Escribir en el navegador "pagination.php" en su servidor web, y la prueba de que funciona.
