tableable v3.0.0

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.

Observed by plugin

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.