cómo hacer que este plugin de pagination jquery funcione correctamente

He intentado que este plugin de pagination jQuery funcione. Por alguna razón, no funciona y realmente no estoy seguro de por qué.

<!doctype html> <html> <head> <link rel="stylesheet" href="css/simplePagination.css" type="text/css" /> <script type="text/javascript" src="js/jquery.min.js"></script> <script type="text/javascript" src="js/jquery.simplePagination.js"></script> </head> <body> <div id="selector"> <ul class="selector"> <li> <p>One</p> </li> <li> <p>Two</p> </li> <li> <p>Three</p> </li> <li> <p>Four</p> </li> <li> <p>Five</p> </li> <li> <p>Six</p> </li> <li> <p>Seven</p> </li> <li> <p>Eight</p> </li> </ul> </div> <script language="javascript"> $(function() { $(selector).pagination({ items: 8, itemsOnPage: 1, cssStyle: 'light-theme' }); }); </script> </body> </html> 

Se muestran los botones para las páginas, pero el contenido se ha ido. ¿Qué estoy haciendo mal?

Aquí hay una demostración: http://jsbin.com/obacig/1/edit

He tenido exactamente el mismo problema. Después de mirar la documentation, parece que la herramienta es, literalmente, solo para renderizar la herramienta de pagination y debemos cuidarnos de cómo unimos los datos.

antes que nada, no necesitas nada dentro del selector div, que es donde aparecen los controles de pagination:

así que déjalo vacío y haz que tu contenido se sitúe sobre él en párrafos o lo que sea:

 <p class="selection" id="page-1">one</p> <p class="selection" id="page-2">Two</p> <p class="selection" id="page-3">Three</p> <p class="selection" id="page-4">Four</p> <p class="selection" id="page-5">Five</p> <p class="selection" id="page-6">Six</p> <p class="selection" id="page-7">Seven</p> <p class="selection" id="page-8">Eight</p> <div id="selector"> </div> 

Si trabajas con datos dynamics, deberías generar los identificadores al vuelo

luego, debajo de eso, justo antes de la label de cierre del cuerpo, necesitas este script:

 <script language="javascript"> $(function() { $('#selector').pagination({ items: 10, itemsOnPage: 2, cssStyle: 'compact-theme', onPageClick: function(pageNumber){test(pageNumber)} }); }); </script> 

aviso He agregado la function onPageClick (necesita cambiar el nombre) que pasará el número de página a mi function.

Lo tengo en mi sección de encabezado:

 <style type="text/css"> .selection { display: none; } </style> <script> function test(pageNumber) { var page="#page-"+pageNumber; $('.selection').hide() $(page).show() } </script> </head> 

El css originalmente los oculta a todos por class, luego la function cierra cualquiera que esté abierta actualmente y abre la que desea por id.

parece funcionar bien ahora, pero fue muy frustrante 🙂

aquí está todo el guión:

 <!doctype html> <html> <head> <script src="http://code.jquery.com/jquery-1.9.1.min.js"></script> <script src="pager.js"></script> <link href="style.css" rel="stylesheet" type="text/css" /> <style type="text/css"> .selection { display: none; } </style> <script> function test(pageNumber) { var page="#page-"+pageNumber; $('.selection').hide() $(page).show() } </script> </head> <body> <p class="selection" id="page-1">one</p> <p class="selection" id="page-2">Two</p> <p class="selection" id="page-3">Three</p> <p class="selection" id="page-4">Four</p> <p class="selection" id="page-5">Five</p> <p class="selection" id="page-6">Six</p> <p class="selection" id="page-7">Seven</p> <p class="selection" id="page-8">Eight</p> <div id="selector"> </div> <script language="javascript"> $(function() { $('#selector').pagination({ items: 10, itemsOnPage: 2, cssStyle: 'compact-theme', onPageClick: function(pageNumber){test(pageNumber)} }); }); </script> </body> </html> 

D.Mac tuvo una gran respuesta, pero si la implementa, no muestra la primera página automáticamente, solo cuando se hace clic en otra página y luego se vuelve a una.

así que agregué esta pequeña function para asegurarme de que la pagination se inicie en la primera página

 function pageOne() { var page_1 = "#page-1"; $('.selection').hide() $(page_1).show() } <script language="javascript"> $(function() { $('#selector').pagination({ items: 10, itemsOnPage: 2, cssStyle: 'compact-theme', currentPage: 1, onPageClick: function(pageNumber){test(pageNumber)}, onInit: function(){pageOne()}, }); }); </script> 

Han pasado tres años desde que se publicó esta pregunta. Puede encontrar una mejor respuesta en esta página de 2014 stackoverflow . En particular, eche un vistazo a la respuesta de Bilal Akil, y mi propia contribución que está directamente debajo de la suya.

Yo también había sido completamente confundido por cómo usar simplepagination.js y Bill (Bilal) me mostró el path. Su artículo web debería ser el truco para ti, pero la versión simple que coloqué en ese artículo de 2014 stackoverflow es la que todavía estoy usando y todavía funciona.

Si usa esa versión, o posiblemente la versión revisada actual de Bill, siempre debe colocar # page-n en cualquier enlace URL que coloque en su propio website en su propia página, a less que tenga target = "_ blank" implementado — aunque dejarlo desactivado, los usuarios llegarán a la página (la necesidad de ayudar a que funcione el button de navigation trasera). Esto se explica en mi respuesta en el artículo de 2014.

Por el lado chistoso, encontré la página en la que nos encontramos ahora, buscando ahora una solución al problema del button de navigation trasera, que acabo de encontrar durante una revisión actual del sitio. ¡Encontré la respuesta en mi propia respuesta de 2014! Había olvidado ese detalle.

$ (selector) debe ser $ ("# selector")

para seleccionar ID en jquery necesitas una label hash

Creé y compartí mi propio plugin de pagination mobile jquery para un proyecto que necesitaba una simple list paginada. Básicamente, el complemento agrega un button "Mostrar más" al final de la list y puede configurar los elementos "por página" que se devolverán a través de una llamada Ajax. Por supuesto, tendrá que enganchar el desplazamiento y limitar el lado del server, pero, en general, creo que es bastante directo y útil. Pruébalo http://listomatic.stakbit.com/