simple - pagination javascript

Cómo usar el jQuery de SimplePagination (6)

Estoy tratando de usar simplePagination en mi código. (Estoy desarrollando usando MVC4 C #)

Digamos que tengo este montón de códigos.

<table> <thead> <tr> <td><input type="checkbox" name="select-all" id="select-all" /></td> <td style="text-align: left">Name</td> <td style="text-align: left">Created By</td> <td style="text-align: left">Created Date</td> </tr> </thead> <tbody> <tr class="post"> <td><p><input Length="0" name="314" type="checkbox" value="true" /><input name="314" type="hidden" value="false" /></p></td> <td>Window</td> <td>John</td> <td>01/01/2014 12:00:00 AM</td> </tr> <tr class="post"> <td><p><input Length="0" name="314" type="checkbox" value="true" /><input name="314" type="hidden" value="false" /></p></td> <td>Door</td> <td>Chris</td> <td>01/01/2014 12:00:00 AM</td> </tr> <tr class="post"> <td><p><input Length="0" name="314" type="checkbox" value="true" /><input name="314" type="hidden" value="false" /></p></td> <td>Floor</td> <td>Michael</td> <td>01/01/2014 12:00:00 AM</td> </tr> <tr class="post"> <td><p><input Length="0" name="314" type="checkbox" value="true" /><input name="314" type="hidden" value="false" /></p></td> <td>Car</td> <td>James</td> <td>01/01/2014 12:00:00 AM</td> </tr> <tr class="post"> <td><p><input Length="0" name="314" type="checkbox" value="true" /><input name="314" type="hidden" value="false" /></p></td> <td>Bike</td> <td>Steven</td> <td>01/01/2014 12:00:00 AM</td> </tr> </tbody> </table>

* Nota: En el código anterior agrego la clase ''post'' a cada ''tr'' (fila en el cuerpo de la tabla). Y estas filas son generadas dinámicamente por for loop (C #)

Y desde la documentación, si quiero usar simplePagination , tengo que declarar el jQuery así:

$(function() { $(selector).pagination({ items: 100, itemsOnPage: 10, cssStyle: ''light-theme'' }); });

En realidad no estoy muy seguro de cómo usar (* cómo llamar) esta simplePagination . Es mi primera vez tratando con la paginación.

Ya intenté poner este código después de la mesa.

<div class="pagination-page"></div>

Y cambie ''Selector'' dentro del método de llamada jquery con ''.pagination-page'', pero no funcionó.

$(function() { $(''.pagination-page'').pagination({ items: 100, itemsOnPage: 10, cssStyle: ''light-theme'' }); });

¿Debo reemplazar ''Selector'' con un nombre de clase? Si es así, ¿cómo hago eso?
En segundo lugar, ¿cómo declaro esta simplePagination para que muestre solo 2 filas (solo 2 clases ''Publicar'') para cada página?

* Significa que en la primera página solo se mostrará.

+--------------------------------------------------+ | [] | Name | CreatedBy | CreatedDate | |--------------------------------------------------| | [] | Window | John | 01/01/2014 12:00:00 AM | | [] | Door | Chris | 01/01/2014 12:00:00 AM | +--------------------------------------------------+

La segunda página mostrará

+--------------------------------------------------+ | [] | Name | CreatedBy | CreatedDate | |--------------------------------------------------| | [] | Floor | Michael | 01/01/2014 12:00:00 AM | | [] | Car | James | 01/01/2014 12:00:00 AM | +--------------------------------------------------+

Pronto..

* Nota: No estoy seguro de cómo este jQuery detectará cuántos elementos tenemos y generará el número de páginas y los ubicará en consecuencia.

He convertido el trabajo de Bilal Akil en una función y lo he llamado a ajax cuando estoy cargando datos mediante una llamada ajax. Funciona impresionante Gracias a todos los participantes.

}

He probado el jQuery (función ($) de Bilal Akil) y encontré un error que me gustaría corregir, y le agradezco a Bilal su participación en este tema.

Como no puedo publicar un comentario o sugerir una edición de su publicación, publicaré mi respuesta directamente aquí. Para más información mira la publicación de Bilal Akil.

El selector de paginación estaba equivocado (no es el mismo en realidad) en el código que lo probé en un sitio web, así que decidí editar su publicación y, por cierto, agregué 2 variables para asegurar la flexibilidad para futuros cambios o personalización propia.

// mind the slight change below, personal idea of best practices jQuery(function($) { // consider adding an id to your table, // just incase a second table ever enters the picture..? var items = $("table tbody tr"); var numItems = items.length; var perPage = 2; var pagination_placeholder_selector = ".pagination-page"; // put in a variable to ensure proper changes in the future var myPageName = "#page-"; // a number will follow for each page // only show the first 2 (or "first per_page") items initially items.slice(perPage).hide(); // now setup your pagination // you need that .pagination-page div before/after your table $(pagination_placeholder_selector).pagination({ items: numItems, itemsOnPage: perPage, cssStyle: "light-theme", hrefTextPrefix: myPageName, onPageClick: function(pageNumber) { // this is where the magic happens // someone changed page, lets hide/show trs appropriately var showFrom = perPage * (pageNumber - 1); var showTo = showFrom + perPage; items.hide() // first hide everything, then show for the new page .slice(showFrom, showTo).show(); } }); // EDIT: extra stuff to cover url fragments (i.e. #page-3) // https://github.com/bilalakil/bin/tree/master/simplepagination/page-fragment // is more thoroughly commented (to explain the regular expression) // we''ll create a function to check the url fragment and change page // we''re storing this function in a variable so we can reuse it var checkFragment = function() { // if there''s no hash, make sure we go to page 1 var hash = window.location.hash || (myPageName+"1"); // we''ll use regex to check the hash string var re = new RegExp("^"+myPageName+"(//d+)$"); hash = hash.match(re); if(hash) // the selectPage function is described in the documentation // we''ve captured the page number in a regex group: (/d+) $(pagination_placeholder_selector).pagination("selectPage", parseInt(hash[1])); }; // we''ll call this function whenever the back/forward is pressed $(window).bind("popstate", checkFragment); // and we''ll also call it to check right now! checkFragment(); });

Ok, he probado jQuery de Bilal Akil (función ($) y fue un buen comienzo para mí --- gracias Bilal. Funciona, pero con algunas deficiencias. Para empezar, si vas a su primer enlace y haces clic en una página 2, entonces ese número aparece en el cuadro de ubicación como " http://bilalakil.github.io/bin/simplepagination/#page-2 " --- en # page-2. Pero si copia esa URL completa y la pega en el cuadro de ubicación de otra pestaña o ventana para simular que alguien se vincula a la página 2, entonces no funciona, se encontrará en la página 1. O después de hacer clic en el botón de la página 2 y de ir a la página 2, puede simplemente recargue la página; se encontrará en la página 1.

Habría comentado pero necesito dejar algo de código aquí. Aquí está mi jQuery modificado (función ($) con la solución de ese problema en particular:

var items = $("#content .page"); var numItems = items.length; var hashPageNum = getPageNum(); //code for getPageNum() is below items.hide().slice(hashPageNum-1, hashPageNum).show(); // now setup pagination $("#pagination").pagination({ items: numItems, itemsOnPage: 1, cssStyle: "light-theme", onPageClick: function(pageNumber) { items.hide().slice(pageNumber-1, pageNumber).show(); } }); $(''#pagination'').pagination(''drawPage'', hashPageNum);

Debería haber precedido esto diciendo que el esquema de selección que estoy usando para los elementos de la página es el siguiente:

<div id="pagination"></div> <table id="content"><tbody><tr class="page"><td>...

Y estoy usando solo perPage = 1, uno <tr> por página, pero la diferencia esencial es esta línea:

items.hide().slice(hashPageNum-1, hashPageNum).show();

Es la solución principal para ese problema acerca de los enlaces con # page-n en el extremo que no funciona. La última línea también es necesaria para ese propósito, ya que establece la barra de paginación con la página n mostrada seleccionada.

El segundo problema es la disfunción total de los botones de avance y retroceso con el código desnudo de Bilal. Si coloca la barra de paginación en la parte inferior de una página larga, seguramente los lectores querrán utilizar la navegación de la página integrada del navegador. EDIT: Bilal ha actualizado su código para eliminar estos problemas.

Así que aquí hay una función que tiene un detalle esencial hacia ese fin. Se llama en el código anterior pero también en otro lugar:

function getPageNum(){ var hashtag = parent.location.hash; var hashPageNum = 1; //default if (hashtag == ''#page-1'') { hashPageNum=1; } else if (hashtag == ''#page-2''){ hashPageNum=2; } else if (hashtag == ''#page-3'') { hashPageNum=3; } else if (hashtag == '''') { hashPageNum=1; parent.location.hash = ''#page-1''; }; return hashPageNum; };

Bien, entiendo que no he sido sofisticado, pero el detalle esencial es que si parent.location.hash es nulo, la función devuelve 1, para la página 1, no nula.

Ahora hay un paso más, y eso es armar window.onpopstate, que es una cosa de HTML5 (espero que esto no cause un problema con los navegadores que no son html5 ... comente si sabe todo sobre eso):

window.onpopstate = function(e){ var pagenum = getPageNum(); $("#content .page").hide().slice(pagenum-1, pagenum).show(); $(''#pagination'').pagination(''drawPage'', pagenum); };

Y con eso parezco estar hecho. Puedo copiar las URL con los sufijos # page-n y lanzarlos en otros lugares y funcionan. Los botones de avance y retroceso funcionan. Tenga en cuenta que el bit ''drawPage "en el código inmediatamente anterior es simplemente para ajustar la indicación en la barra de paginación.

Bien, esta es una edición el 16/2/2015 ... para mostrar una solución para el problema de IE11 que se analiza en los comentarios. No edité el código anterior porque tal vez no querrás hacer la corrección de esta manera, aunque parece que funciona.

Primero, vaya a este proyecto github y luego escriba "t" para los archivos (¡ja!) Y haga clic en history.min.js y luego en el botón Sin formato y haga un SaveAs en su navegador. Así que usarás esa biblioteca de JavaScript que crea eventos de estado pop (y otros eventos) para los navegadores que no los generan.

Ahora, en el código anterior, elimine window.onpopstate = function (e) {} pero guarde su bloque de código e insértelo al final de jQuery (function ($), justo después de $ (''# pagination''). Pagination ( ''drawPage'', hashPageNum) ;, como sigue:

$(window).on(''popstate'', function(e) { var pagenum = getPageNum(); $("#content .page").hide().slice(pagenum-1, pagenum).show(); $(''#pagination'').pagination(''drawPage'', pagenum); });

EDITAR Tengo que agregar que si coloca un enlace a una de sus páginas así paginadas en su sitio --- por ejemplo, su página de inicio probablemente tenga anclas en el menú que van a algunas de sus páginas paginadas --- entonces si ponga target = "_ blank" en el enlace y para la página href www.yourdomain.com/yourpaginatedpage, todo estará bien. Estará bien porque no intentará usar la flecha de retroceso de su navegador para volver a su página de inicio ya que la página paginada se abrirá como una nueva pestaña o nueva ventana.

Pero ... si deja fuera el target = "_ blank" y abre la página paginada en la misma ventana, verá que el botón Atrás no funciona. El historial está ahí para ver cuando presiona la flecha hacia atrás (en realidad está mal, ya que hay dos listas de la página de su página), pero ninguna cantidad de clics en la flecha hará que funcione.

La cura es simplemente poner www.yourdomain.com/yourpaginatedpage#page-1 como su href ... con el # page-1. Entonces la flecha hacia atrás funcionará.

Primero agregue:

<script type="text/javascript" src="mio_path_js/jquery.js"></script> <script type="text/javascript" src="mio_path_js/jquery.simplePagination.js"></script> <link type="text/css" rel="stylesheet" href="mio_path_css/simplePagination.css"/>

Y después, por 10 elementos llamar a la función Ajax como:

$(function() { $(#id_paginator").pagination({ items: 100, itemsOnPage: 10, cssStyle: ''light-theme'' }); });

O si quieres cargar todo el elemento:

$ .ajax ({...... ...... success: function (response, status, xhr) {jQuery (function ($) {var pageParts = $ (". paginate"); var numPages = countSelect ; var perPage = 10; pageParts.slice (perPage) .hide ();

$("#page-nav").pagination({ items: numPages, itemsOnPage: perPage, cssStyle: "light-theme", currentPage: numeroSelezionato, onPageClick: function(pageNum) { $("#myModalWaiting").show(); var start = perPage * (pageNum - 1); var end = start + perPage; cambiaPagina(start,end,pageNum); numeroSelezionato = pageNum; } }); }); }

)};

El código html es:

<table> <tr> <th> <td> ............ ............... ................. </td> </th> </tr></table> <div id="id_paginator"></div>

Para otros ejemplos de Jquery simplePagination vea here .

O para cargar más elementos: https://lentux-informatica.com/paginazione-liste-con-jquery-parte-2-2-simplepagination-js/

Siguiendo el código de trabajo para mí:

Llama a esta función después de preparar tu tabla HTML.

Una cosa a tener en cuenta acerca de este complemento, que algunas personas pueden confundirse, es que técnicamente no implementa la paginación en sí. Genera un navegador de página y proporciona los medios, a través de los eventos jQuery, para simplemente conectarlo a nuestra propia funcionalidad de paginación.

Suponiendo que haya seguido los pasos 1 (y 2 si desea el estilo CSS) requeridos desde el enlace simplePagination que incluyó en su pregunta, la siguiente jQuery hará lo que necesite:

jQuery(function($) { // Consider adding an ID to your table // incase a second table ever enters the picture. var items = $("table tbody tr"); var numItems = items.length; var perPage = 2; // Only show the first 2 (or first `per_page`) items initially. items.slice(perPage).hide(); // Now setup the pagination using the `.pagination-page` div. $(".pagination-page").pagination({ items: numItems, itemsOnPage: perPage, cssStyle: "light-theme", // This is the actual page changing functionality. onPageClick: function(pageNumber) { // We need to show and hide `tr`s appropriately. var showFrom = perPage * (pageNumber - 1); var showTo = showFrom + perPage; // We''ll first hide everything... items.hide() // ... and then only show the appropriate rows. .slice(showFrom, showTo).show(); } }); // EDIT: Let''s cover URL fragments (i.e. #page-3 in the URL). // More thoroughly explained (including the regular expression) in: // https://github.com/bilalakil/bin/tree/master/simplepagination/page-fragment/index.html // We''ll create a function to check the URL fragment // and trigger a change of page accordingly. function checkFragment() { // If there''s no hash, treat it like page 1. var hash = window.location.hash || "#page-1"; // We''ll use a regular expression to check the hash string. hash = hash.match(/^#page-(/d+)$/); if(hash) { // The `selectPage` function is described in the documentation. // We''ve captured the page number in a regex group: `(/d+)`. $(".pagination-page").pagination("selectPage", parseInt(hash[1])); } }; // We''ll call this function whenever back/forward is pressed... $(window).bind("popstate", checkFragment); // ... and we''ll also call it when the page has loaded // (which is right now). checkFragment(); });

Puede encontrar un ejemplo de ejecución here , y una guía más completa sobre simplePagination here si desea comprender más a fondo cómo funciona todo esto.

EDITAR: Se agregó una sección de código para manejar los fragmentos de URL (en la recarga y en la parte posterior / posterior) cuando Mike O''Connor destacó la necesidad de Puedes ver un ejemplo en vivo del manejo de fragmentos de URL here .

EDIT 2: si necesita compatibilidad con varios navegadores para la actualización del fragmento de avance / avance (es decir, IE11 ...), incluya el script History.js antes de implementar el código anterior. Gracias a Mike O''Connor por eso :)

EDIT 3: si está agregando o eliminando dinámicamente el contenido, deberá actualizar manualmente el paginador para reflejar estos cambios. También he dado un ejemplo para eso. Puedes verlo corriendo here .