Materialize table pagination plugin

He desarrollado un pequeño plugin en jquery (materialize table pagination) para 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 paginación 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.

Entradas creadas 12

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

Publicaciones relacionadas

Comienza escribiendo tu búsqueda y pulsa enter para buscar. Presiona ESC para cancelar.

Volver arriba