Filter Table


The filter table is a easy way for HTMLer to implement a functional table. User can easily create a table by parse a object array to the instance of the framework, adding a input bar for filter that the data in the table can be filt follow user's type in event. The filter table also provides a sorting function that the user can specify a keyword to sort. Last, the user can directly insert new data into exists object array.

Sample Code

Company: Country:

Company: Country:


Implement data parse dynamic table

In this part, the most important problem is how to parse the data and add it into the table. the solution is create a array to store object and then use a for-loop to create table row and table cell. Table with Data Parsed in

Implement the dynamic table head

In this part, I just want to make sure the custome table should has their own table head. Table with Dynamic Table Head

Implement the filter function

To implement the filter, I compared the input bar value with every td values. If the value is not matched, the data has been hidden. In order to give instant react, I choosed onkeyup event. Table with Dynamic Table Head

Implement the sorting

I used trinity operator to implement a sort function, if the second paramater is true apply descending, if it is false, apply ascending. Table with Sorting

Implement the adding

I used array push method to add the new data, and also create new table row and cell for the new data. Table with Adding new data


Click Here for SampleCode

1. Import the filterFW.js to the html page

2. Create a new FilterFW in the html page

3. Call public function "makeFilter()" to create a filter object, give the table id and data array

4. For other optional pramas like barID, searchKey, firstHead, secondHead

5. For filter bar, you have to call the public function "useFilter()" for onkeyup response

6. For sorting, you have to call public function "makeAcendingSort()" and "makeDecendingSort()" in button onclick event

7. For adding, you have to set onclick for a button with "addNewData(d1.value,d2.value)"