-
Include jQuery:
<script src="http://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
-
Include plugin:
<script src="dist/jquery.tableable.min.js"></script>
-
Call the plugin:
var options = { filter: {...}, pager: {...}, sorter: {...} }; $("#element").tableable( 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 |
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 |
| Eventname | Trigger |
|---|---|
refresh |
you can trigger this event to retrigger filter, pager and sorter |
- 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
- 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
Check Releases for detailed changelog.
Copyright (c) 2014 guhberlin
Please see LICENSE.md for detailed information.