初始显示后 jQuery 数据表创建中的 JS 错误

Question

我有一个数据 table 按小时显示事务计数，从 00 到 23。因此，根据查看报告的时间，列数会发生变化。因此，列是动态创建的。它适用于显示今天的数据（我看到从 00 到 09 的 10 列）。当我尝试查看昨天的数据 (00 - 23) 时，它显示数据 table 的 js 文件中存在 javascript 错误。

下面是代码和错误信息：

<div id="divGrid" style="clear: both">
    <table id="txnTable" class="table table-striped table-bordered table-hover display responsive compact" style="width: 100%;">
    </table>
</div>

参数 SelDate 最初是今天的日期，用户可以使用日历控件更改。

function populateTable() {
    $.ajax({
        type: "POST",
        dataType: "json",
        contentType: "application/json; charset=utf-8",
        cache: false,
        url: '../WebService/ABC.asmx/GetTransactionCountByDay',
        data: JSON.stringify({ SelDate: selDate, LogType: -1 }),
    }).done(function (result) {debugger
        jResult = JSON.parse(result.d);
        var columnNames = [];
        var tblData = [];

        //result.forEach(item => {  // IE can't handle this
        jResult.forEach(function(item) {
            // build an object containing the column names:
            columnNames.push({ title: item.HR });
            // build an array containing the one row data
            tblData.push(item.TXN_COUNT);
        });

        if ($.fn.DataTable.isDataTable(tblTxn)) {
            tblTxn.destroy();
        }

        tblTxn = $('#txnTable').DataTable({
            destroy: true,
            data: [tblData],
            columns: columnNames
        });
    }).fail(function (jqXHR, textStatus, errorThrown) {debugger
        alert(jqXHR.responseText);
    });
}

更改所选日期并单击“提交”按钮时：

$(document).on("click", "#lblSubmit", function (event) {
    populateTable();
});

从 ajax 调用收到的示例数据：

[
  {
    "DT": "2021-10-20",
    "HR": "00",
    "TXN_COUNT": 138
  },
  {
    "DT": "2021-10-20",
    "HR": "01",
    "TXN_COUNT": 235
  },
  {
    "DT": "2021-10-20",
    "HR": "02",
    "TXN_COUNT": 111
  },
  {
    "DT": "2021-10-20",
    "HR": "03",
    "TXN_COUNT": 120
  },
  {
    "DT": "2021-10-20",
    "HR": "04",
    "TXN_COUNT": 120
  },
  {
    "DT": "2021-10-20",
    "HR": "05",
    "TXN_COUNT": 120
  },
  {
    "DT": "2021-10-19",
    "HR": "06",
    "TXN_COUNT": 318
  },
  {
    "DT": "2021-10-20",
    "HR": "07",
    "TXN_COUNT": 505
  },
  {
    "DT": "2021-10-20",
    "HR": "08",
    "TXN_COUNT": 294
  },
  {
    "DT": "2021-10-20",
    "HR": "09",
    "TXN_COUNT": 95
  }
]

错误：

"Uncaught TypeError: Cannot read properties of undefined (reading 'style')"

还附上了来自 Chrome 调试器的错误消息的屏幕截图。

Answer 1

一个新手错误 (!) 和一个修改：

修改:

从 DOM 中删除了 table，并在 populateTable() 中清空了其父级 div 并重新创建了它。为了完整起见，销毁 jquery 数据 table，如果存在的话。

新手错误:

我的 tblTxn.destroy() 缺少参数；应该是 tblTxn.destroy(true);

最终代码:

function populateTable() {
    $.ajax({
        type: "POST",
        dataType: "json",
        contentType: "application/json; charset=utf-8",
        cache: false,
        url: '<%= ResolveUrl("../WebService/ABC.asmx/GetTransactionCountByDay") %>',
        data: JSON.stringify({ SelDate: selDate, LogType: -1 }),
    }).done(function (result) {
        jResult = JSON.parse(result.d);
        var columnNames = [];
        var tblData = [];

        if ($.fn.DataTable.isDataTable(tblTxn)) {
            tblTxn.destroy(true);
        }
        $("divGrid").empty();  // Empty parent div, where jquery datatable resided
        $('<table>', { class: 'table table-striped table-bordered table-hover display responsive compact divGrid', id: 'txnTable', style: 'width: 100%;' }).appendTo("#divGrid");

        // result.forEach(item => {
        jResult.forEach(function(item) {  // IE version, since it doesn't understand '=>'
            // build an object containing the column names:
            columnNames.push({ title: item.HR });
            // build an array containing the one row data
            tblData.push(item.TXN_COUNT);
        });
        tblTxn = $('#txnTable').DataTable({
            destroy: true,
            data: [tblData],
            columns: columnNames
        });
    }).fail(function (jqXHR, textStatus, errorThrown) {
        alert(jqXHR.responseText);
    });
}

初始显示后 jQuery 数据表创建中的 JS 错误

JS error in jQuery datatable creation after initial display

asp.net

jquery

datatables