Click here to Skip to main content
Click here to Skip to main content
Go to top

Filtreing in HTML Tables using context sensitive menu

, 17 Apr 2004
Rate this:
Please Sign up or sign in to vote.
Table data filtering using context sensitive menus.

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 Smile | :) . Suggestions are most welcome.

License

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

Share

About the Author

Jujjuru Durga Prasad
Software Developer (Senior)
Korea (Republic Of) Korea (Republic Of)
No Biography provided

Comments and Discussions

 
GeneralDynamic Tables PinmemberMember #38780904-Mar-07 21:37 

General General    News News    Suggestion Suggestion    Question Question    Bug Bug    Answer Answer    Joke Joke    Rant Rant    Admin Admin   

Use Ctrl+Left/Right to switch messages, Ctrl+Up/Down to switch threads, Ctrl+Shift+Left/Right to switch pages.

| Advertise | Privacy | Mobile
Web04 | 2.8.140926.1 | Last Updated 18 Apr 2004
Article Copyright 2004 by Jujjuru Durga Prasad
Everything else Copyright © CodeProject, 1999-2014
Terms of Service
Layout: fixed | fluid