jQuery tableable

A plugin to filter, paginate and sort html tables and any blockelement that should act as a table.

Usage

1. Include jQuery:

   <script src="http://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>

2. Include plugin:

   <script src="dist/jquery.tableable.min.js"></script>

3. Call the plugin:

   var options = { filter: {...}, pager: {...}, sorter: {...} };
   $("#element").tableable( options );

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.

<div class="ta-table">
    <div class="ta-thead">
        <div class="ta-tr">
            <div class="ta-th">Name</div>
            <div class="ta-th" data-no-filter>Age</div>
        </div>
    </div>
    <div class="ta-tbody">
        <div class="ta-tr">
            <div class="ta-td">Jack</div>
            <div class="ta-td">21</div>
        </div>
        <div class="ta-tr">
            <div class="ta-td">Jim</div>
            <div class="ta-td">25</div>
        </div>
        <div class="ta-tr">
            <div class="ta-td">Jonny</div>
            <div class="ta-td">24</div>
        </div>
    </div>
</div>

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

1. fork it!
2. create your new feature branch: git checkout -b new-feature-name
3. npm install
4. make your changes on the src folder, never on the dist
5. check the style: grunt
6. commit your changes: git commit -m 'add some feature'
7. push to the branch: git push origin new-feature-name
8. 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

BSD-3-Clause

Copyright (c) 2014 guhberlin

Please see LICENSE.md for detailed information.