Datatables-Konfiguration

Datatables bietet eine Reihe sehr nützlicher Konfigurationsmöglichkeiten. In der folgenden Beispielkonfiguration sind einige davon beschrieben. Weitere mögliche Attribute und PlugIns sind in der offiziellen Dokumentation bescmit Beispielen gezeigt hrieben.

Beispielkonfiguration

{
    "layout":{ // Laypout der Tabelle
        "topStart": [{ // Bereich oben links
            "search" : true // Suche anzeigen
        }],
        "topEnd": [{ // Bereich oben rechts
            "pageLength": { // Anzeige der Trefferanzahl
                "menu": [[25, 50, 100, -1], [25, 50, 100, "Alle"]] // Trefferanzahl, Bezeichnung im Menü
            },                  
            "buttons": [ // Buttons für Export
                "copy", 
                "excel", 
                "pdf"
            ]
        }],
        "bottomStart": [ // Bereich unten links
            "paging" // Pagination
        ],
        "bottomEnd": [ // Bereich unten rechts
            "info" // Infoanzeige (gesamte Treffer etc.)
        ]
    },      
    "pageLength": 25, // Standard-Trefferanzahl der Seite
    "stateSave": true, // Status in Local Storage sichern
    "order":[[1, "asc"]], // Sortierung (Spalten-Nr., auf- oder absteigend)

    "destroy": true, // Tabelle in den Originalzustand zurücksetzen (z. B. zum Nachladen anderer Daten per AJAX
    "select": { // Select-Optionen
        "style": "multi", // Auswahlmöglichkeiten (multi, single, os)
        "selector": "td:first-child", // Verortung des Selectors
        "headerCheckbox": false, // Checkbox im Table-Header zur (De-)Aktivierung aller Zeilen
        "selectable": function (rowData) { // Alle Zeilen mit einer bestimmten Eigenschaft nicht auswählbar machen 
            return rowData[3] == "0"; // Angabe der Eigenschaft (muss boolean:true/false zurückgeben)
        }                   
    },
    "columnDefs": [ // Spaltendefinitionen (beginnend mit 0)
        { 
            "targets": [0], // Angabe der Spalte
            "orderable": false, // Spalte ist sortierbar
            "checkboxes": { // Checkboxen anzeigen (in Verbindung mit Select-Funktion)
                "selectRow": false // Selektion über die gesamte Zeile aktivieren (ansonsten nur in der Zelle der Checkbox)
            },
            "render": DataTable.render.select(), // Rendern der checkbox
        }
    ],
    "autoWidth": false, // Automatische Spaltenbreite
    "columns": [ // Manuelle Angabe der Spaltenbreiten (muss zusammen 100% ergeben)
        { "width": "3%" },
        { "width": "7%" },
        { "width": "80%" },
        { "width": "10%" }
    ],          
    "rowCallback": function (row, data){ // Zeilen mit bestimmten Eigenschaften ändern
        if (data[3] != "0"){
            $("td:eq(0)", row).find(".dt-select-checkbox").remove(); // Checkbox entfernen
            $(row).addClass("unselectable"); // Zeile als nicht selektierbar markieren
        }
    }
}