A simple and easy way to add sorting and search/filter functionality to your HTML table. See here for a working example.
- Support for multiple tables on a single page
- Icons indicating sort direction
- Support for hidden sort values
- Preserves previous sort
Note that this package will not work with paginated tables, the whole table has to be visible on the page.
Download the latest version into your project (unpack it wherever you keep your static files or packages). Add the following scripts to the page containing the table you wish to sort or search (make sure to add the local path to the scripts). Put the script somewhere after the table, usually just before the closing body tag.
<script src="./LOCAL_PATH/scripts/searchTable.js"></script>
<script src="./LOCAL_PATH/scripts/sortTable.js"></script>Use the example table provided in the example folder to build up your table or, if you have and existing table follow the instructions bellow.
To make your table sortable add a class of .sortTable to the <table> element
and give it an id if it does not have one already. Make sure you have a
<thead> section, all the headers in this section will become clickable and
will sort the table based on the relevant column. By default, the sort function
sorts alphanumerically, if you would rather sort a column numerically add
data-type="number" to the appropriate header tag.
Sometimes you will want to sort based on a value other than that displayed in
the table. For example if you have a status column with categories 'low',
'medium' and 'high', sorting this alphabetically would not make sense. In
this case you can add a data-sort-value attribute to the relevant <td>
tags. Data with a sort value will be sorted based on that value instead of
the inner text. In the example above we might assign a value of 1 to 'low', 2 to
'medium' and 3 to 'high' so that they are sorted in a more sensible order.
<td data-sort-value="1">Low</td>
<td data-sort-value="2">Medium</td>
<td data-sort-value="3">High</td>Add a search input with a class of .searchInput as below. Set the
data-table-id attribute to the id of the table you wish to search.
<input class="searchInput" data-table-id="TABLE_ID" type="search" placeholder="Search" aria-label="Search" aria-target="TABLE_ID">For multiple tables simply repeat the above steps for each table, making sure each table has a unique id.
The sort function uses a simple bubble sort algorithm. While this is definitely not the fastest or most efficient algorithm for the job it has some advantages. Firstly the algorithm is small and easy to understand making the code base small and easy for an end user to jump in and see what is going on. Secondly it is very memory efficient, consuming virtually no extra memory above what it takes to store the table. Finally bubble sort is stable meaning it preserves the previous sort order of the elements.
If a header is clicked multiple times in order to swap between ascending and descending order, the sort function is only implemented the first time. Subsequent sorts make a call to a reverse function which simply reverses the order of the table rather than sorting it again. This increases the efficiency of subsequent sorts.