Displaying large data sets in an Adaptive Form can be a challenge. One of the typical ways of displaying data is to create repeating panels. While this works for smaller data sets it does not work as a reporting mechanism where we may need to display hundreds or thousands of records in a timely manor.
In this example, we find an element on the form and then replace that element with an html table, and then, turn that html table into a DataTable.
Step 1: Define the new table
The id should be equal to the div created for a placeholder textbox on your form. It can be found by simply inspecting the rendered form and looking for the container of the textbox.
Step 2: Replace the textbox
Replace the textbox with the new table using jQuery. Note that this table won’t be bound to the data of the form itself. If you wish to bind data, use another field not the form as the datasource for the table (as demonstrated by the first button in the example).
Step 3: Activate the datatable
Activate the datatable with any parameters you need to support in your table. I this case the titles are being defined. Note that the destroy option is set so that the table can be continuously replaced.
jQuery is already present in the Adaptive Form so all we need to add is the DataTables JS and CSS as a Client Library. The example provided does include the library you require under /etc/clientlibs/DataTables_1.10.19. This will need to be included in any of your deployments.
Get DataTables here: https://datatables.net/download/
Get the full example here (import via your local package manager): https://documentcloud.adobe.com/link/track?uri=urn%3Aaaid%3Ascds%3AUS%3A4d5155e5-726b-4566-95bf-43b73c55d3a2
Sample html and data for this example sourced from https://datatables.net/examples/data_sources/js_array