HtmlDTable

Takes 5 parameters, Location, Mode, Class/ID, Init, bNoAutoAlign

Description:

While the HtmlTable command produced a normal HTML Table, the HtmlDTable command provides an interface with pagenation, sorting, and filtering.

The full documentation for this control can be found at http://datatables.net - the documentation here is about this control's integration with Moxie.Build.

For Bootstrap-v3 Templates, DataTables.net v1.10.4 is used and is pulled from the path /BuiltIn/DataTables.

For Bootstrap-v5 Templates, DataTables.net v1.13+ is used and is pulled from the path /BuiltIn/DataTablesBS5. All extension other than pdfmake are included (pdfmake is not included due to its size.)

Syntax:

Location, Mode, Class/ID, Init, bNoAutoAlign
Location, Mode, Class/ID, Init, [""]
Location, Mode, Class/ID, [""], [""]
Location, Mode, [""], [""], [""]
Location, ["Append"], [""], [""], [""]
["Runtime"], ["Append"], [""], [""], [""]
["Runtime"], ["Append"], [""], "Full", [""]

The Class/ID works the same as HtmlTable. To specify an ID, start the name of the ID with a #. Because DataTables requires an ID, if you do not provide one, a unique but consistent ID will be created for you.

If the Init parameter is blank, it will default to the following value and be included in the next example below.

'pageLength': 10, 'lengthMenu': [ [5, 10, 20, 30, 50, 100, -1], [5, 10, 20, 30, 50, 100, 'All'] ], responsive: false

 

If the Init parameter does not include { } then it will be placed inside the following string:

"<script defer>$(document).ready(function(){$('" & ThisID & "').DataTable({" & Init & "});});</script>"

 

If the Init parameter does include { } then it will be placed inside of this string instead, which allows for control over DataTable Extensions etc. Note that this version is unable to populate the Table's ID for you, and therefore you must provide your own ID in the Class/ID parameter and then reference the same in your Init parameter's content.

"<script defer>$(document).ready(function()" & Init & ");</script>"

 

If the Init parameter is set simply to the value "State" the following init string is used have the saveState option enabled.

"<script defer>$(document).ready(function(){$('" & ThisID & "').DataTable({
'pageLength': 10, 'lengthMenu': [ [5, 10, 20, 30, 50, 100, -1], [5, 10, 20, 30, 50, 100, 'All'] ], responsive: false, 'stateSave': true, 'stateDuration': 0,
'dom': 'RCT<"clear">lfrtip'});});</script>"

 

If the Init parameter is set simply to the value "Full" the following init string is used to load up a number of extra DataTables Extensions.

For Bootstrap V3 Templates:

"<script defer>$(document).ready(function(){$('" & ThisID & "').DataTable({
'pageLength': 10, 'lengthMenu': [ [5, 10, 20, 30, 50, 100, -1], [5, 10, 20, 30, 50, 100, 'All'] ], responsive: false, 'stateSave': true, 'stateDuration': 0,
'dom': 'RCT<"clear">lfrtip', 'tableTools': {'sSwfPath': '/BuiltIn/DataTables/extensions/TableTools/swf/copy_csv_xls_pdf.swf'}});});</script>"

For Bootstrap V5 Templates, it currently uses the same as "State" above, but will in the future have more extensions turned on after further testing and community input.

"<script defer>$(document).ready(function(){$('" & ThisID & "').DataTable({
'pageLength': 10, 'lengthMenu': [ [5, 10, 20, 30, 50, 100, -1], [5, 10, 20, 30, 50, 100, 'All'] ], responsive: false, 'stateSave': true, 'stateDuration': 0,
'dom': 'RCT<"clear">lfrtip'});});</script>"

 

Ajax Data:

By default, the HtmlDTable will send all of the data in your WorkQuery to the client and all pagenation, sorting, and filtering will happen client side. This will typically only be sufficient for browsing up to a few hundred records at a time, and will become unusable beyond a thousand records. In order to deal with larger data sets you will need to use Server Side Processing, and handle the ajax request with AjaxReply and JsonStream$. For a simple example of the init and how this works, see DataTable's example here: https://datatables.net/examples/server_side/simple.html