Demo

See the Pen Tableable - demo by manuel piesold (@manuelpiesold) on CodePen.

See the Pen Tableable - demo on blockelement by manuel piesold (@manuelpiesold) on CodePen.

Usage

<!-- include requiered sources -->
<script src="http://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>

<!-- include plugin sources -->
<script src="dist/jquery.tableable.min.js"></script>

<!-- call the plugin -->
<script>
    var options = { filter: {...}, pager: {...}, sorter: {...} };
    $('#element').tableable( options );
</script>

On Blocks

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. These classes have no styles by default and are only used to identify the elements.

  • ta-table
    • ta-thead
      • ta-tr
        • ta-th
    • ta-body
      • ta-tr
        • ta-td

Options

By passing the feature-objects to options you automatically activate the feature.

Filter options

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 []

Pager options

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 page2,3
prevLable String Label for pagerElement that redirects to previous page2,3
nextLable String Label for pagerElement that redirects to next page2,3
lastLable String Label for pagerElement that redirects to last page2,3

Sorter options

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

1 ony useable with dottedPager
2 can contain HTML
3 not shown if empty

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

Contributer

Activity