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.