DataTables es un plug-in para la biblioteca jQuery JavaScript. Es una herramienta muy flexible, en base a los fundamentos de la mejora progresiva, lo que añadirá controles avanzados de interacción a cualquier tabla HTML.
DataTables es un plugin para la librería jquery de javascript. Es una herramienta altamente flexible, basada en principios de mejora progresiva, que añade controles avanzados de interacción a cualquier tabla html.
Características
- Paginación de longitud variable.
- Filtrado en caliente.
- Ordenación multi-columna con deteción de tipo de datos.
- Manejo inteligente del ancho de columnas.
- Mostrar datos de casi cualquier origen.
- dom, arreglos JavaScript, archivos ajax y procesado del lado de servidor (php, c#, perl, ruby, AIR, Gears, python, ...).
- Opciones de scroll para tablas.
- Completamente internacionalizable.
- Soporte para jquery ThemeRoller.
- Sólido (avalado por más de 2600 tests unitarios).
- Amplia variedad de plugins, como TableTools, FixedColumns, KeyTable y más.
- ¡Gratis!
Recursos (en Inglés)
- Uso.
- Ejemplos.
- Estilo.
- API.
- Desarrollo.
- Extras.
- Plug-ins.
- Blog.
- Preguntas frecuentes.
- Foros.
- Ejemplos del lado servidor.
Programación:
Añadir la versión más reciente de todas las librerías
<link href="//cdnjs.cloudflare.com/ajax/libs/datatables/1.10.7/css/jquery.dataTables.min.css" rel="stylesheet" >
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/datatables/1.10.7/js/jquery.dataTables.min.js"></script>
Tabla HTML estándar
Para que DataTables sea capaz de mejorar una tabla HTML, la tabla de be estar formada por HTML válido y bien formado, con una cabecera (thead
) y un cuerpo (tbody
). También puede usarse un pie de página opcional (tfoot
).
<table id="ejemplo" class="display">
<thead>
<tr>
<th>Compañía</th>
<th>Dirección</th>
<th>Población</th>
</tr>
</thead>
<tbody>
<tr>
<td>Artilugios ACME</td>
<td>Calle fasa, 123</td>
<td>Springfield</td>
</tr>
<tr>
<td>Cyberdyne Systems</td>
<td>Slope street</td>
<td>San Francisco</td>
</tr>
</tbody>
</table>
Inicializando los plugins
Después de incluir las librerías JavaScript/JQuery
requeridas, el plubin puede ser inicializado con unas pocas líneas de código. El texto a continuación del #
y el atributo id
de la tabla debe ser idéntico.
$(document).ready(function() {
$('#ejemplo).dataTable();
});
Fiddle
Al formular preguntas, suele ser una buena idea proveer un Fiddle que reproduzca el problema. Esto ayuda a otros usuarios a depurar tus problemas.