Reordenamiento de filas en DataTables – Arrastrar y Soltar

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.


¿Sabías que?

¿Necesitas hosting wordpress? WebEmpresa te ofrece un servicio super rápido, excelente soporte en español y certificado SSL gratuito:

WebEmpresa

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:

reordenamiento de filas en datatables arrastrar y soltar ejemplo

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!

Clic para valorar esta información
[Total: 0 Promedio: 0]