HTML DataTable 在 Form Suitelet 中无法正常工作答案

【问题标题】：HTML DataTable not working properly in Form SuiteletHTML DataTable 在 Form Suitelet 中无法正常工作
【发布时间】：2020-08-04 16:46:06
【问题描述】：

请帮忙！成功地在我的 Form Suitelet 中显示了一个 DataTable，并用保存的搜索中的数据填充了它。但由于某种原因，我面临以下问题：

分页不起作用，整个数据都显示在一页上。
而且，如果我在任何 DataTable 选项中进行更改（例如，显示 xx 条目，按 column_name 的升序排序），表格正文会立即变为“在表”（并保持这种状态，直到重新加载页面）。

这是我用于 DataTable 的 Suitelet 代码：

//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;

这是我用来填充表格的客户端脚本代码：

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);
     }
}

注意： 不能使用完整的 HTML Suitelet，因为在我的代码中我添加了一个选择字段，它是客户采购列表（这是巨大的）。如果可以通过任何方式将大量列表从 NetSuite 获取到 HTML Suitelet 而没有任何性能问题，那么我可能会考虑使用它。

任何帮助将不胜感激。谢谢。

【问题讨论】：

如果您消除了表单字段，您可以使用数据表过滤器。这应该有很大帮助。

标签： jquery datatables netsuite suitescript suitescript2.0

【解决方案1】：

在我的前辈的帮助下能够解决这个问题。问题出在我用于填充表格的客户端脚本代码中。我没有使用内置的 DataTable API 在表中添加行。

这解决了问题：

//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);
     }
}

【讨论】：