¿Cómo hacer una tabla html profesional?

Hoy aprenderemos como hacer una tabla html profesional, responsiva, que se vea bonita y elegante en nuestros proyectos web todo partiendo de una simple tabla html, asimismo se agregarán funciones como ordenar, buscar y filtrar los datos con la ayuda de un plugin de jQuery.

DataTables es un plugin para la librería jQuery de JavaScript con el cual podemos hacer una tabla html profesional, partiendo de una simple tabla html se pueden incluir características de mejora e interacción que harán que nuestra tabla se vea bonita y elegante ademas de incluir funcionalidades como ordenar, buscar, segmentar por páginas, etc.

Su implementación es bastante simple lo único que tenemos que hacer es incluir dos archivos en nuestro proyecto web y algunas lineas de código, el resultado sera una tabla con mayor estilo y funcionalidad.

Veamos como hacerlo, ¿Te animas a darle una mejor presentación a tus tablas?.

Tabla html profesional

Para implementar DataTables solo requerimos llamar jQuery, la librería y archivo css de DataTable. Una vez que los tengamos en nuestro proyecto partiremos de una simple tabla html para posteriormente inicializar DataTable y ver la magia en nuestra tabla, ¡Comencemos!

Código html

Lo primero que tenemos que hacer es llamar el css y librerías a utilizar, en este caso primero estamos llamando la hoja de estilo de DataTable, enseguida llamamos la librería de jQuery y librería de DataTable, incluimos primero jQuery puesto que DataTable depende de esta.

<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.12/css/jquery.dataTables.min.css">
<script src="https://code.jquery.com/jquery-1.12.4.min.js" integrity="sha256-ZosEbRLbNQzLpnKIkEdrPv7lOy9C27hHQ+Xp8a4MxAQ=" crossorigin="anonymous"></script>
<script type="text/javascript" src="https://cdn.datatables.net/1.10.12/js/jquery.dataTables.min.js"></script>

Dentro de un contenedor declaramos una estructura de una tabla html simple a la cual le incluimos un id que usaremos mas adelante.

Es importante que la tabla siga la estructura que de ve en el código.

<div id="content_principal">
       <table id="tabla-datos" class="display" width="80%">
    <thead>
      <tr>
        <th>NOMBRE</th>
        <th>APELLIDO</th>
        <th>EDAD</th>
      </tr>
    </thead>
    <tfoot>
      <tr>
        <th>NOMBRE</th>
        <th>APELLIDO</th>
        <th>EDAD</th>
      </tr>
    </tfoot>
    <tbody>
      <tr>
        <td>Juan</td>
        <td>Perez</td>
        <td>26</td>
      </tr>
      <tr>
        <td>Lucia</td>
        <td>Robles</td>
        <td>28</td>
      </tr>
      <tr>
        <td>Alberto</td>
        <td>Martinez</td>
        <td>22</td>
      </tr>
    </tbody>
  </table>
</div>

Código javascript

Hasta este punto hemos creado la estructura de una tabla html simple es momento de inicializar DataTable para que nuestra tabla tome un mejor aspecto.

Lo único que tenemos que hacer es inicializar la tabla con la siguiente linea: $(‘#tabla-datos’).DataTable();

Enseguida se pueden incluir configuraciones adicionales que deseemos, como lenguaje, modo de ordenación, ocultar columnas etc.

<script>
  $(document).ready(function(){
  $('#tabla-datos').DataTable( {
    "columnDefs": [
      {
        "visible": false,
        "searchable": true
      }
    ],
    "language": {
      "sProcessing":     "Procesando...",
      "sLengthMenu":     "Mostrar _MENU_ registros",
      "sZeroRecords":    "No se encontraron resultados",
      "sEmptyTable":     "Ningún dato disponible en esta tabla",
      "sInfo":           "Mostrando registros del _START_ al _END_ de un total de _TOTAL_ registros",
      "sInfoEmpty":      "Mostrando registros del 0 al 0 de un total de 0 registros",
      "sInfoFiltered":   "(filtrado de un total de _MAX_ registros)",
      "sInfoPostFix":    "",
      "sSearch":         "Buscar:",
      "sUrl":            "",
      "sInfoThousands":  ",",
      "sLoadingRecords": "Cargando...",
      "oPaginate": {
        "sFirst":    "Primero",
        "sLast":     "Último",
        "sNext":     "Siguiente",
        "sPrevious": "Anterior"
      },
      "oAria": {
        "sSortAscending":  ": Activar para ordenar la columna de manera ascendente",
        "sSortDescending": ": Activar para ordenar la columna de manera descendente"
      }
    }
  });
});
</script>

Para conocer más de las configuraciones que puedes incluir checa la documentación de DataTable donde podrás encontrar como manejar eventos, estilos, orden de elementos, etc.

Resultado

El resultado que tenemos es una tabla html profesional, responsiva, con funcionalidad para ordenar por cualquier columna, buscador por cualquier criterio que aparezca en la tabla, navegación entre hojas, etc.

Te dejo un enlace para que cheques el ejemplo completo.

Es momento de darle un toque a cualquier tabla de tus proyectos web.

Saludos!