2012-04-04 4 views
2

Ich erstelle eine mobile optimierte Website, die dynamisch durch Erkennen einer Anfrage von einem mobilen Gerät erstellt wird, manipulieren die vorhandene Seite für mobile optimiert mit PHP und der HTML-Parser, QueryPath. Einige der Seiten, die ich manipulieren möchte, enthalten HTML-Tabellen, z. B. this one, die auf Mobilgeräten nicht gut angezeigt werden.dynamisch ändern HTML-Tabellen zur Anzeige auf Handy

Ich bin auf der Suche nach einer Funktion, die jede HTML-Tabelle mit einer beliebigen Anzahl von Zeilen und Spalten verarbeiten und manipulieren kann, so dass es gut formatiert auf einem mobilen Gerät angezeigt wird. Ich benutze das jquery mobile Framework.

eine Lösung in PHP oder Javascript/Jquery wäre großartig.

ist hier ein jsFiddle von dem, was ich meine: Link

+0

Sie könnten die Tabelle in Abhängigkeit codieren. –

+0

@ChristopherMarshall danke dafür. Ich werde mehr auf reaktionsfähige Tabellen schauen. Ich habe nicht die Möglichkeit, die ursprünglichen Tabellen zu erstellen oder zu bearbeiten, ich manipuliere nur die vorhandenen Tabellen. Ich habe das Gefühl, dass dies zu einem Problem beim Erstellen von Markup führen kann, um jede Tabelle zu behandeln. – JDV590

+0

Es geht nur durch CSS. Wenn Sie Zugriff auf die Stile haben, sollten Sie dies verantwortungsvoll für Ihre mobilen Geräte codieren:} –

Antwort

3

ich diesen ansprechende Tabelle Ansatz von Filament verwendet habe - responsive tables, demo und verwandelte sie in eine JQuery Mobile „Erweiterung“ genannt Tableview - siehe here.

Um es zu verwenden, müssen Sie nur innerhalb des HTML-Markups angeben, welche Spalten am meisten, mehr, weniger wichtig sind, plus die entsprechenden JQM-Trigger und die Erweiterung den Rest. Je nach Bildschirmgröße werden Prioritätsspalten angezeigt, während die anderen Spalten ausgeblendet sind.

Ich habe die Schaltfläche "Anzeige" und das Menü aus dem ursprünglichen Beispiel in eine benutzerdefinierte JQM-Auswahl geändert, mit der Sie Spalten nach Bedarf umschalten können, einen Filter (wie JQM Listview), sortierbare Header (nur eingebettete Schaltflächen, keine Funktionalität), dynamische Checkboxen, Hervorhebungen und einiges mehr.

Die Erweiterung ist nicht abgeschlossen und enthält keine Logik (Sortierung, Paginierung usw.), außer für den Filter. Ich arbeite auch an einer datatables.net Version von TableView. Lass es mich wissen, wenn du ein funktionierendes Beispiel dafür brauchst. Mehr oder weniger gut gemacht.