HTML DataTable not working properly in Form Suitelet

Question

Please help! Was successfully able to display a DataTable in my Form Suitelet and populated it with data from saved search. But for some reason I am facing following problems:

pagination is not working and whole data is being displayed on one page.
And also if I make changes in any DataTable options (e.g. Show xx entries, sort in asc order by column_name) the table body immediately becomes "No data available in table" (and remains that way until page is reloaded).

Here is the Suitelet code I used for the DataTable:

//In Suitelet...
var form = serverWidget.createForm({
    title: 'The NetSuite Form'
});
form.clientScriptFileId = "1234";

var theInlineHTMLFld = form.addField({
     id: 'custpage_inline_html_fld',
     type: serverWidget.FieldType.INLINEHTML,
     label: 'Field for Data Table',
});

var dtCssCdn = '<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.20/css/jquery.dataTables.css">';
var dtJqueryCdn = '<script type="text/javascript" language="javascript" src="https://code.jquery.com/jquery-3.3.1.js"></script>';
var dtJsCdn = '<script type="text/javascript" charset="utf8" src="https://cdn.datatables.net/1.10.20/js/jquery.dataTables.js"></script>';
var dataTableHtml = '<table id="data_table_items" class="display" style="width: 100%"><thead><tr><th>INTERNAL ID</th><th>ITEM NUMBER</th></tr></thead><tbody id="data_table_items_body"></tbody></table>';
var executeDataTableHtml = '<script>jQuery(document).ready(function (){jQuery("#data_table_items").DataTable();});</script>';

theInlineHTMLFld.defaultValue = '<!DOCTYPE html><html lang="e"><html><head><meta charset="UTF-8">' + dtCssCdn + dtJqueryCdn + dtJsCdn + '</head><body>' + dataTableHtml + executeDataTableHtml;

Here is the Client Script code I used for populating the table:

function pageInit(context){
     /*
          ran saved search on items and got the search results
     */
     for (var i = 0; i < searchResults.length; i++) {
          var internalId = searchResults[i].getValue('internalid');
          var itemNumber = searchResults[i].getValue('itemid');
          var rowHtmlContent = '<tr><td>'+ internalId +'</td><td>'+ itemNumber +'</td></tr>';

          document.querySelector('#data_table_items_body').insertAdjacentHTML('beforeend', rowHtmlContent);
     }
}

Note: Cannot use a complete HTML Suitelet because in my code I am adding a select field which is sourcing list of customers (which is huge). If by any means a huge list can be sourced from NetSuite to the HTML Suitelet without any performance issue then I might consider using it.

Any help would be greatly appreciated. Thanks.

If you eliminate the form field, you can use datatables filters. Which should help substantially. — zerecees

Sarim Khan Sarim Khan · Accepted Answer · 2020-08-10T03:48:42

Was able to fix this with help of my seniors. The problem was in Client Script code I used for populating the table. I was not using built-in DataTable APIs to add rows in table.

This fixed the problem:

//In Client script...
function pageInit(context){
     var DATA_TABLE = jQuery('#data_table_items').DataTable();
     /*
          ran saved search on items and got the search results
     */
     for (var i = 0; i < searchResults.length; i++) {
          var internalId = searchResults[i].getValue('internalid');
          var itemNumber = searchResults[i].getValue('itemid');
          
          DATA_TABLE.row.add([
                        '<span>' + internalId + '</span>',
                        '<span>' + itemNumber + '</span>'
          ]).draw(false);
     }
}

HTML DataTable not working properly in Form Suitelet

1 Answers