Sort and Filter extension of jQuery for HTML Tables
Switch branches/tags
Nothing to show
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Failed to load latest commit information.
demo
js
LICENSE
README.md

README.md

jquery.tableSortFilter

jQuery tableSortFilter is a minimal plugin to make your html tables sortable and filterable.

It uses no styling, so it will apply these features to your own formats and styles.

The Filter or Search will search the displayed text of every cell in the table and filter the rows as you type.

Installation

Just include this script after jQuery

<script src='jquery.js'></script>
<script src='jquery.tableSortFilter.js'></script>

The Table

There are a few requirements of the table:

  • The Header Row must be in a <thead> tag
  • Each Column Header must be in a <th> tag
  • Every <th> must have unique content in it
  • The All content rows must be in a <tbody> tag
  • There must be equal number of <td> tags in each row as there are <th> rows in the header

Initialization

To set a search field and table to be dynamicaly filterable and sortable, call $.tableSortFilter() at the bottom:

<script>
    $.tableSortFilter({
      table_selector:"#table_id",
      search_selector:"#search_input_id"
      filter_icon_element:"tag_name_of_icon",
      non_sort_class: "css_class_for_neutral_icon",
      ascending_sort_class: "css_class_for_ascending_icon",
      descending_sort_class: "css_class_for_descending_icon"
    });
</script>

Options

OptionDescriptionExample using Bootstrap3
table_selectorThe jQuery Selector for the table to be sorted"#table"
search_selectorThe jQuery Selector for the input to filter by"#search"
filter_icon_elementThe element tag name for the sort icon"span"
non_sort_classThe css class to be used on non sorted columns"glyphicon glyphicon-resize-vertical"
ascending_sort_classThe css class to be used the column when sorted ascending"glyphicon glyphicon-arrow-up"
ascending_sort_classThe css class to be used the column when sorted descending"glyphicon glyphicon-arrow-down"
debug (optional)Set to true to dump variables to console.log()false

Demo Using Bootstrap3

[Demo] (http://mc706.github.io/jquery.tableSortFilter/index.html)