Sortable tables

Problem

Columns in a table can be made sortable by clicking on the specific column in the head row. By clicking multiple times the order of sorting the table will change.
The functionality for sorting tables is provided by the JQuery and Tablesorter JavaScript libraries. These libraries are part of the Appway core package.
Follow the points below to implement a sorted table in your screen.

Available in versions 5.1 built after 2008-02-20

Solution

Add a table component to the screen and enter a unique value for the "HTML Id", e.g. "myTable" (without double quotes "). Do not set row spacing or column spacing for this table.

Figure 1: HTML Id
Add your custom rows and cells to your table. Set the first row to be the Header row by setting the property "Type" to "Header". Note: If you have multiple header rows there is a bug in JQuery which causes JavaScript errors if the user clicks on a header row other than the first.

Figure 2: Row Type
(Optional) Add a row of "Type" "Footer" to your table. Note: This row must be placed directly after the Header row and not at the end of the table.
Add label components to your cells. Important: Tick the checkbox "Inline" for every label in the header row.
Add three "HTML Head Script" components to the top of your screen. The first two scripts are used for loading the required JavaScript files. Set "URL" property of the first two scripts as follows:
/js/jquery.js and /js/jquery.tablesorter.js

Figure 3: HTML Head Script
The third "HTML Head Script" component is used to initialize the table sorter. Add the following code into the component's "Code" property (in simple value mode):
1$(document).ready(
2function() {
3$("#myTable").tablesorter();
4}
5);

Note: Replace the myTable variable above after the #-sign with the HTML Id of your table.
Open your screen and sort your table by clicking on the Header's columns.
Add more sorting options to the "tablesorter()" function. See http://tablesorter.com/docs for more information.

Could this article be better?Yes, let me send feedback

Back to Cookbook

Comments (2)

Developer is transitioning to Appway Community

All material for Appway 6 is still available here on developer.appway.com during the transition to Appway Community.

Material for Appway 6.3 and Appway 7 is available in the Knowledge Base on community.appway.com.

Note: The Community Blog, our Forum, and the Support system are available exclusively on Appway Community.

Any questions or feedback? Please contact community@appway.com

Cookbook

How Could This Recipe be Improved?

Developer is transitioning to Appway Community

See Also

COOKBOOK