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 para la librería de . Es una herramienta altamente flexible, basada en principios de mejora progresiva, que añade controles avanzados de interacción a cualquier tabla .

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.
  • , arreglos JavaScript, archivos y procesado del lado de servidor (, , , , AIR, Gears, , ...).
  • Opciones de para tablas.
  • Completamente internacionalizable.
  • Soporte para 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)

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.