Preview only show first 10 pages with watermark. For full document please download

Gestionando Tablas Dinámicas Con El Plugin Datatables De Jquery - Solvetic

Jquery Tblas dinamicas

   EMBED


Share

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&iacute;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&aacutegina _PAGE_ of _PAGES_ ,   infoEmpty :  No hay registros     PORTADAARTICULOSTUTORIALESREVIEWS      IDENTIFICARSE     CREAR CUENTA