Filtreing in HTML Tables using context sensitive menu

• Download demo project - 2.77 Kb

Introduction

Till now, if a user wants to filter the data in a HTML table, he had to apply some external filters, which are based on the unique features/elements in the table. This is a quite cumbersome process and the user needs to keep track of the filters he has applied.

This solution frees the user from applying external filters to filter the data in a table. User can enjoy the freedom of right click and filter the table accordingly. The demo given is a very basic implementation, which can be extended to implement complex filtering.

Using the code

Basic idea behind this application is to replace the Windows right click menu by our custom menu. This menu is built dynamically based on the table header. The table data is contained in an array and the table is built dynamically.

The following function builds the table dynamically:

BuildMyTable(_Data, _style, _header) 
//_Data  - table data array, _style - table style,_header - table header

This function builds the menu dynamically and displays it:

BuildMenu(_filterIndex) //_filterIndex is the Index of the header

This function applies the filter on the table:

ApplyFilter(_filter,_indx) 
//This function basically retrieves a subset of data 
//from the main table and builds a table with that data.

Browser Compatibility

This script and the demo were developed and tested only on the IE platform.

Conclusion

That's all folks. Hope you'll enjoy it :). Suggestions are most welcome.

This article, along with any associated source code and files, is licensed under The GNU General Public License (GPLv3)