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.
Failed to load latest commit information.


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.


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


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

      non_sort_class: "css_class_for_neutral_icon",
      ascending_sort_class: "css_class_for_ascending_icon",
      descending_sort_class: "css_class_for_descending_icon"


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