dynamically alter html tables to display on mobile - 【StackMirror】|php|jquery|jquery-mobile|html-parsing|querypath

I am creating a mobile optimized website that is dynamically created by recognizing a request from a mobile device, manipulating the existing page to be mobile optimized using php and the html parser, QueryPath. Some of the pages I plan to manipulate contain html tables, such as this one, which to don't display well on mobile.

I am looking for a function that can handle any html table of any amount of rows and columns and manipulate it so it will show up well formatted on a mobile device. I am using the jquery mobile framework.

a solution in either php or javascript/jquery would be great.

Here is a jsFiddle of what I mean: Link

2012-04-04 20:24
by JDV590

You could code the table responsively - Christopher Marshall 2012-04-04 20:28

@ChristopherMarshall thanks for that. I will look more into responsive tables. I do not have the ability to create or edit the original tables, I only manipulate the existing tables. I feel as though this may cause a problem creating markup to handle any tabl - JDV590 2012-04-04 20:57

It's just through css. If you have access to the styles, you should be good to code this responsibly for your mobile devices : - Christopher Marshall 2012-04-04 20:58

You could wrap the table(s) in a container that the user can pan around to see the whole thing. To get good cross-device support you'll have to use a JS scroller script like iScroll 4 - Jasper 2012-04-04 21:00

I have used this responsive table approach from Filament - responsive tables, demo and turned it into an Jquery Mobile "extension" called tableview - see here.

To use it, you only need to specifiy inside the HTML markup, which columns are most, more, less important, plus add the respective JQM triggers and the extension handles the rest. Depending on screen size, priority columns are shown, while the other columns are hidden.

I changed the "display" button and menu from the original example to a JQM custom select, with which you can toggle cols as you need, added a filter (same as JQM listview), sortable headers (only embedded buttons, no functionality), dynamic checkboxes, highlighting and some other stuff.

The extension is not finished and does not contain any logic (sorting, pagination etc), except for the filter.

I'm also working on a datatables.net version of tableview. Let me know, if you need a working example of this. More or less done as well.

2012-04-04 21:06
by frequent