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

Posted 2023-05-09

【中文标题】使用对象数组构建 jQuery 数据表

【英文标题】：Build jQuery datatable using array of objects

【发布时间】：2021-12-06 12:08:24

【问题描述】：

我正在尝试使用对象数组创建和填充 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 中遇到错误（无法设置未定义或空引用的属性“数据”）

【问题讨论】：

什么不像预期的那样工作？

我编辑了问题以解释发生了什么。

您能否向我们展示从 URL 返回的 JSON 响应（格式文本）？有代表性的样本就可以了，但我们确实需要查看 JSON 的整体结构。

您正在使用serverSide: true，这意味着您的服务器端代码将处理所有排序、分页和过滤（DataTables 不会处理任何这些）。您的服务器端代码会这样做吗？此外，如果您使用serverSide: true，则需要使用DataTables Ajax 选项，而不是jQuery 的$.ajax - 否则，DataTables 将无法将所需的分页/排序/过滤参数传递给服务器。

[\"DT\":\"2021-10-19\",\"HR\":\"00\",\"TXN_COUNT\":138.0,\" DT\":\"2021-10-19\",\"HR\":\"01\",\"TXN_COUNT\":235.0,\"DT\":\"2021-10-19\ ",\"HR\":\"02\",\"TXN_COUNT\":111.0,\"DT\":\"2021-10-19\",\"HR\":\"03\ ",\"TXN_COUNT\":120.0,\"DT\":\"2021-10-19\",\"HR\":\"04\",\"TXN_COUNT\":120.0, \"DT\":\"2021-10-19\",\"HR\":\"05\",\"TXN_COUNT\":120.0,\"DT\":\"2021-10- 19\",\"HR\":\"06\",\"TXN_COUNT\":318.0,\"DT\":\"2021-10-19\",\"HR\":\" 07\",\"TXN_COUNT\":505.0,\"DT\":\"2021-10-19\",\"HR\":\"08\",\"TXN_COUNT\":294.0 ]

【参考方案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
        );
    )

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

【讨论】：

非常感谢。完美运行。

一个问题：当我更改选定的日期（Web 服务的 SelDate 参数）并再次调用 populateTable() 时，我收到数据表 js 错误消息“无法读取未定义的属性（读取'样式'）”；大概是“txnTable”未定义。我在它之前添加了一个“销毁”，以确保每次尝试不重新初始化但没有更改时重新创建它。

我在答案中使用了代码，并添加了一个按钮来调用 populateTable()、destroy: true 选项和您的 Ajax data 选项（带有硬编码的日期）。我无法重现您的问题。重新加载 DataTable 时，它​​按预期工作。也许有一个新问题显示您的代码并描述如何重新创建问题，您将从社区获得更好的帮助。

谢谢。将工作一段时间，如果仍然难倒将发布一个新问题。感谢您的帮助。

发布新问题：***.com/questions/69647525/…