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.
- 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í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
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ágina _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.
Muchas gracias; está genial!