In the Formatting Tab you have Styles, Scripts, Template and Data Source Attributes.

Styles are used to add any custom styles to the page where Data Table will be displayed.

Scripts will add custom JavaScript to the page.

The Template attribute is used to format the table's HTML The placeholder CpScript will get populated with the DataSource content.[cp:literal:placeholders key='DataSource' /]

---

Dynamic:

This method uses an AJAX model to call a Web API which returns JSON. The DataTable plugin uses the JSON result to generate the table's format.

This method has less formatting flexibility, but works great with larger data sets because it only retrieves (n) number of records at a time. Each time the result set changes by user's interacting with the table's search, pagination, or sorting; the Web API is called to return an updated result set.

The initial ordering of the results is based on data in the first column. The DataTable plugin only allows ordering and sorting on by columns which are in relation of the module.

Another performance benefit to the Dynamic option is that the search is executed through a server-side Full-Text Index search compared to a client-side text search that the Static option uses.

When a record is saved in the Data Table module, a corresponding Web API module record will be created or updated if the type attribute is set to Managed.

The corresponding Web API record name will be formatted as shown here: DataTables (Managed) - <<Name of the Data Table record>>

If the type attribute is set to Detached then you have to manage your Web API record manually. The order of the columns in Data table records and in WebApi has to match. The columns which are in webApi but not in DataTable have to be at the end of the Columns in WebApi record same as hidden columns.

* If you creating API record manually make sure the Result is set to Object

Formatting Tab

The Formatting Tab provides the following attributes: Custom Control, Styles, Scripts, and Template.

Custom Control

This control provides a user interface to configure and retrieve data for dynamic option.

• The Hide/Show Available Columns link will display all available columns for the selected module.

  Columns prefixed with cpsys_Attributes: are not in the table's relation and can't be used for the sorting.

• Add Column Button will add new row with the selector of columns.

  When you select the standard column option, the column names will be used in the table header as is.

  One of the options in the selector is custom. When this option is selected you have control over the column names in the table header, and you may use Column CpScripts to retrieve content for that column.

  The check box next to the row is to display that column in the table. Sometimes you may need to retrieve a column, but don't want to display the column on your page. In this case you may uncheck a checkbox and the column will not be displayed in the table. You can drag and drop rows to arrange the order of the table header.

  To the right of the row there is a delete icon which would remove that row from data table.

---

Data Tables plugin options: Work with both options Static and Dynamic types.

Minimum Number Of Characters:

How many characters need to be typed before search will be executed

Page Length:

Number of rows to display on a single page when using pagination. Default: 10

You can pass any information from the page DataTable page onto the API. In order to do that you need to set the global Javascript variable _dataTablePageInformation with JavaScript object (key-value pairs).

 var pageInfo = {
   PageAudience: "Main",
   UserName: "development",
   Roles: "Admin"
 };

_dataTablePageInformation = pageInfo;
 

Then you can use that information in the API by getting it from the placeholders.

[cp:literal:placeholders key='PageAudience' /]