jQuery DataTables
Toda aplicación web que se jacte de ser amigable, debe mostrar en sus listados la opción de paginación, ordenamiento por columnas, y la opción de filtrar datos de una manera rápida, entre otras cualidades.
Existe un plugin llamado DataTables. Este plugin es para jQuery, y al momento agrega a una aplicación web características que incrementan la usabilidad de la misma.
Para descargar este plugin, es necesario visitar el sitio oficial de DataTables.
En este escrito, hacemos una breve reseña de los pasos que se siguieron en uno de los proyectos en que se está laborando en esta institución.
Una vez descargadas las siguientes librerías:
es necesario agregar las siguientes lineas en el <head> de la página web donde se implementarán las tablas:
Las líneas que a continuación se muestran se deben incluir en estas mismas páginas, dentro de las etiquetas <content>:
A continuación se muestra una tabla de ejemplo:
Al final de la página, se escribirá el siguiente script, donde se hará referencia al id de la tabla:
En realidad este Script es el que hace todo el trabajo.
La siguiente vez que se consulte la página que incluye la tabla, se apreciarán las ventajas de este plugín.
Revisado por: Hiram Hernández
Revisado por: Omar Soto
Existe un plugin llamado DataTables. Este plugin es para jQuery, y al momento agrega a una aplicación web características que incrementan la usabilidad de la misma.
Descarga
Para descargar este plugin, es necesario visitar el sitio oficial de DataTables.
Instalación
El sitio web de DataTables cuenta con una excelente guía de instalación.En este escrito, hacemos una breve reseña de los pasos que se siguieron en uno de los proyectos en que se está laborando en esta institución.
Una vez descargadas las siguientes librerías:
- jquery-1.8.1.min.js
- jquery.dataTables.js
- dataTables.fixedHeader.min.js
- dataTables.fixedHeader.js
es necesario agregar las siguientes lineas en el <head> de la página web donde se implementarán las tablas:
<script charset="utf8" src="/mateo/js/jquery-1.8.1.min.js" type="text/javascript"></script> <link href="<c:url value='/css/jquery.dataTables.css' />" rel="stylesheet" type="text/css"></link>
Las líneas que a continuación se muestran se deben incluir en estas mismas páginas, dentro de las etiquetas <content>:
<content> <script src="<c:url value='/js/jquery.dataTables.js' />"></script> <script src="<c:url value='/js/dataTables.fixedHeader.js' />"></script> <script src="<c:url value='/js/dataTables.fixedHeader.min.js' />"></script> </content>
Creación de la Tabla
Como este plugín lo único que hace es agregar estilos a una tabla creada con html, lo primero que se necesita es tener un <table></table>. Es necesario asignarle un id.A continuación se muestra una tabla de ejemplo:
<table id="table_id" class="display">
<thead>
<tr>
<th>Column 1</th>
<th>Column 2</th>
</tr>
</thead>
<tbody>
<tr>
<td>Row 1 Data 1</td>
<td>Row 1 Data 2</td>
</tr>
<tr>
<td>Row 2 Data 1</td>
<td>Row 2 Data 2</td>
</tr>
</tbody>
</table>
Al final de la página, se escribirá el siguiente script, donde se hará referencia al id de la tabla:
$(document).ready( function () {
$('#table_id').DataTable();
} );
En realidad este Script es el que hace todo el trabajo.
Conclusión
La siguiente vez que se consulte la página que incluye la tabla, se apreciarán las ventajas de este plugín.
Revisado por: Hiram Hernández
Revisado por: Omar Soto
Comentarios
Publicar un comentario