使用 objects 数组构建 jQuery 数据表

Question

我正在尝试使用 object 数组创建和填充 jQuery 数据 table，其中每个对象都有两个属性：HR 和 TXN_COUNT。它代表每小时的交易数量，看起来像：

HR  TXN_COUNT
00  4591
01  2402
...
08  2129

我需要第一列的内容作为数据 table 列 headers 和第二列的内容作为数据，这样我最终会得到：

 00    01    ...   08
4591  2402        2129

无法正常工作。

我试过这个：

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

$(document).ready(function () {
    ...
    populateTable();
});

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

        // Stupid IE version, since it doesn't understand '=>' !
        columnNames = jResult.map(function (a) { return a.HR; });
        tblData = jResult.map(function (a) { return a.TXN_COUNT; });

        $('#txnTable').DataTable({
            destroy: true,
            processing: true,
            serverSide: true,
            data: tblData,
            columns: columnNames
        });
    })
}

当我运行这样做时，我在 columnNames 和 tblData 数组中看到了正确的值。但是，我在函数“isArrayLike(obj)”中收到 jquery 错误（Invalid operand to 'in': Object expected），其中 object 是字符串“00”（第一个 HR 值）。当我继续这个过程时，我只看到我的“等待”微调器在旋转，没有任何显示。当它创建数据时会发生这种情况table。

更新

在创建数据之前添加这段代码table 至少会显示 table headers。似乎数据 table 的“列”属性期望 object 而我正在传递字符串（例如“00”）。

for (var i in columnNames) {debugger
    columns.push({
        data: columnNames[i],
        title: columnNames[i]
    });
}

然后将“列”属性设置为列而不是 columnNames。现在我在 datatable 的 js 中得到一个错误（Unable to set 属性 'data' of undefined or null reference）

Answer 1

鉴于需要将源数据转换为 DataTable 的单行，我将采用以下方法：

起始假设：

(1) 我将忽略 serverSide: true 选项，因为不清楚是否需要它，而且它与源 JSON 数据需要如何转换无关。

(2) 由于这是关于转换源数据的，因此我也将忽略每个请求发送到服务器的数据。

(3) 我假设 URL 提供以下内容 JSON:

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

这是基于您在笔记中提供的内容，但进行了一些清理以使其有效 JSON。

然后我会使用这个 JSON 如下：

$(document).ready(function () {
    populateTable();
});

function populateTable() {
    $.ajax({
        type: "POST",
        method: "POST",
        // my test URL:
        url: "http://localhost:7000/GetTransactionCountByDay",
        cache: false
    }).done(function (result) {
        var columnNames = [];
        var tblData = [];
        result.forEach(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 );
        });
        
        $('#txnTable').DataTable({
            // note how the data is wrapped in another array,
            // because the data needs to be an array of arrays
            // for DataTables to process it (or an array of objects):
            data: [ tblData ],
            columns: columnNames
        });
    })
}

最终结果如下所示（并非所有列都显示在屏幕截图中）：

使用 objects 数组构建 jQuery 数据表

Build jQuery datatable using array of objects

jquery

datatables