Package Exports

tableable

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (tableable) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

jQuery tableable

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

Usage

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 );

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	[]
`noOfShownPagesStartEnd`¹	Integer	number of displayed pagerElements at the start and end of the pager	2
`noOfShownPagesNextToCurrentPage`¹	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
(¹) ony useable with dottedPager - (²) can contain HTML - (³) 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 src folder, never on the dist
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

BSD-3-Clause

Please see LICENSE.md for detailed information.