Gestionando Tablas Dinámicas Con El Plugin Datatables de Jquery - Solvetic

4/4/2017 Gestionando tablas dinámicas con el plugin Datatables de Jquery Solvetic
 PORTADA ARTICULOS TUTORIALES REVIEWS  IDENTIFICARSE  CREAR CUENTA
    
Buscar soluciones... 
  
Todas las soluciones tecnológicas a un click! 
PORTADA ARTICULOS TUTORIALES REVIEWS   
Solvetic Tutoriales Desarrollo JavaScript Gestionando tablas dinámicas con el plugin Datatables de Jquery
10
 5 100%
 4 0%
 3 0%
VOTA  2 0%
 1 0%
Gestionando tablas dinámicas con el plugin 
Datatables de Jquery Kit Solar

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 Vivienda
para cualquier tabla HTML. Permanente
Kit Solar 10000W
48V 30500Wh día
Unifamiliar
Escrito por Sergio Culoccioni el feb 19 2015 11:40 Permanente
jquery javascript html bbdd
      Te lo Instalamos

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.  INFORMACIÓN
Algunas de las funcionalidades que implementa este plugin son las siguientes:  Publicado feb 19 2015 11:40
 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
 Visitas 22549
 Nivel
Profesional 
Búscar datos dentro de una columna especifica  POPULARES DE LA SEMANA
Para poder utilizar este plugin deberemos descargarlo desde la siguiente página:
https://datatables.net/download/index
Para utilizar debemos invocar en las etiquetas <head> de nuestra web la librería y el framework jquery de la siguiente manera:
EFECTO ENVEJECER UNA IMAGEN CON

<script type="text/javascript" language="javascript" src="jquery.js"></script>
PHOTOSHOP DE FORMA FÁCIL

SOLVETIC DISEÑO - 31 MAR 2017
<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">
FUNCIÓN COUNTIF: CÓMO CONTAR
<head> TIPOS DE CELDAS EXCEL 2016
<meta http‐equiv="Content‐Type" content="text/html; charset=windows‐1252" /> SOLVETIC - 31 MAR 2017

<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" /> CÓMO BLOQUEAR PANTALLA EN
MACOS SIERRA
</head> SOLVETIC - 31 MAR 2017

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

<thead>
<tr> CÓMO CONVERTIR FILA A COLUMNA Y
VICEVERSA EN EXCEL 2016

https://www.solvetic.com/tutoriales/article/1469gestionandotablasdin%C3%A1micasconelplugindatatablesdejquery/ 1/9
VICEVERSA EN EXCEL 2016
 PORTADA ARTICULOS TUTORIALES REVIEWS  IDENTIFICARSE 11:08
SOLVETIC SISTEMAS - AYER,  CREAR CUENTA
<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> CÓMO FALSIFICAR UBICACIÓN EN
</tr> NAVEGADOR EDGE Y CHROME
SOLVETIC - 30 MAR 2017
</thead>
<tbody>

<tr>
<td>1001</td>

<td>Carlos Alcantara </td>
DESHABILITAR PROGRAMAS DE INICIO
<td>1203</td>
ARRANQUE WINDOWS 10, 8, 7
SOLVETIC SISTEMAS - 28 MAR 2017

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

</tr>
<tr class="gradeC">
CÓMO PERSONALIZAR Y OCULTAR
<td>1002</td> BARRA DE TAREAS WINDOWS 10
<td>Jose Albertez </td> SOLVETIC - 31 MAR 2017

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

</tr>
DIFERENTES FORMAS DE ACTUALIZAR

A WINDOWS 10 CREATORS UPDATE
<tr class="gradeA">
SOLVETIC SISTEMAS - 30 MAR 2017
<td>1003</td>

<td>Carriles SL </td>
<td>1345</td>


<td>En Proceso </td>

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

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

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

</tr>

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

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

<td>Enviado</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>
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>



"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>



"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>



"language": {

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

}

} );

 } );

</script>

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>

$('#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>   


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
Tabla html añadir Crear Reportes pdf Generar listados Flexigrid grilla
埜�las, controles y... desde PHP y la... dinámicos con... dinamica con...
Filtrar y gestionar Desarrollo de HTML5 - Estilos Tablas dinamicas con

tablas html con... aplicaciones web... Avanzados para... AngularJS
7 Comentarios
Muchas gracias; está genial!
    
erjerry Denunciar
oct 08 2015 12:55
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 filascolumna se
Cesar Romo puedan modificar "al vuelo" y se guarden en la BD automáticamente se podrá ?
oct 22 2015 16:47
Denunciar
Cesar Romo, 22 Oct 2015 17:47, dijo:
Sergio Culoccioni Hola Buen dia, ya tengo toda esta parte funcional, ya me carga los datos desde la BD, ahora tengo una
oct 22 2015 17:09 gran duda, como puede hacer para que ciertos campos de las filascolumna 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
Denunciar
Muy buenas, que buen tutorial

luar79 Lo he seguido paso a paso. Y bueno me aparece la prte de la interfaz grafica(botones, caja
feb 13 2016 14:59 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
Denunciar
 
luar79 tengo el mismo problema que tu, encontraste como solucionarlo?

ldanielreyes Saludos.
feb 18 2016 20:00
Denunciar
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
locopump deseas ver, Ejemplo:
ago 02 2016 17:14 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
Denunciar
locopump, 02 Aug 2016 18:14, dijo:
locopump Hola Sergio, quisiera saber si conoces alguna forma de hacer un filtro en las cabeceras, tipo excel
ago 02 2016 17:17 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
Denunciar
TUTORIALES RELACIONADOS
Titulo Categoría Fecha
Como arrastrar y capturar imágenes con JQuery UI
JavaScript 14 julio 2016 11:56
Publicado por Solvetic Developer
Cómo hacer un Spinner o icono de carga con JQuery JavaScript 14 julio 2016 09:03

Publicado por Josué Encinar
    
Tablas dinamicas con AngularJS
JavaScript 01 junio 2016 12:29
Publicado por Solvetic Developer
Plugins y bibliotecas JQuery para desarrollo web
JavaScript 03 abril 2016 19:21
Publicado por Sergio Culoccioni
Flexigrid grilla dinamica con JQuery y PHP
JavaScript 17 marzo 2016 20:40
Expresiones regulares con Jquery
JavaScript 22 febrero 2015 12:16
No esperes más y entra en Solvetic

Deja tus comentarios y aprovecha las ventajas de la cuenta de usuario ¡Únete!
Demuestra
Crear Cuenta Identiቈcarse eres exper
Regístrate GRATIS para tener tu cuenta Solvetic ¿Tienes ya cuenta? Identifícate aquí
 Registrar una Cuenta Identi퟼�carme en mi Cuenta


 ESCRIBIR TUTO
     13,155  5,243  14,667  10,492  felipe ciro
SECCIONES SOLVETIC LINKS SOBRE NOSOTROS
Portada Artículos Mapa Usuarios Aviso Legal Ayuda Solvetic es el punto de encuentro de profesionales y amantes de la
Tutoriales Reviews Contacto Sitemap tecnología. Una comunidad que te sorprenderá y ayudará en más de
una ocasión
Todos los derechos reservados 2017 ® Solvetic

Gestionando Tablas Dinámicas Con El Plugin Datatables de Jquery - Solvetic

Uploaded by

Document Information

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

Gestionando Tablas Dinámicas Con El Plugin Datatables de Jquery - Solvetic

Uploaded by

Copyright:

Available Formats

4/4/2017 Gestionando tablas dinámicas con el plugin Datatables de Jquery Solvetic

 PORTADA ARTICULOS TUTORIALES REVIEWS  IDENTIFICARSE  CREAR CUENTA

PORTADA ARTICULOS TUTORIALES REVIEWS   

Solvetic Tutoriales Desarrollo JavaScript Gestionando tablas dinámicas con el plugin Datatables de Jquery