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> 

Ordinare lista con PHP, MySQL e jQuery

DISCLAIMER: questo articolo è stato interamente riscritto!

Quello che vedremo oggi è come ordinare una lista solamente trascinandola.

L'ordinamento verrà anche salvato in tempo reale su db; quello che di cui abbiamo bisogno è di un campo apposito sulla tabella, di AJAX per inviare una richiesta e di jQuery UI (o simili) per l'ordinamento.

Cominciamo quindi da qui; nell'head della pagina:

<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/start/jquery-ui.css">
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>

A questo punto occupiamoci della pagina.

Prima di tutto ci serve una lista, che di sicuro viene presa da database:

    <ul id="ul_class">
        <?php foreach ($connMod->getClassificazionePerCollezione($coll) as $var): ?>
            <li id="class_<?php echo $var['class_id']; ?>" class="ui-state-default">
                <span class="ui-icon ui-icon-arrowthick-2-n-s"></span>
                <?php echo $var['class_nome']; ?>
            </li>
        <?php endforeach; ?>
    </ul>

Notate che ogni voce della lista ha un id personalizzato, composto da una parte fissa più l'id preso da db.

In questo modo possiamo serializzarlo e passare i relativi valori a database.