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

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>"

Finally, 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.

"<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>"

 

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 enable this control's Ajax mode. Here is an example Init string to use the Ajax:

##AjaxData##