#sAjaxSource

[blogdeprogramacion]

Ejemplo de DataTables con Server Side - Más Rápido y Eficiente

Ejemplo de DataTables con Server Side - Más Rápido y Eficiente aparece primero en nuestro https://jonathanmelgoza.com/blog/ejemplo-de-datatables-con-server-side-mas-rapido-y-eficiente/

Hoy veremos un ejemplo básico de DataTables con Server Side que nos hará mostrar grandes cantidades de datos directo desde base de datos de forma eficiente y veloz. Seguramente en más de un proyecto web habrás tenido la necesidad de mostrar datos en una tabla, podremos hacerlo con una tabla normal hecha por nosotros que posiblemente lucirá bastante fea y nos tomará bastante tiempo crearla o mediante DataTables.

Para comenzar dejame decirte que si sigues utilizando tablas sencillas para tus proyectos debes de actualizarte con urgencia.

Existen muchas opciones para crear tablas mucho más presentables y con funcionalidades de otro nivel de forma más rápida.

Hoy hablaremos de una de ellas, DataTables. Así como la forma en que podemos utilizarla para mostrar datos directamente de la base de datos de nuestro proyecto.

Además, mediante esta forma que te mostraré (Server Side) el tiempo de carga de la información es de locos! Con esta forma podremos mostrar cantidades de datos impresionantes en realmente poco tiempo que si lo hacemos de forma convencional.

Hace tiempo hablamos sobre que aprender si quieres ser un desarrollador web, pues ahora te digo que si ya eres un desarrollador web y no utilizas DataTables te estas perdiendo de mucho!

¿Estas listo para pasar tus tablas al siguiente nivel? Veamos el siguiente ejemplo de DataTables con Server Side.

¿Qué es DataTables?

DataTables es una librería gratuita basada en JQuery ( y a su vez en Javscript ) para enaltecer las tablas HTML.

Agrega caracteristicas fantasticas como paginación, búsqueda instantanea, ordenamiento por columnas, responsiva para moviles, fácil de traducir a cualquier idioma, muchas extensiones (por si hiciera falta), gran comunidad e información en Internet y muchas cosas más!

Realmente si no estas utilizando DataTables en tus proyectos te estas perdiendo de mucho..

Preparando la librería

Inicialización

Para comenzar necesitamos agregar DatTables a nuestro proyecto.

Te recomiendo ir al sitio web de datatables para más información sobre cómo comenzar o puedes agregar los siguientes archivos via CDN:

Agregamos los archivos CSS / JS básicos:

<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.19/css/jquery.dataTables.css"> <script type="text/javascript" charset="utf8" src="https://cdn.datatables.net/1.10.19/js/jquery.dataTables.js"></script>

Creamos una estructura básica de HTML:

<table id="table_id" class="display"> <thead> <tr> <th>Column 1</th> <th>Column 2</th> </tr> </thead> <tbody> <tr> <td>Row 1 Data 1</td> <td>Row 1 Data 2</td> </tr> <tr> <td>Row 2 Data 1</td> <td>Row 2 Data 2</td> </tr> </tbody> </table>

Y la inicializamos en JS:

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

Sobra resaltar que necesitamos la librería jQuery para hacer funcionar este ejemplo. Llámala antes de la librería de DataTables.

Nuestro ejemplo

Ahora bien, para nuestro ejemplo yo utilizó varios archivos y extensiones más para maximar nuestra tabla: responsive, uikit, buttons (bastante genial para agregar botones de exportar la información en Excel, CSV y PDF), etc.

En resumen mis CSS lucen así (tengo los archivos en local):

<!-- DataTables --> <link href="assets/css/jquery.dataTables.min.css" rel="stylesheet" /> <link href="assets/css/responsive.dataTables.min.css" rel="stylesheet" /> <link href="assets/css/uikit.min.css" rel="stylesheet" /> <link href="assets/css/dataTables.uikit.min.css" rel="stylesheet" /> <link href="assets/css/buttons.dataTables.min.css" rel="stylesheet" /> <!-- DataTables -->

Y mis JS lucen así:

<!-- DataTables --> <script src="assets/js/jquery.dataTables.min.js" type="text/javascript"></script> <script src="assets/js/dataTables.responsive.min.js" type="text/javascript"></script> <script src="assets/js/dataTables.uikit.min.js" type="text/javascript"></script> <script src="assets/js/dataTables.buttons.min.js" type="text/javascript"></script> <script src="assets/js/buttons.flash.min.js" type="text/javascript"></script> <script src="assets/js/jszip.min.js" type="text/javascript"></script> <script src="assets/js/pdfmake.min.js" type="text/javascript"></script> <script src="assets/js/vfs_fonts.js" type="text/javascript"></script> <script src="assets/js/buttons.html5.min.js" type="text/javascript"></script> <script src="assets/js/buttons.print.min.js" type="text/javascript"></script> <!-- DataTables -->

Puedes obtener varias de estas extensiones en el sitio web de DataTables (Por ejemplo Buttons o Responsive).

Veamos ahora como luce nuestra tabla HTML de ejemplo.

Estructura de la tabla

Veamos como tenemos nuestra estructura HTML de nuestro ejemplo de DataTables con Server Side:

<table id="tabla_piezas" class="display nowrap tablaPersonalizada" style="width:100%"> <thead> <tr> <th>ID</th> <th>NUM DE PARTE</th> <th>DESCRIPCIÓN</th> <th>CLIENTE</th> <th>ARMADORA</th> <th>PROYECTO</th> <th>CATEGORIA</th> <th>INSTRUCTIVO</th> <th>INSTRUCTIVO 2</th> <th><i class="fa fa-bars"></i></th> </tr> </thead> </table>

Como puedes ver únicamente definimos la estructura pero no establecemos información.

Potenciando nuestra tabla

Ahora si, veamos como potenciaremos nuestra tabla con ayuda de DataTables con Server Side.

En nuestro código Javascript vamos a inicializar nuestra tabla mediante su ID:

tabla = $('#tabla_piezas').DataTable( "bProcessing": true, "sAjaxSource": "database/obtenerTablaConsultarPiezas.php", "aoColumns": [ mData: 'idpieza' , mData: 'numdeparte' , mData: 'descripcion' , mData: 'cliente' , mData: 'armadora' , mData: 'proyecto' , mData: 'categoria' , mData: 'instructivo' , mData: 'instructivo2' , mData: 'acciones' ], retrieve: true, dom: 'Blfrtip', "pageLength": 10, "order": [[ 1, "asc" ]], buttons: [ extend: 'excelHtml5', text: 'EXCEL' , extend: 'csvHtml5', text: 'CSV' , extend: 'pdfHtml5', text: 'PDF' ], "columnDefs": [ "visible": false, "searchable": true, ], "language": "sProcessing": "", "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:", "searchPlaceholder": "Escribe aquí para buscar..", "sUrl": "", "sInfoThousands": ",", "sLoadingRecords": "<img style='display: block;width:100px;margin:0 auto;' src='assets/img/loading.gif' />", "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" );

Aquí tenemos información de sobre para explicar, vamos por orden:

Antes que nada nos convertimos en nuestra tabla y la convertimos en DataTable.

bProcessing: Para mostrar un indicador de que nuestra información esta cargando.

sAjaxSource: Obtiene la información desde una fuente Ajax, en este caso un archivo PHP que se conecta a una base de datos.

aoColumns: Nos sirve para conectar nuestras columnas de base de datos a las columnas de nuestra tabla, lo entenderemos mejor cuando veamos nuestro archivo php source.

retrieve: Definimos que obtendremos una instancia de BD.

dom: Esto nos sirve para definir como acomodar los componentes de nuestra Tabla, botones, buscador, etc.

pageLength: La cantidad de registros que serán visibles en la pantalla.

order: Como se ordenará la información, por cual columna y si será en ascendente o descendente.

buttons: Propio de nuestra extensión Buttons para nuestros botones de exportación.

columnDefs: Configuraciones extras por columnas, si es buscable o visible alguna columna en especial.

language: Esta parte del código nos permite traducir los mensajes más importantes de nuestra tabla a Español, este código no puede faltar.

Ahora que tenemos inicializada nuestra tabla veamos nuestro código PHP que obtiene la información.

Obteniendo la información desde Base de Datos

Aquí nos entraremos en detalles de conexión ni nada por el estilo, veamos el código más importante.

$sql = "SELECT idpieza, numdeparte, descripcion, ... FROM piezas ORDER BY numdeparte ASC;"; $result = mysqli_query($conn, $sql); $c=0; while($fila=$result->fetch_assoc()) $data[$c]["idpieza"] = $fila["idpieza"]; $data[$c]["numdeparte"] = $fila["numdeparte"]; $data[$c]["descripcion"] = $fila["descripcion"]; ... ... $c++; $results = ["sEcho" => 1, "iTotalRecords" => count($data), "iTotalDisplayRecords" => count($data), "aaData" => $data ]; echo json_encode($results);

En resumen para nuestro ejemplo de DataTables con server side nos conectamos a nuestra Base de datos, ejecutamos un SELECT y vamos guardando en una matriz la información.

Observa como los indices se llaman igual que en nuestro código Javascript en aoColumns.

También al final lo metemos en un objeto con otra información en $results.

Por último lo regresamos ( o imprimimos con un echo ) para recibirlo en nuestra inicialización de tabla en JavaScript.

Ahora veamos como luce!

Como puedes ver todo esta en Español con nuestros textos personalizados, aparecen justo 10 registros por página, coloca botones para exportar la información en Excel, CSV y PDF, coloca un buscador instantáneo excelente y la velocidad de carga de la información es bestial!

Conclusión

Con este ejemplo de DataTables con Server Side queremos mostrar las increíbles características de la librería y sobre todo recalcando la característica de Server Side y cómo nos puede ayudar a obtener grandes cantidades de información de mejor forma que cómo normalmente lo haríamos sin esta librería o incluso con esta librería pero sin hacer uso de la característica.

Considero que cualquier programador web que se respete debe de optimizar tiempo y esfuerzo así como ofrecer a sus clientes las mejores soluciones en desarrollo como considero que es utilizar DataTables en los proyectos.

Si esta información sobre DataTables con Server Side te fue de utilidad no olvides compartirla en tus redes sociales o dejarnos un comentario en la sección de abajo para aclarar cualquier duda relacionada al tema de hoy.

Hasta luego!

[blogdeprogramacion]

Reordenamiento de filas en DataTables - Arrastrar y Soltar

Reordenamiento de filas en DataTables - Arrastrar y Soltar aparece primero en nuestro https://jonathanmelgoza.com/blog/reordenamiento-de-filas-en-datatables-arrastrar-y-soltar/

¿Utilizas DataTables en tus proyectos y quieres poder reordenar filas? ¿Buscas una solución para simplemente arrastrar y soltar registros para cambiar una determinada posición? Hoy veremos cómo hacer este reordenamiento de filas en DataTables de manera fácil y sencilla con un ejemplo básico.

En ocasiones es necesario poder ordenar una lista de elementos en nuestros proyectos web.

Ya sea para proyectos de clientes o proyectos propios nunca falta que esta situación se presente.

Hoy veremos cómo hacer un reordenamiento de filas en DataTables para solucionar esta situación.

Antes de comenzar mencionar que obviamente necesitamos jQuery y DataTables para este Ejemplo.

Si no sabes implementar DataTables puedes revisar el siguiente ejemplo con DataTables y Server Side.

Inicializamos la extensión

Necesitamos los archivos CSS / JS de la extensión de DataTables:

https://cdn.datatables.net/rowreorder/1.2.5/css/rowReorder.dataTables.min.css https://cdn.datatables.net/rowreorder/1.2.5/js/dataTables.rowReorder.min.js

Por supuesto debemos de agregar antes la librería jQuery y DataTables.

Ahora en nuestro código Javascript donde inicializamos nuestra Tabla haremos lo siguiente:

tabla = $('#tabla_marcadores').DataTable({ "bProcessing": true, "sAjaxSource": "database/obtenerTablaConsultarMarcadores.php", "aoColumns": [ mData: 'posicion' , mData: 'id' , mData: 'texto' , mData: 'enlace' , mData: 'preview' , mData: 'acciones' ], retrieve: true, rowReorder: rowOrder: true , dom: 'Blfrtip', "pageLength": 10, ... .. .

Agregamos rowReorder y establecemos en true para activar la funcionalidad.

Por supuesto debemos de tener nuestro correspondiente archivo PHP para obtener la información.

Y también nuestra estructura de Tabla HTML:

<table id="tabla_marcadores" class="display nowrap tablaPersonalizada tablaArrastrable" style="width:100%"> <thead> <tr> <th>POSICION</th> <th>ID</th> <th>TEXTO</th> <th>ENLACE</th> <th>PREVIEW</th> <th><i class="fa fa-bars"></i></th> </tr> </thead> </table>

En el estilo de la clase tablaArrastrable aprovechamos para poner un estilo de cursor para que el usuario sepa que puede arrastrar las filas:

.tablaArrastrable tbody tr cursor: all-scroll !important;

Con esto tendremos lista la funcionalidad de reordenamiento pero faltan un par de pasos más.

Haciendo los cambios permanentes en BD

Hasta el momento los cambios no son reflejados en Base de Datos.

Para hacer los cambios permanentes en Base de datos debemos modificar lo siguiente:

tabla = $('#tabla_marcadores').DataTable({ "bProcessing": true, "sAjaxSource": "database/obtenerTablaConsultarMarcadores.php?tipo=<?php echo $_SESSION['XUSERTIPO'];?>", "aoColumns": [ mData: 'posicion' , mData: 'id' , mData: 'texto' , mData: 'enlace' , mData: 'preview' , mData: 'acciones' ], retrieve: true, rowReorder: dataSrc: 'posicion', selector: 'tr' , dom: 'Blfrtip', "pageLength": 10, ... .. .

Con esto definimos dataSrc que es la columna de nuestro aoColumns que será la columna clave en el ordenamiento.

También establecemos que el usuario podrá arrastrar la fila desde cualquier columna, es decir, con click en la TR.

Para continuar con nuestro reordanamiento de filas en DataTables y que sea permanente vamos a ver el factor clave, el evento row-reorder.

Si observaste bien enlazamos nuestra tabla a una variable llamada tabla.

tabla = $('#tabla_marcadores').DataTable({

Posterior a la inicialización vamos a ver qué hacer cuando se produzca un reordenamiento.

Lo que haremos será por supuesto cambiar los valores en Base de Datos:

tabla.on( 'row-reorder', function ( e, diff, edit ) var resultado = 'Reordenamiento Inicio en: '+edit.triggerRow.data()['texto']+'\n'; for ( var i=0, ien=diff.length ; i<ien ; i++ ) var rowData = tabla.row( diff[i].node ).data(); resultado += rowData['texto']+'('+rowData['id']+') ahora esta en posición '+ diff[i].newData+' (antes era '+diff[i].oldData+')\n'; // Actualizamos en BD $.post( "database/actualizarPosicionMarcador.php", id: rowData['id'], pos: diff[i].newData ).done(function( data ) ); console.log( 'Resultados del Reordenamiento: \n' + resultado ); $.notify( icon: 'pe-7s-bell', message: "Se actualizó correctamente la información." , type: 'success', timer: 1000 ); );

Con este código lo que hacemos será reflejar cada cambio de posición directo en base de datos mediante el archivo PHP actualizarPosicionMarcador.php.

Mandamos el id de la fila involucrado y la nueva posición, entonces en este archivo php realizamos una instrucción SQL como la siguiente:

UPDATE marcadores SET posicion = $pos WHERE idmarcador = $id

y listo!

Habremos reordenado visualmente los registros en la interfaz de usuario y también en la base de datos por lo que los cambios serán permanentes!

El resultado final será algo cómo esto:

Como puedes ver la funcionalidad de arrastrar y soltar para hacer el reordenamiento de filas en DataTables es bastante fácil e intuitivo.

Te recuerdo que puedes consultar más información en el sitio de DataTables y en la sección de RowReorder.

Si esta funcionalidad te fue de utilidad no olvides compartirla en tus redes sociales y dejarnos un comentario en la sección de abajo si tienes cualquier duda relacionada a este tema, trataré de ayudarte en la medida de lo posible.

Hasta luego!