XMod Pro Module Kit - Table Sorting With jQuery plugin TableSorter

As an example kit to show off the flexibility of XMod Pro templates and the easy ability for jQuery to manipulate the layout, order, display, sorting and functions of an HTML TABLE, we have put together an table using our example data set and the popular jQuery table sorting power of TableSorter 2.0 from Christian Bach.
 

Module Description & Uses:

TableSorter is described as easy-to-use, flexible client-side table sorting. The developer defines the TableSorter jQuery plugin as, "...a jQuery plugin for turning a standard HTML table with THEAD and TBODY tags into a sortable table without page refreshes. tablesorter can successfully parse and sort many types of data including linked data in a cell."
 
It can be used to give your tables the type of sorting that you find in applications and that you find with .net table controls that rely on proprietary libraries for functionality. jQuery, however is client-side, fast and a part of the DNN core UI presentation!

• Features of Tablesorter include the ability to multi-select sorting columns with a shift key combo. Sort multiple columns simultaneously by holding down the shift key and clicking a second, third or even fourth column header!
• Parsers for sorting text, URIs, integers, currency, floats, IP addresses, dates (ISO, long and short formats), time. Add your own easily
• Support secondary "hidden" sorting (e.g., maintain alphabetical sort when sorting on other criteria)
• Extensibility via widget system
• Cross-browser: IE 6.0+, FF 2+, Safari 2.0+, Opera 9.0+
• Small code size
• This XMod Pro Module Kit also shows an example of how to use custom commands in an XMP list Template to do one click actions. The Active and Featured checkbox images not only show the state of the field, but also perform a DB update action when clicked.
• This XMod Pro Module Kit also features some basic css style and icons for a modern look of tables and controls within a template.

 

• XMod Pro demos and XMod Pro Module Kits are free for everyone to use! We have developed them to help share popular items and to help train users in the features and functionality of XMod Pro for creating custom module solutions for DotNetNuke!
• This kit utilizes code and files from the jQuery UI TableSorter from tablesorter.com.
• To utilize this XMod Pro demo, simply download the Module Kit from the DNNDev Downloads section. Once you've downloaded the file, install it as you would any DNN module. Next, add the kit module to a page. Finally, click the module's "Finish Installation" button to complete the process. The result will be an XMod Pro module instance, configured to use the kits forms, templates, and feeds as needed.
• You may also download the full js/css/images from the source at tablesorter.com. Also, the version we've setup for XMod Pro only shows the basic sorting functionality. You can work with the original code to also have highlighted styles for selected columns, multi sort, etc.
• Can be used with or without the TableSorter built-in pagination... this does have interesting features, however should not be used at the same time as the XMP built-in pagination. Choose one OR the other when working with TableSorter on XMP data tables.
• For demo purposes, initial templates are set to reference the sample images stored on the DNNDev site. When ready to use, follow instructions in the code and edit the code (and feed) files to reference your DotNetNuke instance
• The jQuery involved with TableSorter is compatible with all modern web browsers and with jQuery versions 1.4.4+ and jQuery UI 1.8.6+.
• This XMod Pro Module Kit features an XMP Template for layout, and an XMP Form displayed in editor view.