jQuery tableable
A plugin to filter, paginate and sort html tables and any blockelement that should act as a table.
Usage
-
Include jQuery:
-
Include plugin:
-
Call the plugin:
var options = filter: ... pager: ... sorter: ... ;;
On BlockElements
To use Tableable on BlockElements (e.g. div) you have to pass some special classes on your elements to tell the plugin what is what.
Name Age Jack 21 Jim 25 Jonny 24 These classes have no styles by default and are only used to identify the elements.
Options
By passing the feature-objects to options you automatically activate the feature.
FilterOpts
| Option | Type | Description | Default |
|---|---|---|---|
filterInputSelector |
String | selector for the filter-input-element | |
notFilterAttribute |
String | disable filter on th if they have this attr | data-no-filter |
ignoreCase |
Boolean | en-/disable casesensetive filtering | false |
customFilteredAttributes |
Array | custom attributes for additional external filters | [] |
PagerOpts
| Option | Type | Description | Default |
|---|---|---|---|
pagerListSelector |
String | selector for the pager-ul-element | |
useDottedPager |
Boolean | en-/disable dotted pager | true |
rowsPerPage |
Integer | number of displayed rows per page | 5 |
customFilteredAttributes |
Array | custom attributes for external filters | [] |
noOfShownPagesStartEnd1 |
Integer | number of displayed pagerElements at the start and end of the pager | 2 |
noOfShownPagesNextToCurrentPage1 |
Integer | number of displayed pagerElements on either side of the current pagerElement | 1 |
inactivPagerIndex |
String | PagerIndex for pagerElements that dont provoke pagechanges | -1 |
firstLable |
String | Label for pagerElement that redirects to first page 2,3 | |
prevLable |
String | Label for pagerElement that redirects to previous page 2,3 | |
nextLable |
String | Label for pagerElement that redirects to next page 2,3 | |
lastLable |
String | Label for pagerElement that redirects to last page 2,3 |
(1) ony useable with dottedPager - (2) can contain HTML - (3) not shown if empty
SorterOpts
| Option | Type | Description | Default |
|---|---|---|---|
notSortableAttribute |
String | disable sort on th if they have this attr | data-no-sort |
sortTriggerSelector |
String | selector where to find sorttrigger in th | |
jumpPageOneAfterSort |
Boolean | should jump back to page one after sorting | true |
initalSortColIndex |
Integer | sort the table inital by given columnindex | -1 |
Events
Thrown by plugin
After filtering, sorting and pageing the plugin will trigger events so you can add observers. All events are triggered on the rootelement.
| Eventname | Trigger |
|---|---|
filtered |
triggered each time the value of filter input is changed, so that the filter runs on the table |
sorted |
triggered each time the table is resorted |
paged |
triggered each time the table is paged |
updated |
triggered each time filtered or sorted is triggered |
Observed by plugin
| Eventname | Trigger |
|---|---|
refresh |
you can trigger this event to retrigger filter, pager and sorter |
Contributing
- fork it!
- create your new feature branch:
git checkout -b new-feature-name - npm install
- make your changes on the
srcfolder, never on thedist - check the style:
grunt - commit your changes:
git commit -m 'add some feature' - push to the branch:
git push origin new-feature-name - submit a pull request :D
ToDo
- add functionality for sorting table
- add triggers for callbacks like
$('element').on('page-changed') - finish testcases for sorter
- optional sorting on init
- check support for different ie versions
History
Check Releases for detailed changelog.
License
Copyright (c) 2014 guhberlin
Please see LICENSE.md for detailed information.