Transcript
4/4/2017 Gestionando tablas dinámicas con el plugin Datatables de Jquery - Solvetichttps://www.solvetic.com/tutoriales/article/1469-gestionando-tablas-din%C3%A1micas-con-el-plugin-datatables-de-jquery/ 1/9 Buscar soluciones... Todas las soluciones tecnológicas a un click! PORTADAARTICULOSTUTORIALESREVIEWS Solvetic Tutoriales Desarrollo JavaScript Gestionando tablas dinámicas con el plugin Datatables de Jquery Gestionando tablas dinámicas con el pluginDatatables de Jquery Datatables es un plugin de la biblioteca del framework jQuer y. Es una herramienta que nos permitirá añadir funcionalidades a tablas html para manipular datos y añadirá controles de para reali zar muchas operaciones avanzadas para cualquier tabla HTML. Escrito por Sergio Culoccioni el feb 19 2015 11:40 Se puede utilizar tanto en tablas generadas con html o con cualquier lenguaje de programación como php o asp.net, debido a que Jquery es un framework programado en Javascript es multiplataforma y compatible con la mayoría de los navegadores. Algunas de las funcionalidades que implementa este plugin son las siguientes: Ordenar alfabéticamente o numéricamente columnas de datos de la tabla html.Paginar resultados con números de paginasFiltrar cada columna por algún criterioBúscar datos dentro de una columna especifica Para poder utilizar este plugin deberemos descargarlo desde la siguiente página:https://datatables.net/download/indexPara utilizar debemos invocar en las etiquetas <head> de nuestra web la librería y el framework jquery de la siguiente manera:Vamos a hacer el siguinete ejemplo una tabla con datos de clientes y pedidos: jquery javascript html bbdd <script type= text/javascript language= javascript src= jquery.js ></script> <script type= text/javascript language= javascript src= jquery.dataTables.js ></script> <!DOCTYPE html PUBLIC ‐//W3C//DTD XHTML 1.0 Transitional//EN http://www.w3.org/TR/xhtml1/DTD/xhtm <html xmlns= http://www.w3.org/1999/xhtml > <head><meta http‐equiv= Content‐Type content= text/html; charset=windows‐1252 /> <title> Documento sin título </title><script type= text/javascript language= javascript src= jquery.js ></script> <script type= text/javascript language= javascript src= jquery.dataTables.js ></script><link rel= stylesheet type= text/css href= jquery.dataTables.css media= screen /> </head> <body><table id= Jtabla cellpadding= 0 cellspacing= 0 border= 0 class= display > <thead><tr> VOTA INFORMACIÓN Publicado feb 19 2015 11:40 Visitas 22549 Nivel Profesional POPULARES DE LA SEMANA 5 100% 4 0% 3 0% 2 0% 1 0% EFECTO ENVEJECER UNA IMAGEN COPHOTOSHOP DE FORMA FÁCIL SOLVETIC DISEÑO - 31 MAR 2017 FUNCIÓN COUNTIF: CÓMO CONTARTIPOS DE CELDAS EXCEL 2016 SOLVETIC - 31 MAR 2017 CÓMO BLOQUEAR PANTALLA ENMACOS SIERRA SOLVETIC - 31 MAR 2017 CÓMO CONVERTIR FILA A COLUMNA PORTADAARTICULOSTUTORIALESREVIEWS IDENTIFICARSE CREAR CUENTA 4/4/2017 Gestionando tablas dinámicas con el plugin Datatables de Jquery - Solvetichttps://www.solvetic.com/tutoriales/article/1469-gestionando-tablas-din%C3%A1micas-con-el-plugin-datatables-de-jquery/ 2/9 <th width= 58 align= left > Codigo </th><th width= 274 align= left > Cliente </th> <th width= 124 align= left > Nota Pedido </th><th width= 119 align= left > Estado Pedido </th> <th width= 103 align= left > Importe </th></tr> </thead><tbody> <tr> <td> 1001 </td> <td> Carlos Alcantara </td><td> 1203 </td> <td> Enviado </td><td class= center > 1000 </td> </tr><tr class= gradeC > <td> 1002 </td><td> Jose Albertez </td> <td> 1204 </td><td> Pendiente </td> <td class= center > 500 </td></tr> <tr class= gradeA > <td> 1003 </td> <td> Carriles SL </td><td> 1345 </td> <td> En Proceso </td><td class= center > 2500 </td> </tr><tr class= gradeA > <td> 1004 </td><td> Maria Pado </td> <td> 1320 </td><td> Enviado </td> <td class= center > 350 </td></tr> <tr class= gradeA > <td> 1018 </td> <td> Alina Sereno </td> <td> 1358 </td> <td> Enviado </td> <td class= center > 50 </td> </tr></table> <script> $(document).ready( function (){ $('#Jtabla'). DataTable (); VICEVERSA EN EXCEL 2016 SOLVETIC SISTEMAS - AYER, 11:08 CÓMO FALSIFICAR UBICACIÓN ENNAVEGADOR EDGE Y CHROME SOLVETIC - 30 MAR 2017 DESHABILITAR PROGRAMAS DE INICIARRANQUE WINDOWS 10, 8, 7 SOLVETIC SISTEMAS - 28 MAR 2017 CÓMO PERSONALIZAR Y OCULTARBARRA DE TAREAS WINDOWS 10 SOLVETIC - 31 MAR 2017 DIFERENTES FORMAS DE ACTUALIZAA WINDOWS 10 CREATORS UPDATE SOLVETIC SISTEMAS - 30 MAR 2017 PORTADAARTICULOSTUTORIALESREVIEWS IDENTIFICARSE CREAR CUENTA 4/4/2017 Gestionando tablas dinámicas con el plugin Datatables de Jquery - Solvetichttps://www.solvetic.com/tutoriales/article/1469-gestionando-tablas-din%C3%A1micas-con-el-plugin-datatables-de-jquery/ 3/9 Alfinal de la tabla añadimos el código jquery que creara la funcionalidad para filtro y paginación invocamos con el identificador de latabla a la que queremos aplicar el plugin datatable en este caso con:El resultado será el siguiente:La paginación por defecto mostrará los registros de 10 por página, desde el campo buscar Search podremos filtrar cualquier columnade la tabla.Si quisieramos ver solo los pedidos Pendiente podemos escribir en el campo de búsqueda una parte de la palabra Pen y el listadose ordenara basado en las palabras que tengan esas letras, de esta manera la haremos para cualquier columna que queramosordenar. Para ordenar las columnas debemos añadir la definición de columnas para determinar que columnas pueden ser ordenadas y de quemanera los parámetros 0 ascendente y 1 descendentePara ello modificamos el script por el siguiente que indicara targets que es el numero de columna y orderdata que dondeindicaremos el numero de columna y el tipo de ordenamiento. Ordenaremos código de cliente Ascendente, Nombre del clientedescendente y estado de pedido descendente. }); </script> </body></html> $('#Jtabla'). DataTable (); <script> $(document).ready( function (){ $('#Jtabla'). DataTable ({ columnDefs: [ { targets: [ 0 ], orderData: [ 0, 1 ] }, { targets: [ 1 ], orderData: [ 1, 0 ] }, { targets: [3 ], PORTADAARTICULOSTUTORIALESREVIEWS IDENTIFICARSE CREAR CUENTA 4/4/2017 Gestionando tablas dinámicas con el plugin Datatables de Jquery - Solvetichttps://www.solvetic.com/tutoriales/article/1469-gestionando-tablas-din%C3%A1micas-con-el-plugin-datatables-de-jquery/ 4/9 Así haciendo clic en cada nombre de columna podremos ordenar el listado, inclusive si ha sido filtrado previamente.Muchas veces al tener grandes volúmenes de datos necesitamos visitar varias pagina para comparar datos o ver alguna informaciónlo que hace que se pierda el filtro , Datatable tiene una opción para guardar el estado actual ya sea la paginación, el orden o el filtroque aplicamos de manera que se pueden restaurar cuando el usuario vuelve a cargar una página, esta opción se habilita mediante elcomando stateSave. Paginación de resultados con Datatable La paginación presenta una serie de controles por defecto hacia adelante y hacia atrás y con numeros de pagina, además tiene tresopciones simple: muestra solo los botones anterior y siguiente simple_numbers: muestra los botones anterior, siguiente y los números de paginas full: muestra todos los controles.Un aspecto que también podemos manejar con este plugin es el idioma. Podemos traducir los controles por defecto de la tabla,dentro de datatable.js encontramos las referencias de cada control para poder realizar la traducción como por ejemplo: orderData: [ 3, 0 ] } ] } ); }); </script><script> $(document).ready( function () { $('#Jtabla').dataTable( { stateSave: true } ); } ); </script> </body><script> $(document).ready( function () { $('#Jtabla').dataTable( { language : { lengthMenu : Mostrar _MENU_ registros por pagina , zeroRecords : No se encontraron registros , info : Página _PAGE_ of _PAGES_ , infoEmpty : No hay registros PORTADAARTICULOSTUTORIALESREVIEWS IDENTIFICARSE CREAR CUENTA