Tableview - table plugin for Jquery Mobile

version:    v.1 using JQM 1.2.0
author:     Sven Franck [email protected]
credits:    Maggie Wachs - Responsive Table Design
               Allan Jardine - Datatables.net

No-Func/Func version

The plugin is available in two version. The No-Func (basic) tableview version is an HTML table enhanced by JQM. Like in listviews there is a filter extension available. Other than that, no-func has no functionality. It only provides the looks.

The Func tableview version is integrated into the Jquery datatables plugin by Allan Jardine. Tableview adds a third layout mode (named JqueryMobileUI - next to datatables Standard and JqueryUI). This tableview version must be triggered from within the regular datatables call ( with enhancement being done on datatable's fnHeaderCallback and fnDrawCallback functions).

Demo

Can be found here: tableview demo

Required Files

a) No-Func
               tableview.js
               tableview.filter.js (optional)
               jquery.mobile.tableview.css

b) Func
               datatables.js (modified!)
               jquery.mobile.tableview.css

Layout

A JQM tableview table will look like this:

Table-Top-Wrapper

THEAD (table header rows)

TBODY (table )

TFOOT (table footer rows)

Table-Bottom-Wrapper

Responsiveness

Tableview uses a responsive layout (based on Responsive Table Design by Maggie Wachs). This means that depending on the available screen size, certain columns will be hidden to fit the table on any display. There is also a toggle menu, so users can modify the table to hide/show the columns they are interested in. To use this feature, you can give the following classes to your header cells:

               persist = columns with this class will always be visible and cannot be toggled
               essential = columns can be toggled, will be shown if all persist fit on screen
               option = columns can be toggled, will be shown if all persist and essential fit on screen
               [no class] = columns can be toggled, will be shown if all persist, essential and optional fit on screen

Just add the specific class to your thead th cells and the plugin will take care of the rest. (Note: Make sure you are not using more than 2-3 persisting classes, because on a smartphone this is usually all that fits on the screen).

Multi Column Headers

Right now tableview can handle one and two column headers. More is... tricky.

Configuration

The following attributes can be set on the table:

0) Initialize

Config:	Init
Default value:	[none]
Declare On:	table
Attribute:	data-role="tableview"
Info:	Tell tableview to enhance the table.

1) Wrapper/Grids/Slot-Machine

Config:	topContainer/bottomContainer
Default value:	NULL
Declare On:	[plugin option]
Attribute:	[none]
Info:	You can specify elements that should server as top and bottom wrappers. If they are not specified, tableview will create wrappers automatically and use JQM grid to add 3 slots in each wrapper, giving you a total of 6 slots to add custom button elements to the table.

Config:	bottom/topContainerGrid
Default value:	3
Declare On:	[plugin option]
Attribute:	[none]
Info:	You can set the number of grids to use in the wrappers. 1,2 or 3 grids are possible. By default tableview creates 3 grid layouts.

Config:	Fill slots (1)
Default value:	[none]
Declare On:	any div element
Attribute:	data-slot="true"
Info:	Use this attribute to label an element to be added to a slot on the table top and bottom wrapper grid. Top grid has slots 1 (left), 2 (middle), 3 (right) by default. Bottom wrapper has slots 4 (left), 5 (middle) and 6 (right) by default.

Config:	Fill Slots (2)
Default value:	[none]
Declare On:	any div element
Attribute:	data-slot-id="1|2|3|4|5|6"
Info:	This tells the plugin in which slot the element should be dropped.

2) Toggle Menu

Config:	toggleMenu
Default value:	popup
Declare On:	[plugin option]
Attribute:	[none]
Info:	The plugin adds a toggle menu, which users can use to manually hide/show columns of a table. All columns except persist columns can be toggled. The menu can either be a JQM popup or a native select element.

Config:	toggleCueText
Default value:	hide/show columns
Declare On:	[plugin option]
Attribute:	[none]
Info:	The text to display on the column toggle popup button, select element

Config:	toggleSlot
Default value:	3
Declare On:	[plugin option]
Attribute:	[none]
Info:	The default slot into which the toggle menu will be dropped

Config:	toggleIcon
Default value:	gear
Declare On:	[plugin option]
Attribute:	[none]
Info:	The default icon for the toggle menu

Config:	toggleIconPos
Default value:	left
Declare On:	[plugin option]
Attribute:	[none]
Info:	Default icon position.

3) Themes

Config:	headerTheme
Default value:	c
Declare On:	[plugin option]
Attribute:	[none]
Info:	Theme to use for the table header cells.

Config:	wrapperTheme
Default value:	a
Declare On:	[plugin option]
Attribute:	[none]
Info:	Theme to be used for table top and bottom wrappers.

Config:	oddTheme
Default value:	c
Declare On:	[plugin option]
Attribute:	[none]
Info:	Theme to use for odd rows

Config:	evenTheme
Default value:	d
Declare On:	[plugin option]
Attribute:	[none]
Info:	Theme to use for even rows

4) Table enhancement

Config:	Embedded Selects
Default value:	[none]
Declare On:	table
Attribute:	data-embedded-selects="true"
Info:	Use this attribute, if your elements should be embedded into the wrappers vs. being regular buttons/select elemens. Embedding stretches to available width/height, removes all shadows, corners and borders.

Config:	Inset
Default value:	[none]
Declare On:	table
Attribute:	data-inset="true"
Info:	Add 15px margin and round borders to the table. Without it, the table will stretch full screen width.

Config:	Checkers
Default value:	[none]
Declare On:	table
Attribute:	data-selectable="true"
Info:	If you want to have your rows selectable (visually!), you can add this attribute to the table. The plugin will add a persistent column with icon only checkboxes. In the header a select all/unselect all checkbox will be added. You will need to add the underlying logic, but the visuals are all set by tableview.

Config:	Sortables/td>
Default value:	[none]
Declare On:	table header cells (THEAD TH)
Attribute:	data-sortable="true"
Info:	This turns a column header into a sortable button (visually - no sorting function). Buttons are embedded and use the arrow up/down icons. You will need to add the logic to sort yourself.

Config:	Filter
Default value:	[none]
Declare On:	table
Attribute:	data-filter="true"
Info:	>Same as in JQM listview. This extension adds a filter element to filter all visible records. Note: The filter will be added in slot 2, so don't put anything there, if you want to use the filter.

tablview Func Version (coming next)