Home / Programmazione / Javascript - AJAX / jQuery UI Sortable con tabelle
Mattepuffo

jQuery UI Sortable con tabelle

jQuery UI Sortable con tabelle

Ho scritto già un paio di articoli su jQuery UI Sortable, ma sempre usando le liste.

Oggi vediamo come applicare il sortable alle tabelle.

In pratica vogliamo ordinare le righe delle tabelle, e non le voci di una lista.

Prima richiamo le librerie:

<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/themes/smoothness/jquery-ui.css">
<script type="text/javascript" src="//code.jquery.com/jquery-2.1.3.min.js"></script>
<script type="text/javascript" src="//netdna.bootstrapcdn.com/bootstrap/3.3.1/js/bootstrap.min.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js"></script> 

Questa la tabella (riempita tramite PHP, ma non è importante):

<table class="sortable">
    <tbody>
        <?php foreach ($array as $var): ?>
            <tr>
                <td><?php echo $var['prodotto_nome']; ?></td>
                <td><?php echo $var['cat_nome']; ?></td>
            </tr>
        <?php endforeach; ?>
    </tbody>
</table> 

Questo invece il Javascript:

<script>
    var fixHelper = function (e, ui) {
        ui.children().each(function () {
            $(this).width($(this).width());
        });
        return ui;
    };
    $(function () {
        $(".sortable tbody").sortable({
            helper: fixHelper
        }).disableSelection();
    });
</script>

La funzione fixHelper, serve solo per evitare le celle si ridimensionino in fase di spostamento; non è obbligatoria, ma rende l'animazione più carina.

Enjoy!