jquery implementation Report Click on the table header sort

The use of parameters and macros to implement the report in the table header sorting function, the way to achieve the table header sorting, the need for page refresh, in fact, to re-report operation. This article uses jquery and Tablesort plug-ins to achieve the client ordering of the report, can reduce the burden on the server, but also can bring a better experience to the user.

Plugin usage Instructions:
Plug-in function: the HTML table into a sortable table, support the static ordering of pages, no refresh. Support for sorting multiple data types (string, number, date, etc.) L
How to use: l
1. Add a custom attribute to the header row role= "Head"
2. Add custom properties to columns in the header row that need to be sorted sort= "true"
3, call the extension method, such as: $ ("#report1"). SortTable ();
Parameter description:
Sorttingmsg: Text displayed when sorting (default to "Sort ..."),
Sorttingmsgcolor: The color of the text displayed when sorting (default is "#FFF"),
Allowmask: Whether to allow masking layer (default is True),
Maskopacity: Opacity of the mask layer (default is "0.5"),
MaskColor: The color of the matte layer (default is "#000"),
Ascimgurl: Ascending image (default = not shown),
Ascimgsize: The ascending image size (default is "8px"),
Descimgurl: Descending picture (default = not shown),
Descimgsize: Descending picture size (default = "8px")
onsorted (cell): Sort completion callback Function (parameter: cell, the header of the current row sequence (usually th or TD jquery Object))

Examples of applications:
The report shows part of the page code:
<title>sorttable</title>
<!-introduction of related style files and JS files >
<link href= ". /styles/site.css "rel=" stylesheet "type=" Text/css "/>
<script src= ". /scripts/jquery-1.4.1.min.js "type=" Text/javascript "></script>
<script src= ". /scripts/jqueryplugin/tablesort.js "type=" Text/javascript "></script>
<script type= "Text/javascript" >
$ (function () {
$ ("#report1"). SortTable ({
Ascimgurl: ". /images/bullet_arrow_up.png ",
Descimgurl: ". /images/bullet_arrow_down.png ",
Ascimgsize: "8px",
Descimgsize: "8px",
Onsorted:function (cell) {
When sorting is complete, pop up the column sequence number and name
Alert (Cell.index () + "--" + cell.text ());
}
});
});
</script>
......
<report:html name= "Report1" reportfilename= "Test/test.raq"
Needsaveasword= "Yes"
needsaveaspdf= "Yes"
Needsaveasexcel= "Yes"
/>
Report Template:

Sample Data Bit designer the Customer table in the demo database.
which
A1 uses the HTML format data type in cell, with the content:
<tr role= "Head" style= "Background-color: #ddd; height:40px" >
<th sort= "true" style= "border:1px solid #999999; height:10px" >
Customer ID
</th>
<th sort= "true" style= "border:1px solid #999999;" >
Company Name
</th>
<th sort= "true" style= "border:1px solid #999999;" >
Phone
</th>
<th sort= "true" style= "border:1px solid #999999;" >
Name of contact person
</th>
<th sort= "true" style= "border:1px solid #999999;" >
Contact Title
</th>
</tr>
The table header for table is implemented in the cell, the attribute role= "Head" is added for the header row, and the property sort= "True" is added for the sort column in the header row.
Finally, the height of the cell needs to be adjusted to 0.

Implementation results:
Sort the effect on the company name in ascending order:

Click the company name in descending order, pop up the prompt box: