jQueryMobile Toggle and Reflow Tables For Android and BlackBerry

Here we see Step by step How to create jQueryMobile Toggle and Reflow Tables For Android and BlackBerry

In this post we build in 20 minutes a jQuery Mobile App , with a toggle Table , where you can hide or display its columns,  for use on all kind of Mobile devices : iPad, iPhone, Nexus , BlackBerry, Nokia,  Acer ,
The data displayed on this table will be loaded in Json format via Ajax.
This Mobile App will look like this:

How to create jQueryMobile Toggle and Reflow Tables For Android and BlackBerry

For this post of jQuery Mobile , we'll need the  jQuery and jQueryMobile Frameworks, so  enter http://jquerymobile.com/ and jQuery web site , and get the latest versions of the files via CDN  . We  will also use a Mobile Emulator, so please refer to this short tutorial on Ripple Emulator setup.

Also, this basic   "First jQueryMobile App" Tutorial explains the installation of both the frameworks and the emulator in detail.
After you got the references, add them to the Head of the HTML5 file:

First, we'll add a Header with a NavBar , using the data-role="page" and the data-role="header" with a "fixed" attribute to fix it as the user scrolls the screen :

Now we create a "main" div with our table: we use the data-role=table and the data-mode=columntoggle, which allows the user to display/hide the columns. If you don't use "columntoggle", the table will be displayed as "Reflow" mode, meaning that ALL columns are displayed, and in small screens, all data is grouped in chunks corresponding to each row.

Then you define a data-priority directive from 1 (most important field) to 6 (less important column).

If you do not define a data-priority for a column, it will be always displayed:

We also define a button for calling the function that loads the table data.

Finally, we write the markup for a Footer with a Navbar as follows:

The script which loads the data includes a call to the jQuery  $.ajax method, to the URL where a text file contains JSON data for the table.

The HTTP request uses a GET method and, this is really important, we tell the server that we are expecting data in JSON format, meaning that the request's "Accept" header will include "application / json".

We add two callback functions : error and success.

In case of success, we perform a $.each() loop over the JSON data, which is built on key/value pairs, where the Key is the "id" field, and the Value is the Customer object.

For each customer, we append to the Table a Row with a Cell (<td>) per column:

Very important too, we REFRESH the Table after adding the Row, so that the Toggle functionality will include the appended rows.

We customized this Mobile using the following style in a CSS3 file:

And this is how the jQuery Mobile Toggle Table looks like:

Hoping this post was helpful for you...

Happy programming.....

      by Carmel Schvartzman

כתב: כרמל שוורצמן