JS: Add a header for a tabular column in the results page

caspio · Tue Apr 20, 2010 1:31 pm

JavaScript Solution: Add a header for a tabular column in the results page

Feature Description:
This JavaScript solution shows how to add a header label for a column in a tabular results page of a Search & Report DataPage. This code can be used for an HTML block which does not have a default column header.

Implementation:
This solution can be used "as-is", without any changes if
a. It is used in a Results page of a Search & Report DataPage
b. Download option is not enabled on the Results Page
c. It adds a header named Label for the first column of the results table.

To use this solution copy and paste the code below, inside the HTML Header section of the Results page of the Search and Report DataPage using the Caspio Bridge DataPage Wizard.


	Code: <script type="text/javascript"> function HeaderLabel() { /* (1) Get the results table and rows / var tbl = document.getElementsByTagName("table")[1]; var rows = tbl.getElementsByTagName("tr"); / (2) Get the header row’s data cells / var colheader = rows[0].getElementsByTagName("td"); / (3) Assign a label to the first data cell */ colheader[0].innerHTML="Label"; } window.onload = HeaderLabel; </script>

Tips for Customization
Follow these steps to customize this script for different column positions:

a. To add a header label to a different column position:

Change the line of code immediately below comment (2) to:


	Code: var colheader = rows[COLUMNNUMBER]. getElementsByTagName("td");

where COLUMNNUMBER is the index of the column you wish to add the label to. Remember that column indexes start at 0 (ZERO).

b. When there is a "download" button enabled on the Results page:

Change the line of code immediately below comment (1) to:


	Code: var tbl = document.getElementsByTagName("table")[2];

Tested Browsers
This JavaScript solution was tested on the following platforms and Internet Browsers only.
• MS Windows - IE 8.0, Firefox 3.6.3, Chrome 4.1.249, Safari 4.0.3
• Macintosh - Firefox 3.5.7, Safari 4.0.3

Disclaimer: Use these JavaScript solutions at your own risk! They are provided to assist you in the customization of your programs and while we believe they work properly, by using them you accept all responsibility about them and confirm that they are not a feature of Caspio's platforms and as such are provided "as is" without any warranties, support or guarantees.

Community Forum

JS: Add a header for a tabular column in the results page