Skip to content

Got an HTML table that you want to add sort or search functionality to? This repo has you covered.

License

Notifications You must be signed in to change notification settings

Rory-Sullivan/Search-and-Sort-HTML-Tables

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

6 Commits
 
 
 
 
 
 
 
 
 
 

Repository files navigation

Search and Sort HTML Tables

A simple and easy way to add sorting and search/filter functionality to your HTML table. See here for a working example.

Features

  • 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.

Installation and Usage

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.

Sort Feature

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.

Custom sort values

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>

Search/Filter Feature

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">

Multiple tables

For multiple tables simply repeat the above steps for each table, making sure each table has a unique id.

Notes on the Implementation

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.