jQuery DataTable仅绑定部分数据，取消列注释触发Ajax错误

嘿，我一眼就揪出问题所在了！你遇到的这个DataTables Ajax错误，根源特别隐蔽——返回的JSON数据里，那些带Id的字段名末尾都多了个空格！

你看返回的这段数据：

{ 
  "draw": "1", 
  "recordsFiltered": 1, 
  "recordsTotal": 1, 
  "data": [{ 
    "TitleName": "w", 
    "CustomerName": "q",
    // ... 其他正常字段
    "ContentTitleId ": 1,  // 注意这里字段名最后有个空格！
    "MailClassId ": 1, 
    "ProcessingCategoryId ": 1, 
    "ServiceTypeId ": 1, 
    "TransportationTypeId ": 1 
  }] 
}

而你在前端DataTable的columns配置里写的是{ "data": "ContentTitleId" }——没有末尾的空格！DataTable找不到对应的字段，自然就抛出Ajax错误了。

解决办法有两个，推荐第一个： #

• 方案一（推荐）：修正后端返回的字段名
  把后端生成JSON时那些Id字段末尾的空格去掉，让字段名和你前端配置的完全一致，比如把"ContentTitleId "改成"ContentTitleId"。这是最规范的做法，能避免后续其他地方因为字段名不一致出问题。

• 方案二：临时适配前端配置
  如果暂时没法修改后端，那就在前端的columns配置里给字段名加上对应的空格，比如：

  columns: [
    { "data": "TitleName" },
    { "data": "CustomerName" },
    { "data": "ServiceType" },
    { "data": "MailClass" },
    { "data": "ProcessingCategory" },
    { "data": "Origin" },
    { "data": "DateModified" },
    { "data": "IsActive" },
    { "data": "ContentTitleId " },  // 加上末尾的空格
    { "data": "MailClassId " },
    { "data": "ProcessingCategoryId " },
    { "data": "ServiceTypeId " },
    { "data": "TransportationTypeId " }
  ]
  

补充说明： #

为什么之前注释掉这些列就正常？因为DataTable只会去匹配你配置的columns对应的字段，前面的字段名没有空格，能正确找到数据，所以不会报错；一旦加上那些带空格的字段配置，DataTable找不到对应字段，就触发了错误提示。

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