¿Cómo construir una paginación Ajax con jQuery y PHP

Admin Agosto 24, 2015 Internet 105 0
FONT SIZE:
fontsize_dec
fontsize_inc

Si usted necesita para mostrar piezas largas de texto, como artículos o historias en su propio sitio web, usted puede separar las páginas, utilizando el diseño de la página escrita en jQuery, Ajax y PHP. Al igual que con la mayoría de las páginas web dinámicas, el ejemplo también se aplica aquí HTML y CSS. En este artículo se supone un conocimiento básico de las lenguas implicadas, y proporciona vínculos a ejemplos de trabajo.

Descargar jquery-1.5.1.min.js (ver Recursos).

Abra el Bloc de notas y escribe los datos de prueba en el expediente. Debe haber por lo menos 20 líneas. Guarde el archivo como "mytestdata.txt" en el escritorio. Cierre el Bloc de notas.


Copia y pega el siguiente código en un archivo vacío en el Bloc de notas. Guarde el archivo como "pagination.php" en el escritorio. Tenga en cuenta que este es un auto-llamada archivo PHP. Y la evidencia de si se llama a través de Ajax. Si es así, se da salida a los contenidos de "mytestdata.txt" y se cierra. De lo contrario, ver la sección de HTML. Vea la sección Recursos para un enlace a un ejemplo práctico.

$ Nombre = "mytestdata.txt";

$ = Archivo fopen ($ archivo, "rb");

$ Datos = fread ($ archivo, tamaño del archivo ($ archivo));

fclose ($ archivo);

if ((strtolower ($ _SERVER ['HTTP_X_REQUESTED_WITH']) == 'XMLHttpRequest')

echo $ datos;

volver;

}

?>

Copie las siguientes líneas y pegarlas después de "$ archivo =" mytestdata.txt ";". Tenga en cuenta que estas líneas de evidencia para si ha especificado el número de líneas por página, o el nombre de archivo en la URL, de lo contrario el valor por defecto es de 10 líneas por página y "mytestdata.txt."

LinesPerPage = $ _ $ GET ["LPP"];

if ($ linesPerPage == "") $ linesPerPage = 10;

OBTENGA $ Nombre = $ _ ['file'];

if ($ archivo == "") $ archivo = "mytestdata.txt";

Copie las siguientes líneas y pegarlas después "fclose ($ archivo);". Tenga en cuenta que los contenidos del archivo se leen en una matriz denominada "$ líneas", que se calcula a partir del número total de páginas. Y luego extrae sólo las líneas pertenecientes a la página especificada en la variable "$ datos". El número de página se especifica en la "página" de parámetro en la petición de URL. Vea la sección Recursos para un enlace a un ejemplo práctico.

$ Lines = explode ("\ n", $ data);

$ NumberOfPages = count ($ filas)/$ linesPerPage;

if ($ NumberOfPages> piso ($ NumberOfPages))

$ NumberOfPages = baja (NumberOfPages $) 1;

FromPage = $ _ $ ['page'] GET;

FromLine = $ ($ FromPage - 1) * $ linesPerPage;

Toline $ = $ * $ FromPage linesPerPage;

$ Datos = "";

for ($ i = $ fromLine; $ i <$ Toline; ++ $ i) {

$ Date $ data = $ row [$ i].;

}

Copia y pega las siguientes líneas después de " . "Por favor, tenga en cuenta que esto crea una lista de números de página para la selección del usuario.

    for ($ i = 1; $ i <= $ NumberOfPages; ++ $ i) {

    echo " ". $ I." ";

    }

    ?>

Copia y pega las siguientes líneas después de "$ (document) .ready (function ()) {". Tenga en cuenta que el código asigna variables de las variables de PHP PHP JavaScript.

echo "var filename ="$ archivo. . "'\ N";

echo "var linesperpage ="$ linesPerPage. '.'; \ N ";

?>

Copie las siguientes líneas, y pegarla debajo de la línea "$ ('# texto") carga (página pagination.php = 1?'); .. "Tenga en cuenta que la función JavaScript" dispLoad () "toma el número de la página como parámetro y utiliza la función JQuery Ajax "load ()" para cargar el archivo en el "texto" div. El nombre del archivo, el número de líneas por página y la página se especifican como parámetros en la URL de solicitud.

función dispLoad (numPag) {

. $ ('# Text') load ('pagination.php File =' + nombre + '

}

$ ('# Paginación li'), haga clic en (function () {dispLoad (this.id);}).;

Copie y pegue el siguiente apartado del estilo en la sección de la cabeza de su código HTML. Tenga en cuenta que estos cambian el diseño de los números de página de selección de usuario, por lo que ya no aparecen como viñetas.

Reemplace la línea "$ ('# texto") carga (página pagination.php = 1?'); ". Con la línea de abajo.

dispLoad (1);

Copia y pega las siguientes líneas inmediatamente después de la "función dispLoad (numPag) {". Tenga en cuenta que la primera línea gris 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 un enlace a un ejemplo práctico.

$ ('# Paginación li') css ({"color": "# AAAAAA '}) css ({' frontera ',' #eeeeee 1px solid '}) ..;

$ ('#' + PageNumber) css ({"color": '# 000000'}). Css ({'frontera', '#aaaaaa 1px solid'});

Pagination.php guardar, y subirlo al directorio raíz del servidor web, junto con mytestdata.txt y jquery-1.5.1.min.js. Apunte su navegador a "pagination.php" en su servidor web, y la prueba de que funciona.

  Like 0   Dislike 0
Comentarios (0)
Sin comentarios

Añadir un comentario

smile smile smile smile smile smile smile smile
smile smile smile smile smile smile smile smile
smile smile smile smile smile smile smile smile
smile smile smile smile
Caracteres a la izquierda: 3000
captcha