使用对象数组构建 jQuery 数据表

Question

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

HR  TXN_COUNT
00  4591
01  2402
...
08  2129

我需要第一列的内容作为数据表列标题，第二列作为数据，这样我最终会得到：

 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），其中对象是字符串“00”（第一个 HR 值）。当我继续这个过程时，我只看到我的“等待”微调器在旋转，没有任何显示。在创建数据表时会发生这种情况。

更新

在创建数据表之前添加这段代码至少会显示表头。似乎数据表的“列”属性需要对象，而我正在传递字符串（例如“00”）。

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

然后将“column”属性设置为columns 而不是columnNames。 现在我在数据表的 js 中遇到错误（无法设置未定义或空引用的属性“数据”）

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

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