Usando jQuery UI ordenable con tablas HTML

80

Quiero generar algunos datos de la base de datos en una tabla HTML y quiero que el usuario pueda reordenar las filas de la tabla. Para lograr esto, utilicé jQuery UI ordenable, así:

<script>
    $(function() {
        $( "#sortable" ).sortable();
        $( "#sortable" ).disableSelection();
    });
    </script>
<?php 
 while($row = mysql_fetch_assoc($co_authors)) {
                    echo "<tr id='sortable'><td>{$row['author_email']}</td>
                         <td>{$row['coauthor_level']}</td>";
                         <td><button class='remove' id='remove' name='remove' email="<?php echo $row['author_email'] ?>"
                            paper="<?php echo $row['paper_id'] ?>">Remove</button></td>
                         </tr>";
                }
?>

El problema es que cuando arrastro una tabla tr, solo tdse arrastran. Además, y lo más importante, solo se puede arrastrar la primera fila: el efecto no se aplica a otras filas. ¿Como puedo resolver esto?

Samer El Gendy
fuente
4
idlos atributos deben ser únicos dentro de un documento. Su código está creando varios elementos con el mismo id( sortable). Intente usar un classen su lugar.
Frédéric Hamidi
Por lo que vale, los tds con el contenteditableatributo no parecen ser editables si su fila se puede ordenar usando este método. Solo un FYI.
jg2703

Respuestas:

195

Puede llamar a sortableen <tbody>lugar de en las filas individuales.

<table>
    <tbody>
        <tr> 
            <td>1</td>
            <td>2</td>
        </tr>
        <tr>
            <td>3</td>
            <td>4</td> 
        </tr>
        <tr>
            <td>5</td>
            <td>6</td>
        </tr>  
    </tbody>    
</table><script>
    $('tbody').sortable();
</script> 

TJ VanToll
fuente
esto funciona bien ahora, y todo el tr se puede arrastrar, pero el nuevo problema ahora es que la posición del tr no cambia, supongo que porque obtengo datos de la base de datos y deberían venir en ese orden, así que puedo cambiar el posicionamiento en la base de datos también?
Samer El Gendy
Sí, si desea conservar las posiciones ordenadas, tendrá que conservar esa información en algún lugar.
TJ VanToll
3
¡¡SÍ GRACIAS !! Tenía tanto miedo de tener que rehacer todo el diseño y solo tenía una hora para hacerlo funcionar, ¡muchas gracias!
NaturalBornCamper
5
Publicación en nombre del usuario236766 : es posible que desee cambiar el último <tbody>a </tbody>;)
NathanOliver
No sé por qué diablos decidí llamar ordenable en la mesa y no el elemento tbody ... ¡Gracias!
ksudu94