tableview for Jquery Mobile
Demo: tableview
version 0.3 - based on JQM 1.3.0 (March 2013)
####New features 0.3
- added refresh method. Call
$( your table ).table("refresh") data-override="true"disables the default JQM filter- fixed multi row header not correctly toggling
####How to use
As JQM now supports tables, this version of tableview is hacked into the current
JQM widgets. To use it, you just need to replace the following files:
##JS
tables.js
table.columntoggle.js
table.reflow.js
listview.filter.js (optional if you want to use the filter on tables, too)
##CSS
jquery.mobile.table.columntoggle.css
jquery.mobile.table.css
With the files provided in the repo you can still use both column-toggle and reflow mode in tables. Both should continue to work normally.
In addition the widgets allow to do the following:
1. Multiple header rows
Currently only working when the split header cells are at the end of the table
(still need to fix this).
2. Added options
The widgets add the following options to a table:
data-sortable="true" [set on table header cell, default: undefined]
Declare this on a header cell to convert the cell into a button (arrow-up/down).
There is no functionality on the button. You will have to add this yourself.
data-filter="true" [set on table: default: null]
This will add a table row filter to the table. To use it, you need to replace
the listview.filter widget with the filterview widget, which can be used for
both tables and listviews.
data-popup-theme [set on table: default: c]
Set a theme to the popup.
data-button-popup-theme [set on table, default: c]
Set a theme to checkboxes inside the popup.
data-popup-btn-icon [set on table, default: gear]
Set a icon for the popup button.
data-popup-btn-iconpos [set on table, default: left]
Set the iconpos of the popup button.
data-header [set on table, default: "c"]
Set a theme for the table header.
data-wrapper [set on table, default: "a"]
Set a theme for the table top and bottom containers.
data-top/bottom-container [set on table, default: null]
Add a top and or bottom container to the table. This is placed before the table
and by default has 3 grids you can add buttons to.
data-top/bottom-grid [set on table, default: 3]
Set the number of grids you want in the top and bottom container (up to 5 grids).
data-slot-id [set on sibling select/button]
Set a number to move this element into the top/bottom container. Tested with
selects and buttons.
data-create [set on table, default: undefined]
If you specify a value of false, JQM will NOT add markup to the table. This
is useful if you want to generate finished code on the server or if you are
rendering widgets yourself on the client. All event bindings will be set, but
no extra markup is generated.
The following features can be used with the filter widget:
data-relate [set on different table or listview]
This allows to "connect" different listviews or tables. For example you could use
a panel with a listview & filter and have another listview in the main section (
products, icons....). Specifying data-relate on the 2nd listview/table will make
the filter work for both widgets, so you can filter two datasets with a single
filter.
data-filter-slot [set on table]
This will move the filter to the slot specified in the top or bottom container.
I will modify this to make this more generic, so you can place the filter where
ever you want.
data-override [0.3 set on table]
Setting this parameter will disable the filter completely (vs. customFilterCallback
using the filter but with custom logic. Use this if you want to update the table
or listview with dynamic data.
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent