Responsive Tabellen mit jQuery Mobile

Besonders bei Tabellen ist der Platz auf mobilen Geräten ein Thema. Daher sind von jQuery angebotene Möglichkeiten für responsive Tabellen extrem alltagstauglich. Es gibt 2 Arten der Darstellung:

Spaltenumschaltung:
Ist der Platz nicht ausreichend, werden die einzelnen Spalten untereinander angezeigt. Dies ist die Standardeinstellung

Reflow Tabellen:
Die Tabellendaten werden horizontal angezeigt, wenn genügend Platz vorhanden ist. Ansonsten werden diese vertikal gruppiert.

Die vorhandene Bildschirmgröße des Nutzers wird automatisch erkannt und entsprechend die Anzeige der Tabelle umgeschaltet.

Erstellen wir als Erstes eine Tabelle mit Spaltenumschaltung:

Dafür muss bei dem HTML-Element <table> die Attribute data-role="table" und eine Klasse mit der Bezeichnung class="ui-responsive".

Der HTML-Code der Tabelle entspricht dem üblichen HTML-Befehlen - wichtig ist die Nutzung von <thead> für die Struktur - somit ist klar, welche Tabellenzellen die Überschrift darstellen.

Im Folgenden der Standardaufbau einer Tabelle:

<table id="meineTabelle">
  <thead>
    <tr>
      <th>ID</th>
      <th>Datum</th>
      <th>Beginn</th>
      <th>Veranstaltungsort</th>
      <th>Anmerkung</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>1</td>
      <td>18.4. </td>
      <td>19:30</td>
      <td>Im Absacker</td>
      <td>Blues meets Hard Rock</td>
    </tr>
    <tr>
      <td>1</td>
      <td>28.6. </td>
      <td>20:20</td>
      <td>Stadthalle Donzstadt</td>
      <td>Blues meets Heavy Metal</td>
    </tr>
  </tbody>
</table>

Um jetzt die Tabelle nun für jQuery mobil auszuzeichnen werden die entsprechenden Attribute im HTML-Befehle table aufgenommen.

<table id="meineTabelle" data-role="table" class="ui-responsive">
  <thead>

Wollen wir eine „Reflow Tabelle“, dann muss die bestehende Tabelle nur um folgende Angabe aus dem anschließenden Kapitel erweitert werden.

Reflow Tabelle: Auswahl der Felder durch Nutzer

Die Tabelle zeigt nach vorhandenen Platz die entsprechenden Spalten an.

Zusätzlich kann bei der Tabelle die Möglichkeit zur Auswahl der angezeigten Felder durch den Nutzer angeboten werden. Dazu wird das HTML-Element mit dem Attribut data-mode="columntoggle" erweitert.

<table id="meineTabelle" data-role="table" class="ui-responsive" data-mode="columntoggle">
    <thead>

Ohne weitere Einstellungen werden nun die Spalten von der rechten Seite ab verborgen, wenn nicht genügend Anzeigeraum vorhanden ist. Dies kann aber über die Angaben einer Priorität bei den <th> mitgegeben werden.

Dabei gilt:
1 = höchste Priorität
6 = niedrigste Priorität

Ohne Angabe einer Priorität wird diese Spalte immer angezeigt!

<table id="meineTabelle">
  <thead>
    <tr>
      <th data-priority="4">ID</th>
      <th>Datum</th>
      <th data-priority="1">Beginn</th>
      <th data-priority="2">Veranstaltungsort</th>
      <th data-priority="3">Anmerkung</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>1</td>

Soll die Beschriftung des Auswahlbuttons für die Spalten geändert werden, kann die über das Attribut:
data-column-btn-text="Anklicken zum Anzeigen/Verbergen".

Design der Tabelle

Das Design wird wie üblich über CSS umgesetzt. Sollen beispielsweise die Reihen abwechselnd zur besseren Lesbarkeit die Hintergrundfarbe ändern, dann läuft dies über die folgende CSS-Anweisung:

<style>
tr:nth-child(even) {
    background-color: limegreen;
}
</style>