Múltiple table drag and drop Plugin

[Carxl]

Hola, hace un rato estoy intentando pero no logro hacer algo con un plugin.

El plugin en cuestión es Table Drag and Drop. En resumen, el plugin lo que hace es que te permite ordenar los registros de una tabla(<table>) mdiante drag and drop.

Tengo dos problemas con el plugin:

1. Las tablas en el proyecto pueden ser n cantidad (actualmente trabajo con dos y funciona perfecto). Porque van a ser tablas(<table>) generadas desde base datos. El problema en sí es la manera como se usa el plugin:

Código Javascript:

$("#table1").tableDnD({
 

Si van a ser tablas dinámicas, como "dinamizo" también el llamado del plugin para esa n cantidad de tablas? Al plugin toca pasarle el id de la tabla que va a usarlo :S

2. Para saber el orden que van seleccionando, el plugin cuenta con un método:

Código Javascript:

tableDnD.serialize()
 

Que es un arreglo que contiene los índices del orden y los id de los registros. Lo uso para hacer el ajax y pasarle el nuevo orden a la base de datos y realizar el update.

El problema viene que para recibir el post (el que genera ese método), debo llamar el id de la tabla que ordenaron, pero si logro hacer el llamado a tablas dinámicas, según yo, no sabría cuál es la tabla en cuestión que usaron.



Les dejo como tengo el javascript para que se hagan a una idea:

Código Javascript:

<script type="text/javascript">
    $(document).ready(function(){
        $("#table1").tableDnD({
            onDragClass: "hhh",
            onDrop: function(table, row){
                $.ajax({
                    type: 'post',
                    url: 'producto/ordenar.php',
                    data: $.tableDnD.serialize(),
                    success: function(data){
                        if(data == 1) {
                            var rows = table.tBodies[0].rows;
                            for (var i=0; i<rows.length; i++) {
                                $('#table-products tr[id='+rows[i].id+'] td:first').html(i+1);
                            }
                        }
                    },
                    error: function() {
                        
                    }
                });
            }
        });
 
        $("#table2").tableDnD({
            onDragClass: "hhh",
            onDrop: function(table, row){
                $.ajax({
                    type: 'post',
                    url: 'producto/ordenar.php',
                    data: $.tableDnD.serialize(),
                    success: function(data){
                        if(data == 1) {
                            var rows = table.tBodies[0].rows;
                            for (var i=0; i<rows.length; i++) {
                                $('#table-products2 tr[id='+rows[i].id+'] td:first').html(i+1);
                            }
                        }
                    },
                    error: function() {
 
                    }
                });
            }
        });
    });
</script>
 

Espero me haya hecho entender

Saludos

[masterpuppet]

Que tal Carxl,

yo creo que si le asignas una clase css en común va a funcionar bien, por ejemplo todas las tablas dinámicas tienen la clase serializable, luego con hacer:

Código Javascript:

$(document).ready(function(){
    $('.serializable').tableDnD({
        ...
     });
});
 

debería funcionar.

Saludos.

[Carxl]

Damn! Cómo no se me ocurrió? Claro esa es la solución :) Con eso soluciono lo primero :D

Para lo segundo, como comenté, el plugin entrega todos los datos haciendo referencia al id de la tabla, me imagino, que debo de alguna manera obtener el id que está presente en el atributo id de la tabla y pasarlo como post.

Crees que es así?

Gracias por tu ayuda

[masterpuppet]

El id en las tablas no es obligatorio para el funcionamiento del plugin, esta linea

Código Javascript:

$.tableDnD.serialize()
 

detecta la tabla sobre la que estas haciendo el drag & drop, y hace el serialize sobre la misma, ahora me imagino que vos necesitas el id para saber donde guardar no ?, bueno con crearlo desde PHP, no precisarías mas nada, el plugin te va a generar el string con la tabla y el resto de datos serializados.

Saludos.

[Carxl]

Sí claro, es para hacer uso de los debidos registros...

Entiendo lo que me dices, déjame intento y te cuento

Gracias!

[Carxl]

Hola de nuevo...

Probé lo que me dijiste y efectivamente el plugin manda un variable con el id de la tabla que estás usando que contiene un array. Si no le colocas id a la tabla, pues no envía datos.

Algo así:

Código txt:

<pre>Array
(
    [table2] => Array
        (
            [0] => 
            [1] => 15
            [2] => 14
        )
 
)
</pre>
 

[masterpuppet]

Si pero el problema ahi no es del plugin, es de json, no se puede crear un json a partir de un nombre vacio, este es el string cuando falla

[]=1&[]=2&[]=3

no es correcto, deberia ser algo asi:

tabla[]=1&tabla[]=2&tabla[]=3

para solventar esto, podes hacer algo asi:

Código Javascript:

...
var str = $.tableDnD.serialize().replace(/\[/g, 'tabla[');
$.ajax({
    type: 'post',
    url: 'proxy.php',
    data: str,
    success: function(data){
        if(data == 1) {
            var rows = table.tBodies[0].rows;
            for (var i=0; i<rows.length; i++) {
                $('#table-products tr[id='+rows[i].id+'] td:first').html(i+1);
            }
        }
    },
    error: function() {
 
    }
});
...
 

aunque ahora me perdí un poco, porque en tu caso siempre generarías el id de la tabla a través de PHP no ?

[Carxl]

Hola de nuevo...

Masterpuppet, usé lo que me dijiste y lo adapté a lo que necesito y quedó de la siguiente manera:

Código Javascript:

var str = $.tableDnD.serialize().replace(/table[0-9]*/g, 'tablar');
 

Osea que en el post siempre recibo la misma variable "tablar"

No sé como lo ves? Me funciona bien.

Una cosa más, si se puede, como se puede obtener el id de la tabla que están usando? Se puede?

Saludos y de nuevo gracias

[masterpuppet]

Hola,

creo que no nos estamos entendiendo, o yo me perdí, si la tabla tiene id, no necesitas esto:

Código Javascript:

var str = $.tableDnD.serialize().replace(/table[0-9]*/g, 'tablar');
 

el serialize automaticamente te crea el string con el id de la tabla activa, fuera de esto para obtener la tabla activa es con:

Código Javascript:

var activeTable = $.tableDnD.currentTable;
 

si queres obtener el id seria algo así:

Código Javascript:

var activeTableId = $.tableDnD.currentTable.id;
 

o a través de jQuery,

Código Javascript:

var activeTableId = $($.tableDnD.currentTable).attr('id');
 

y ten en cuenta que en el onDrop el primer parámetro es la tabla y le podes hacer tabla.id o $(tabla).attr('id');

Saludos.

[Carxl]

Hola @masterpuppet.

Respecto a lo que me comentas, de no necesitar la línea que me convierte a "tablar" el id que está siendo usado; si la necesito, para dejar un nombre de la tabla en general y así poder usarla en php. Osea, que siempre recibo la variable "tablar", sin importar el id propio de la tabla usada.

Gracias por mostrarme como leer el id de la tabla usada, me sirvió a la perfección

Ya todo quedó resuelto con la ayuda que me pretaste

Muchas gracias!