jQuery Domino Goodies #2 - Sorting within categorised Web Views

Chris Connor  November 17 2009 05:11:53 AM

This builds on the article posted in #1 - simple sortable HTML tables. Again we use jQuery - this time we "wrap" an accordion around each category and build a table. The idea is that you click on a "category" and it shows (actually fades in) a sortable table as shown below



In terms of js / css files that you need to import you need the same set as the last ones AND the UI Core js files that I mention below.



Next we need a $$ViewTemplate similar to the table example in the prvious article.



Next we need the view. Firstly categorise and if required add a couple of sort columns. We are in essence building a table for each category. The first critical piece in this part of the jigsaw is the the first "HTML column" shown below - ensure this column is categorised.



Then build table cells and terminate using the column below



Lastly we need to set the javascript to set up the table sorters and add the events for collapsing / expanding the categories. This is where jQuery really comes into it's own. The power of jQuery is that using a few lines of code you can attach events / functions and just about anything you want to any elements on a form - have a look...



That's it!! We attach the tablesorting routine to all the specified elements with class ".tablesort" and then do a similar thing with the category headers - that's 5 or 6 lines of Javascript!!!

Next Steps... we are working on an xPages version of this application / functionality - more details to come in the next month or two.
Tweet

• Comments [2]