jueves, 8 de agosto de 2013

Datatables – filtrar datos en tabla html

Hola, les comparto un ejemplo de filtrado en tablas HTML que estoy usando en un proyecto en mi trabajo, es fácil de usar, mas fácil de lo que parece y de lo que pensé que sería. (ver demo)






Al inicio pensé que tendría que hacer consultas a la base de datos por cada búsqueda, pero con está herramienta se logra fácilmente sin tanto rollo, pueden ver un ejemplo aquí, donde encuentran la información completa del resto de las características es en datatables.net , abajo dejo un link a la descarga de un ejemplo, saludos





uno

Llamar a los archivos js y css correspondientes en <head>, suponiendo que ya llamamos al archivo jquery.js:

<link rel="stylesheet" href="css/datatable.css"/>
<script src="js/jquery-datatable.js"></script>

dos 

Crear una tabla cualquiera en HTML

tres


En el tag table asignarle un id, en el caso del ejemplo queda así… <table id="example">

cuatro

Antes de tag </body> poner lo siguiente

<script type="text/javascript">
//para buscar en las tablas
$(document).ready(function() {
   $('#example').dataTable( {
       "bPaginate": true,
       "bLengthChange": true,
       "bFilter": true,
       "bSort": true,
       "bInfo": true,
       "bAutoWidth": true
   } );
} );
</script>

Podemos desactivar algunas características, por ejemplo, si no queremos paginación podemos eliminarla

cambiamos 

"bPaginate": true,

por

"bPaginate": false,



No hay comentarios:

Publicar un comentario