Datatables para tablas html

datatable es una libreria onde vemos nuestras tablas, mas bonitas y mas funcionales, ademas de traer un campo de busqueda onde podemos filtrar cualquier campo, tambien ya viene preparado con paginacion

Paginacion es una de las principales caracteristicas de datatables

Otra caracteristica importante es la busqueda, ya qe se hace instantaneamente y por cualquier campo

La ordenacion de los datos puede ser hecha por varias columnas, basta con hacer un clic en esa columna y los datos se ordenam

Es compatible con cualquier fuente de datos, DOM, javascript, ajax etc

Puedes crear el tema facilmente

sus extensiones se pueden ampliar facilmente, botones, redator, receptivo y mas...

compatible con dispositivos moviles

totalmente internacionalizable etc

...

implementar datatable en mis sistemas

En la pagina de datatables tenemos el manual completo de como implementar datatables,pero si lo voy a explicar de una manera facil para que se entienda.

Lo primero hay que copiar los CDN para nuestro header

Uno son los estilos que va a tener nuestra tabla.

el otro es el javascript de como va a funcionar nuestra tabla.

para que se inicializen las tablas de datos creamos una funcion antes del cierre del body

Pongo un ejemplo de codigo, no hay que olvidar que hay otras funciones

 $(document).ready( function () {
  $('#table_id').DataTable();
 } );
    

No hay que olvidar que tenemos que poner un id a la tabla con el mismo nombre que tenemos en la funcion

Si ya tenemos el CDN de Jquery instalado en la cabecera

 <script src="https://code.jquery.com/jquery-3.5.1.js"></script>
    

El CDN de los estilos

        <link rel="stylesheet" href="//cdn.datatables.net/1.13.1/css/jquery.dataTables.min.css">
    

El CDN del javascript

        <script src="http://cdn.datatables.net/1.13.1/js/jquery.dataTables.min.js"></script>
    

Y tambien la funcion que he dejado arriba o otra que encontramos en la pagina de datatables entonces ya tenemos todo para iniciar a trabajar con datatables

Ir al indice

---