Revista Comunicación

¿Los artículos de tu blog publicados aquí? ¡Propón tu blog!


Filtrar columnas en jQuery DataTables

Publicado el 09 julio 2014 por Marcostrfn @bajolinux

Ya hemos hablado antes de jQuery dataTables.  En este artículo vamos a ver como realizar el filtrado de datos de las columnas creadas en nuestras dataTables.

El dataTable

Lo primero que necesitamos es crear la tabla. Para este ejemplo vamos a usar un dataTable creado directamente en html, para una mayor claridad en nuestro ejemplo.

¿Que necesitamos?

Básicamente, incluir en nuestra página los script necesarios, que son:

  • jQuery
  • jQuery dataTables
  • jquery dataTables Column Filter (necesario para crear el filtrado)

Todos estos script junto a css, etc, están en el ejemplo de descarga al final de este artículo.

Una vez tenemos estos script, vamos a crear una página Html con el siguiente código:

  1. <!doctype html>
  2. <html lang="es">
  3. <head>
  4. <meta charset="utf-8">
  5. <title>Bajolinux - Ejemplo datatables</title>
  6. <meta name="description" content="bajolinux - ejemplo datatables">
  7. <meta name="author" content="http://bajolinux.com">
  8. <link rel="stylesheet" href="css/styles.css">
  9. <link rel="stylesheet" href="css/demo_table.css">
  10. <!--[if lt IE 9]>
  11. <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
  12. <![endif]-->
  13. </head>
  14. <body>
  15. <table id="example" class="display" cellspacing="0" width="100%">
  16. <thead>
  17. <tr>
  18. <th>Name</th>
  19. <th>Position</th>
  20. <th>Office</th>
  21. <th>Age</th>
  22. <th>Start date</th>
  23. <th>Salary</th>
  24. </tr>
  25. </thead>
  26. <tfoot>
  27. <tr>
  28. <th>Name</th>
  29. <th>Position</th>
  30. <th>Office</th>
  31. <th>Age</th>
  32. <th>Start date</th>
  33. <th>Salary</th>
  34. </tr>
  35. </tfoot>
  36. <tbody>
  37. <tr>
  38. <td>Tiger Nixon</td>
  39. <td>System Architect</td>
  40. <td>Edinburgh</td>
  41. <td>61</td>
  42. <td>2011/04/25</td>
  43. <td>320</td>
  44. </tr>
  45. <tr>
  46. <td>Garrett Winters</td>
  47. <td>Accountant</td>
  48. <td>Tokyo</td>
  49. <td>63</td>
  50. <td>2011/07/25</td>
  51. <td>170</td>
  52. </tr>
  53. <tr>
  54. <td>Ashton Cox</td>
  55. <td>Junior Technical Author</td>
  56. <td>San Francisco</td>
  57. <td>66</td>
  58. <td>2009/01/12</td>
  59. <td>860</td>
  60. </tr>
  61. <tr>
  62. <td>Cedric Kelly</td>
  63. <td>Senior Javascript Developer</td>
  64. <td>Edinburgh</td>
  65. <td>22</td>
  66. <td>2012/03/29</td>
  67. <td>433</td>
  68. </tr>
  69. <tr>
  70. <td>Charde Marshall</td>
  71. <td>Regional Director</td>
  72. <td>San Francisco</td>
  73. <td>36</td>
  74. <td>2008/10/16</td>
  75. <td>470</td>
  76. </tr>
  77. </tbody>
  78. </table>
  79. <script src="js/jquery-1.4.4.min.js"></script>
  80. <script src="js/jquery.dataTables.js"></script>
  81. <script src="js/jquery.dataTables.columnFilter.js"></script>
  82. <script src="js/script.js"></script>
  83. </body>
  84. </html>

Entre los archivos incluidos está el javascript script.js.

Este archivo contiene el código que usaremos para crear el filtrado de columnas.

Para crear un filtrado por columna que añada al final de nuestro dataTable las cajas de texto necesarias para realizar el filtrado, el archivo script.js tendrá el siguiente contenido:

  1. $(document).ready(function() {
  2. $('#example').dataTable().columnFilter();
  3. } );

Tan sencillo como añadir .columnFilter() al crear nuestro dataTable.

Esta opción es la más sencilla. Se encargará de crear las entradas de texto necesarias para realizar el filtrado al final del dataTable.

Crea tus propias entradas para filtrar

Para personalizar estas opciones puedes crear tu propias entradas de texto.

En el código de ejemplo a continuación creamos nuestras propias entradas para filtrar por nombre, edad y salario.

Para ello, añade el siguiente código al html, justo después de crear la tabla y antes de incluir los script.

  1. <div id="boxFilter">
  2.  <div id="labelFilter">Filtrar por : </div>
  3.  <div id="nameFilter"></div>
  4.  <div id="ageFilter"></div> 
  5.  <div id="salaryFilter"></div> 
  6. </div>

Y ahora, modificamos el contenido de script.js por el siguiente:

  1. $(document).ready(function() {
  2.   $('#example').dataTable().columnFilter(
  3.  {aoColumns:[
  4. { sSelector: "#nameFilter", type:"select"  },
  5. { }, null, 
  6. { sSelector: "#ageFilter", type:"select", values : ["33", "66", "59"] },
  7. null, 
  8. { sSelector: "#salaryFilter", type:"number-range"}
  9.  ]}
  10.  );
  11. });

Añadimos al método columnFilter los siguientes valores.

  • sSelector: “#nameFilter”, type:”select”
  • sSelector: “#ageFilter”, type:”select”, values : ["33", "66", "59"]
  • sSelector: “#salaryFiter”, type:”number-range”

Fijate que añadimos los valores en la posición que representa a la columna que queremos tratar.

El resto de columnas las incluimos con {} o null para cada una de ellas.

La diferencia entre usar {} o null está en que al usar el valor null no se creará ninguna caja para el filtrado al final del tabla data. Mientras que al usar {} si se creará. Depende de lo que prefieras.

Con esto, el script de dataTables column filter se encargará de crear las entradas de texto para realizar el filtrado.

Todos los archivos necesarios puedes descargarlos a continuación.


Volver a la Portada de Logo Paperblog
Ver el artículo original
Denunciar

Sobre el autor


Marcostrfn ver su perfil
ver su blog

El autor no ha compartido todavía su cuenta

Sus últimos artículos

Ver todos

Revistas