Cargando

Ir a contenido


 


Gestionando tablas dinámicas con el plugin Datatables de Jquery

Datatables es un plugin de la biblioteca del framework jQuery. Es una herramienta que nos permitirá añadir funcionalidades a tablas html para manipular datos y añadirá controles de para realizar muchas operaciones avanzadas para cualquier tabla HTML.



Escrito por el feb 19 2015 11:40 jquery javascript html bbdd


Se puede utilizar tanto en tablas generadas con html o con cualquier lenguaje de programación como php o asp.net, debido a que Jquery es un framework programado en Javascript es multiplataforma y compatible con la mayoría de los navegadores.

 

Algunas de las funcionalidades que implementa este plugin son las siguientes
  • Ordenar alfabéticamente o numéricamente columnas de datos de la tabla html
  • Paginar resultados con números de paginas
  • Filtrar cada columna por algún criterio
  • Búscar datos dentro de una columna especifica

 

Para poder utilizar este plugin deberemos descargarlo desde la siguiente página:

 


1. Cómo utilizar Datatables


Para utilizar debemos invocar en las etiquetas <head> de nuestra web la librería y el framework jquery de la siguiente manera:
<script type="text/javascript" language="javascript" src="jquery.js"></script>

<script type="text/javascript" language="javascript" src="jquery.dataTables.js"></script>
Vamos a hacer el siguinete ejemplo una tabla con datos de clientes y pedidos:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252" />

<title>Documento sin t&iacute;tulo</title>
<script type="text/javascript" language="javascript" src="jquery.js"></script>

<script type="text/javascript" language="javascript" src="jquery.dataTables.js"></script>
<link rel="stylesheet" type="text/css" href="jquery.dataTables.css" media="screen" />

</head>

<body>
<table id="Jtabla" cellpadding="0" cellspacing="0" border="0" class="display" >

<thead>
<tr>

  <th width="58" align="left">Codigo</th>
<th width="274" align="left">Cliente</th>

<th width="124" align="left">Nota Pedido</th>
<th width="119" align="left">Estado Pedido</th>

<th width="103" align="left">Importe</th>
</tr>

</thead>
<tbody>

<tr>
  <td>1001</td>

<td>Carlos Alcantara </td>
<td>1203</td>

<td>Enviado</td>
<td class="center">1000</td>

</tr>
<tr class="gradeC">

  <td>1002</td>
<td>Jose Albertez </td>

<td>1204</td>
<td>Pendiente</td>

<td class="center">500</td>
</tr>

<tr class="gradeA">
  <td>1003</td>

<td>Carriles SL </td>
<td>1345</td>

<td>En Proceso </td>
<td class="center">2500</td>

</tr>
<tr class="gradeA">

  <td>1004</td>
<td>Maria Pado </td>

<td>1320</td>
<td>Enviado</td>

<td class="center">350</td>
</tr>

<tr class="gradeA">
  <td>1018</td>

  <td>Alina Sereno </td>
  <td>1358</td>

  <td>Enviado</td>
  <td class="center">50</td>

</tr>
</table>

<script>

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

});
</script>

</body>
</html>
Alfinal de la tabla añadimos el código jquery que creara la funcionalidad para filtro y paginación invocamos con el identificador de la tabla a la que queremos aplicar el plugin datatable en este caso con:
$('#Jtabla').DataTable();
El resultado será el siguiente:

 

La paginación por defecto mostrará los registros de 10 por página, desde el campo buscar Search podremos filtrar cualquier columna de la tabla.

 

Si quisieramos ver solo los pedidos Pendiente podemos escribir en el campo de búsqueda una parte de la palabra Pen y el listado se ordenara basado en las palabras que tengan esas letras, de esta manera la haremos para cualquier columna que queramos ordenar.

 

Para ordenar las columnas debemos añadir la definición de columnas para determinar que columnas pueden ser ordenadas y de que manera los parámetros 0 ascendente y 1 descendente

 

Para ello modificamos el script por el siguiente que indicara targets que es el numero de columna y orderdata que donde indicaremos el numero de columna y el tipo de ordenamiento. Ordenaremos código de cliente Ascendente, Nombre del cliente descendente y estado de pedido descendente.

<script>

$(document).ready(function(){

    $('#Jtabla').DataTable({

       columnDefs: [ {

            targets: [ 0 ],

            orderData: [ 0, 1 ]

        }, {

            targets: [ 1 ],

            orderData: [ 1, 0 ]

        }, {

            targets: [3 ],

            orderData: [ 3, 0 ]

        } ]

    } );

});

</script>
Así haciendo clic en cada nombre de columna podremos ordenar el listado, inclusive si ha sido filtrado previamente.

 

Muchas veces al tener grandes volúmenes de datos necesitamos visitar varias pagina para comparar datos o ver alguna información lo que hace que se pierda el filtro , Datatable tiene una opción para guardar el estado actual ya sea la paginación, el orden o el filtro que aplicamos de manera que se pueden restaurar cuando el usuario vuelve a cargar una página, esta opción se habilita mediante el comando stateSave.

<script>

$(document).ready(function() {

    $('#Jtabla').dataTable( {

        stateSave: true

    } );

} );

</script>

</body>

2. Paginación de resultados con Datatable

 

La paginación presenta una serie de controles por defecto hacia adelante y hacia atrás y con numeros de pagina, además tiene tres opciones

 

simple
Muestra solo los botones anterior y siguiente

simple_numbers
Muestra los botones anterior, siguiente y los números de paginas

full
Muestra todos los controles.

 

 

Un aspecto que también podemos manejar con este plugin es el idioma. Podemos traducir los controles por defecto de la tabla, dentro de datatable.js encontramos las referencias de cada control para poder realizar la traducción como por ejemplo:

<script>

$(document).ready(function() {

    $('#Jtabla').dataTable( {

        "language": {

            "lengthMenu": "Mostrar _MENU_ registros por pagina",

            "zeroRecords": "No se encontraron registros",

            "info": "P&aacutegina _PAGE_ of _PAGES_",

            "infoEmpty": "No hay registros"

        }

    } );

} );

</script>
Debemos prestar mucha atención y cuidado en no traducir las variables numéricas como los números de página.

 

El script para la traducción completa a castellano es el siguiente:

<script>

$(document).ready(function() {

    $('#Jtabla').dataTable( {

        "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>
También podemos importar la librería según el idioma que necesitemos desde la web del plugin o bien descargarla a nuestro directorio local y enlazarla.
<script>

$(document).ready(function() {

    $('#Jtabla').dataTable( {

        "language": {

            "url": "//cdn.datatables.net/plug-ins/9dcbecd42ad/i18n/Spanish.json"

        }

    } );

} );

</script>

3. Eventos Jquery sobre celdas de la tabla html


Se pueden asignar eventos Jquery como clic, para que al hacer clic en una celda o fila podamos acceder a estos datos a través de un evento y convertirlos en variables para utiliza en forma dinámica en nuestra web para mejorar de esta manera la interacción del usuario. Podríamos programar muchas funcionalidades como ocultar una fila cambiar el color o el estilo css según algún parámetro establecido, por ejemplo números negativos en rojo, clientes con deuda poner la fila en otro color o pedidos enviado en verde.

 

A continuación un ejemplo que nos muestra el código de cliente y el nombre al hacer clic en una fila

<script>

$(document).ready(function() {
    $('#Jtabla').dataTable();

    $('#Jtabla tbody').on('click', 'tr', function () {
        var codigo = $('td', this).eq(0).text();

        var nombre = $('td', this).eq(1).text();
        alert( 'Código del cliente '+codigo+' '+'Nombre '+nombre);

    } );
} );

</script>
Cambiar color de la fila en la que estemos posicionados. Creamos una hja de estilo para asignarle un color a la celda y a la fila cuando pasemos el mouse sobre la celda:
<style>
td.filaseleccionada {

    background-color: #A1B7D1;
}

</style>

<script>

$(document).ready(function() {

    var ultimoid = null;

    var table = $('#Jtabla').DataTable();

    

    $('#Jtabla tbody')

        .on( 'mouseover', 'td', function () {

            var columna = table.cell(this).index().column;

            if ( columna !== ultimoid ) {

                $( table.cells().nodes() ).removeClass( 'filaseleccionada' );

                $( table.column( columna ).nodes() ).addClass( 'filaseleccionada' );

            }

        } )

        .on( 'mouseleave', function () {

            $( table.cells().nodes() ).removeClass( 'filaseleccianda' );

        } );

} );

</script>

</body>
Esta son alguna funcionalidades que podemos utilizar con el plugin Jquery Datatable que nos permitirá gestionar tablas dinámicas interactuando con datos y html.

¿Te ha gustado y ayudado este Tutorial?
Puedes premiar al autor pulsando este botón para darle un punto positivo
  • -
  • 0
10
VOTA
5
100%
4
0%
3
0%
2
0%
1
0%

  Información

  •   Publicado feb 19 2015 11:40
  •   Actualizado abr 04 2017 16:39
  •   Visitas 34.4K
  •   Nivel
    Profesional



Tutoriales Relacionados


8 Comentarios

Muchas gracias; está genial!


Cesar Romo
oct 22 2015 16:47

Hola Buen dia, ya tengo toda esta parte funcional, ya me carga los datos desde la BD, ahora tengo una gran duda, como puede hacer para que ciertos campos de las filas-columna se puedan modificar "al vuelo" y se guarden en la BD automáticamente se podrá ?


Sergio Culoccioni
oct 22 2015 17:09

Hola Buen dia, ya tengo toda esta parte funcional, ya me carga los datos desde la BD, ahora tengo una gran duda, como puede hacer para que ciertos campos de las filas-columna se puedan modificar "al vuelo" y se guarden en la BD automáticamente se podrá ?

Hola si se puede, puedes mirar el APi o espera y luego haré un tutorial sobre el tema. saludos

Muy buenas, que buen tutorial :)

 

Lo he seguido paso a paso. Y bueno me aparece la prte de la interfaz grafica(botones, caja de busqueda por palabras, avanzar ó retroceder pagina) pero la funcionalidad no se ejecuta.

Es decir aunque pagine a 10 resultados por pagina me sigue mostrando todos en una pagina.

No se si debo descomentar codigo del archivo dataTables.js (me ha tocado comentar codigo porque me lanzaba un error de que no reconocia una variable que estaba previamente declarada :| ). En fina agradecería mucho las ideas para que esto funcionara ya que es para un proyecto de final de curso.

He juntado todos los archivos .js al mismo nivel donde había colocado el de query.js y dataTables.js por si desde estos llamaran a los restantes.

 

Gracias por las ideas :)


ldanielreyes
feb 18 2016 20:00

luar79 tengo el mismo problema que tu, encontraste como solucionarlo?

 

Saludos.

Hola Sergio, quisiera saber si conoces alguna forma de hacer un filtro en las cabeceras, tipo excel donde te salen la lista de los elementos que se repiten y seleccionas solo los que deseas ver, Ejemplo:
Pero solo necesito lo que dice Filtros de texto, lo demás ya lo hace el datatable y el ordenar por color por ahora no me atrae.... espero puedas apoyarme pronto, saludos cordiales

Hola Sergio, quisiera saber si conoces alguna forma de hacer un filtro en las cabeceras, tipo excel donde te salen la lista de los elementos que se repiten y seleccionas solo los que deseas ver, Ejemplo:
Pero solo necesito lo que dice Filtros de texto, lo demás ya lo hace el datatable y el ordenar por color por ahora no me atrae.... espero puedas apoyarme pronto, saludos cordiales

 

Perdón no salió la imagen, pero la idea es la siguiente:
si tengo una tabla donde una columna sean digamos productos y otra categorías, pues bien si meto miles de productos, habrán productos de la misma categoría, así que quisiera darles check a las categorías que deseo ver solamente, como en excel al filtrar por texto. Gracias por el apoyo


ricardo9105
ago 11 2017 23:36

Hola Sergio buenas tardes, soy nuevo en esto de JQ, tengo una duda estoy trabajando con un datatable y aplique la primer funcion que muestras para convertir una tabla a datatable, la cual necesito que sean 25 registros por default ademas use la libreria para pasar a español, puedo poner varias funciones dentro del datatable y si es asi como pudiera hacerlo?

saludos

No esperes más y entra en Solvetic
Deja tus comentarios y aprovecha las ventajas de la cuenta de usuario ¡Únete!
Demuestra que eres experto!
  ESCRIBIR TUTORIAL
Suscribirse