使用对象数组构建jQuery DataTable时的列配置与数据绑定错误排查

看起来你已经拿到了正确的数据，但在DataTable的配置上踩了几个典型的坑，咱们一步步来解决：

核心问题分析 #

你要实现的是横向列头（小时）+ 单行数据（对应交易数），但之前的配置犯了两个关键错误：

1. serverSide: true 是多余的——你是用本地AJAX获取的数据渲染，不是服务器端分页/排序，这个属性会让DataTable错误地尝试向服务器请求数据，导致本地数据不匹配。
2. 数据格式不对：DataTable期望的data是行对象的数组，每个对象的键对应列的data字段；而你之前的tblData是一维数组，没法和列配置对应。

修正后的完整代码 #

<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) {
    var jResult = JSON.parse(result.d);
    
    // 1. 构建列配置：每个小时作为一个列，title和data都用HR值
    var columns = jResult.map(function(item) {
      return {
        title: item.HR,
        data: item.HR
      };
    });
    
    // 2. 构建符合DataTable要求的数据格式：单行对象，键是小时，值是交易数
    var tableData = [{}];
    jResult.forEach(function(item) {
      tableData[0][item.HR] = item.TXN_COUNT;
    });
    
    // 3. 初始化DataTable
    $('#txnTable').DataTable({
      destroy: true,
      processing: true,
      // 移除serverSide: true，改用客户端渲染
      data: tableData,
      columns: columns,
      responsive: true, // 配合你的responsive类，优化移动端显示
      paging: false,    // 只有一行数据，不需要分页
      searching: false, // 不需要搜索功能（可选，按需开启）
      ordering: false   // 不需要排序（可选，按需开启）
    });
  }).fail(function(xhr, status, error) {
    // 别忘了加错误处理，方便调试
    console.error("AJAX请求失败:", error);
  });
}

错误原因拆解 #

1. 第一个错误「Invalid operand to 'in': Object expected」：
   你一开始直接把字符串数组传给columns，但DataTable要求每个列必须是配置对象（包含title、data等属性），把字符串当成对象处理时就会触发这个报错。

2. 第二个错误「Unable to set property 'data' of undefined or null reference」：
   一方面serverSide: true让DataTable进入服务器模式，忽略了你传入的本地数据；另一方面你的tblData是一维数组，不是DataTable需要的「行对象数组」，无法匹配列的data字段。

额外注意点 #

• 老旧IE兼容：你用了普通的map和forEach，没有用箭头函数，完全兼容旧版IE，没问题。
• 界面优化：因为只有一行数据，关闭分页、搜索、排序会让表格更简洁，如果你需要这些功能，可以把对应的配置改成true。

内容的提问来源于stack exchange，提问作者NoBullMan