-
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 | [] |
noOfShownPagesStartEnd 1 |
Integer | number of displayed pagerElements at the start and end of the pager | 2 |
noOfShownPagesNextToCurrentPage 1 |
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
src
folder, 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.