Mit der Class Option hover kann beim jQuery Plug-In DataTables eingestellt werden, dass die Tabellen-Zeile unter der Maus hervorgehoben wird. Leider ist die Hervorhebung so schwach, dass sie in Kombination mit Class Option stripe auf den dunkleren Zeilen kaum sichtbar ist.

Hier der CSS-Code, mit dem sich die Hover-Farbe ändern lässt:

#ID.dataTable.hover tbody tr:hover,
#ID.dataTable.display tbody tr:hover {
    background-color: COLOR;
}

Hierbei ist ID die DOM-Id der Tabelle und COLOR die gewünschte Farbe. Die Hover-Farbe ist per Default auf das sehr helle Grau #f6f6f6 eingestellt. Wählt man z.B. das dunklere #e8e8e8, ist die Hervorhebung deutlich erkennbar.

Soll die Hover-Farbe für alle DataTables gelten:

table.dataTable.hover tbody tr:hover,
table.dataTable.display tbody tr:hover {
    background-color: COLOR;
}

Links

• DataTables
• Class Options
• jQuery

Ein leistungsfähiges jQuery Plug-In für Tabellen ist DataTables. Es kann in vielfältiger Weise konfiguriert werden. Einige Anpassungen im Zusammenhang mit dem Filter-Suchfeld sind allerdings schlecht dokumentiert. Das Filter-Suchfeld ist per Default mit dem Label-Text "Search:" beschriftet und befindet sich rechts über der Tabelle. Hier eine kurze Beschreibung, wie dieses Setup geändert werden kann. Im folgenden Code stehen ID, LABEL und WIDTH für die frei wählbaren Angaben DOM-Id der Tabelle, Label-Text und CSS-Breite.

Label-Text setzen (JS):

$('#ID').DataTable({
    ...
    'language': {
        'search': 'LABEL'
    }
});

Suchfeld links positionieren (CSS):

#ID_filter {
    float: left;
}

Suchfeld mittig positionieren (CSS):

#ID_filter {
    width: 100%;
    text-align: center;
}

Größe des Suchfelds ändern (CSS):

#ID_filter input[type="search"] {
    width: WIDTH;
}

Eigenes Suchfeld definieren:

<input type="text" id="searchField" ...>

$('#searchField').on('keyup',function () {
    tab.search(this.value).draw();
});

Das von DataTables erzeugte Suchfeld unterdrücken:

$('#ID').DataTable({
    dom: 't', // nur die Tabelle selbst, ohne Suchfeld etc.
    ...
});

Links

• DataTables
• jQuery