tableDnD-Anleitung: Tabelle per Drag'n'Drop sortieren

jQuery ist für den Webentwickler ein Werkzeugkasten, der ihm viel Arbeit bei der täglichen Arbeit abnimmt. Genauso wie in diesem Artikel: hier wird gezeigt, wie man eine Tabelle mit der Maus bzw. per Drag'n'Drop sortiert und gleichzeitig die neue Reihenfolge in der Datenbank abspeichert. Das ist vor allem nützlich, wenn man Listen mit einer vorgegeben Reihenfolge der Datensätze administrieren möchte. Beispiele sind die Prozessorlisten oder die Grafikarten-Rangliste auf PC-Erfahrung.de, die u.a. nach ihrer Leistung sortiert werden und jede Grafikkarte einen fest Rang/Platz besitzt. Um die Reihenfolge solcher Listen mit den Standard-HTML-Formularen zu bewerkstelligen, würde in einer Odyssee von <form>-Ketten enden.

Folgendes Bild soll die zu lösende Aufgabe der Tabellensortierung per Maus verdeutlichen:

Tabelle mit der Maus (Drag'n'Drop) sortieren
Tabelle mit der Maus (Drag'n'Drop) sortieren: Zeile mit Maus markieren, verschieben
und im Hintergrund werden die Datenbankabfragen durchgeführt.

Aber es gibt eine kleine, nette Javascript-Bibliothek namens TableDnd (isocra), welches uns diese Aufgabe erleichtert. In diesem Artikel wird nun gezeigt, wie man dieses kleine Plugin verwenden kann.

jQuery- und TableDnD-Ressourcen einbinden

Wer es noch nicht getan hat, sollte sich die aktuellen Bibliotheken von jQuery und TableDnd (isocra) herunterladen. Diese werden anschließend im HEAD des HTML-Dokumentes eingebunden: 

<script src="jquery-1.11.1.min.js"></script>
<script src="jquery.tablednd.js"></script>

Tabellen und Zeilen mit IDs versehen

Das Sortieren kann man sowohl für eine als auch mehrere Tabellen durchführen. Wichtig ist, dass jede Tabelle eine eindeutige ID zugewiesen bekommt. Dasselbe gilt für die Zeilen. Hierbei entspricht die ID dem späteren Datensatz in der Datenbank.

Die Einteilung in thead und tbody ist deswegen nützlich, um zu verhindern, dass auch die Tabellenüberschriften verschoben werden können.  

<table id="myTableToSort_100">
<thead>
    <tr><th></th></tr>
</thead>
<tbody>
    <tr id="1000"><td></td></tr>
    <tr id="1001"><td></td></tr>
    <tr id="1002"><td></td></tr>
</tbody>
</table>

<table id="myTableToSort_101">
<thead>
    <tr><th></th></tr>
</thead>
<tbody>
    <tr id="2000"><td></td></tr>
    <tr id="2001"><td></td></tr>
    <tr id="2002"><td></td></tr>
</tbody>
</table>

 TableDnD wertet die IDs aus und übermittelt immer ein Array, welches wie folgt aufgebaut ist: 

array (
    'myTableToSort_100' => array(
        '0' => 1000,
        '1' => 1001,
        '2' => 1002
    )
)

Theoretisch könnte man die ID der Tabelle auch den Namen der Datenbank setzen.

Javascript: jQuery und TableDnD Code

Die Bibliotheken sind eingebunden und das HTML-Grundgerüst steht. Nun beginnt die Zauberei mit jQuery und TableDnD. Um das Sortieren Maus zu aktivieren, fügt man folgenden JavaScript-Code hinzu: 

// Tabelle Drag And Drop

// Warte, bis Dokument vollständig geladen wurde
$(document).ready(function() {
    
    // Alle Tabellen auswählen, die das Attribut
    // id haben, welches mit myTableToSort beginnt
    $("table[id^='myTableToSort']").tableDnD({
        
        // Führe folgende Funktion aus, wenn die 
        // Zeile verschoben und losgelassen wurde (drop)
        onDrop: function() {
            // Speichere die Parameter der sortierten Tabelle.
            // Werte werden als serialisiertes Array übermittelt.
            // ==> wert[]=1001&wert[]=1002&wert[]=1003
            // Dabei ist das Array nach der geänderten Reihenfolge sortiert,
            // so dass wir später dass Array chronologisch durchlaufen
            // und die Plätze neu setzen (UPDATE ... SET platz = $x)
            var parameter = $.tableDnD.serialize();
            
            // externes Updates-Skript aufrufen
            $.ajax({
                url: "update_rang.php",
                type: "get",
                data:{ "parameter":parameter } ,
                success: function(response) { }
            });
        }
    });
});

Dieses kleine jQuery-Snippet spricht im Prinzip alle Tabellen an, in denen wir sortieren wollen. Werden die Zeilen verschoben (ondrop), wird ein externes Skript update_rang.php aufgerufen. Diesem PHP-Skript werden die Paremeter (IDs der Tabelle und Zeilen) übermittelt, welches wir für unsere Datenbank-Operationen nutzen werden.

Die Datei update_rang.php

Bei jedem Verschieben mit der Maus wird diese Datei aufgerufen. Hier bereiten wir das Array auf und bauen uns daraus die UPDATE-Befehle für die SQL-Datenbank: 

// Serialisierte Paramater dekodieren
// Enthält das Array mit IDs.
$param = urldecode ($_GET['parameter']);
$arrParam = array();
parse_str($param,$arrParam);

if(is_array($arrParam)) {

    // Werte werden mit Tabellennamen ins Array gespeichert,
    // der hier entfernt wird
    $arrParam = array_values($arrParam);
    $arrParam = $arrParam[0];

    // Mehr als zwei Werte vorhanden
    if(is_array($arrParam) AND count($arrParam) > 0 ) {

        foreach ($arrParam AS $platz=>$id) {
            $query = "
                UPDATE
                    myTable
                SET
                    rang = '" . ($platz + 1) . "'
                WHERE
                    id = '" . intval($id) . "'
            ";
            mysql_query($query);
        }
    }
}

That's it! Mit wenigen Handgriffen hat man eine tolle Funktionalität, die einem die alltägliche Arbeit immens erleichtert. Viel Spaß beim "Nachprogrammieren"!