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?


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> 


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
Al usar nuestro sitio, usted reconoce que ha leído y comprende nuestra Política de Cookies y Política de Privacidad.
Licensed under cc by-sa 3.0 with attribution required.