The +?+?++Paging Table+?+?+? control is listed under the +?+?++Composite Rich Controls+?+?+? section of the palette on the Page Structure tab within FormMaker.
This control provides a table like structure which gives the user the ability to sort the data (both ascending and descending) by clicking on the column headings, and to page through the data by using controls at the bottom of the table.
To add the control to the page, simply drag it from the palette onto your page in the same way as you would for any other control.
This will add a number of components onto your page, which by default provide a table structure containing two output fields (table_field1 and table_field2).
You can add additional fields into the table by dragging them from the palette or from a data source, and you can rename/remove these two output fields if required.
You can also add data entry controls (such as text boxes) into the table if required.
This control makes use of additional JavaScript and CSS files to provide the required functionality, and you will see that these files automatically get linked to your page when you add the control.
Please note that this control provides purely client side sorting and paging functionality. All the information is sent to the browser, and this is then processed to provide the required display.
If you need the data to be processed on the server (eg using request criteria on a web service call, or a database query), or are unable to use this control for any other reason (eg the JavaScript requirement) then you will need to implement an alternative approach for this functionality. For more details please see Paging through lists
Customising Functionality
It is also possible to customise the functionality of the control. This is done by adjusting the parameters contained in the +?+?++table_init+?+?+? custom field. If you select this field on the +?+?++Field Details+?+?+? tab you will see that it contains a script fragment that initiates the control, and also specifies a number of configuration options. These settings can be adjusted as needed, with the available options being detailed below:
This control provides a table like structure which gives the user the ability to sort the data (both ascending and descending) by clicking on the column headings, and to page through the data by using controls at the bottom of the table.
To add the control to the page, simply drag it from the palette onto your page in the same way as you would for any other control.
This will add a number of components onto your page, which by default provide a table structure containing two output fields (table_field1 and table_field2).
You can add additional fields into the table by dragging them from the palette or from a data source, and you can rename/remove these two output fields if required.
You can also add data entry controls (such as text boxes) into the table if required.
This control makes use of additional JavaScript and CSS files to provide the required functionality, and you will see that these files automatically get linked to your page when you add the control.
Please note that this control provides purely client side sorting and paging functionality. All the information is sent to the browser, and this is then processed to provide the required display.
If you need the data to be processed on the server (eg using request criteria on a web service call, or a database query), or are unable to use this control for any other reason (eg the JavaScript requirement) then you will need to implement an alternative approach for this functionality. For more details please see Paging through lists
Customising Functionality
It is also possible to customise the functionality of the control. This is done by adjusting the parameters contained in the +?+?++table_init+?+?+? custom field. If you select this field on the +?+?++Field Details+?+?+? tab you will see that it contains a script fragment that initiates the control, and also specifies a number of configuration options. These settings can be adjusted as needed, with the available options being detailed below:
| [tr][td]Configuration Option[/td][td]Description[/td][/tr] | ||
| [tr][td]enablePaging[/td][td]Boolean value indicating whether the paging functionality should be enabled. If this is set to false | then the paging controls will not be visible at the bottom of the table | and all the rows will be visible. It will still be possible to sort the data by clicking on the column headings. [/td][/tr] |
| [tr][td]pageSize[/td][td]If this is set to a number | then this sets the number of rows that will be shown on each page of data. If this is null (or not provided) then the user will be given a drop down to select how many entries to display on each page. [/td][/tr] | |
| [tr][td]stripeRows[/td][td]Boolean value indicating whether different styling should be applied to alternate rows in the table. [/td][/tr] | ||
| [tr][td]headerCss[/td][td]The CSS class name to apply to all the header cells in the table to indicate that they can be sorted. [/td][/tr] | ||
| [tr][td]headerAscCss[/td][td]The CSS class name to apply to a header cell to indicate that the column is sorted ascending. [/td][/tr] | ||
| [tr][td]headerDscCss[/td][td]The CSS class name to apply to a header cell to indicate that the column is sorted descending. [/td][/tr] | ||
| [tr][td]firstRowCss[/td][td]The first CSS class name to apply to the rows of the table to provide alternate shading. [/td][/tr] | ||
| [tr][td]secondRowCss[/td][td]The second CSS class name to apply to the rows of the table to provide alternate shading. [/td][/tr] |