lunes, 26 de junio de 2017

Publicado lunes, 26 de junio de 2017 por con 2 comentarios

Materialize table pagination

He desarrollado un pequeño plugin jquery para poder paginar tablas usando materializecss, es simple pero puede servirles, el código esta disponible en github.

Por el momento el plugin tiene las siguientes opciones al momento de usar:

pagerSelector:'#myPager',         the name of the materialize pager
activeColor: 'green',    color of the active page
prevText:'Anterior',    previous text
nextText:'Siguiente',             next text
showPrevNext:true,                show previous and next buttons 
hidePageNumbers:false,            hide page numbers
perPage:10     number of rows to show
Para usarlo es necesario importar todas las dependencias css y javascript

<!--Import Google Icon Font-->
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<!--Import materialize.css-->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.98.2/css/materialize.min.css">
<!--Import jquery.css-->
<script type="text/javascript" src="https://code.jquery.com/jquery-2.1.1.min.js"></script>
<!--Import materialize.js-->
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.98.2/js/materialize.min.js"></script>
<!--Import pagination.js this is the plugin-->
<script type="text/javascript" src="js/pagination.js"></script>
luego teniendo una tabla html y un pager de materializecss se inicializa la paginacion con:

$(document).ready(function(){
 $('#myTable').pageMe({
   pagerSelector:'#myPager',
   activeColor: 'green',
   prevText:'Anterior',
   nextText:'Siguiente',
   showPrevNext:true,
   hidePageNumbers:false,
   perPage:10
 });
});
El codigo esta disponible en GITHUB

Demo


See the Pen Materialize css table pagination by Juan Pinzón (@juan1992) on CodePen.

      edit

2 comentarios:

  1. Gracias hermano, por el recurso. Muy útil para una implementación sencilla y rápida. Solo resaltar que si sale error (verlo en console) en la línea 28 de pagination.js es porque el método .size() está en desuso a partir de jQuery 1.8. Use la propiedad .length en su lugar.

    ResponderBorrar
  2. amigo una pregunta como le hago para que me muestre registros < 1 2 ... 10 > y no tantos <1 2 3 4 5 6 7 8 9 10 11 12 13 14 15> una idea?

    ResponderBorrar