使用 JSON 文件填充 DataTable 列，但 DataTable 为空

Posted 2023-05-08

【中文标题】使用 JSON 文件填充 DataTable 列，但 DataTable 为空

【英文标题】：Populating DataTable column with JSON file but DataTable is empty

【发布时间】：2020-06-14 23:20:46

【问题描述】：

$.ajax(
  'url': 'http://localhost:8080/Retail-war/webresources/products/allProducts',
  'method': 'GET',
  'contentType': 'application/json',
  'headers': "Authorization": 'Bearer ' + sessionStorage.getItem('accessToken'),
).done( function(data) 
  $('#existing-product').DataTable( 
    "columnDefs": [
       "targets": -1, "data": null, "defaultContent": "<button>View More Details!</button>"
    ],
    "aaData": data,
    "columns": [
       "data": "products.productId",
       "data": "products.originalPrice",
       "data": "products.currentPrice",
    ]        
  )

这是我的 JSON 文件格式，我想用 products 中的 3 列填充 DataTable，但 DataTable 中没有显示任何内容，也没有引发错误。如何使用 products 对象下 JSON 文件中的列填充每一列？

  
        "products": [
            
                "productId": 1,
                "originalPrice": 60,
                "currentPrice": 50
            ,
            
                "productId": 2,
                "originalPrice": 80,
                "currentPrice": 70
            
        ]
    

【问题讨论】：

只是好奇：您使用的是什么版本的 DataTables？ "aaData": data 看起来像 1.10 之前的版本。我希望看到"data": data 1.10 及以后的版本。

@andrewjames 我目前使用的是最新版本。但是“aaData”和“data”在DataTable中做事的方式有什么区别吗？

有什么不同吗...？ 不 - 它不应该有所作为 - 向后兼容。但如果您有机会使用新语法，那么这样做可能是个好主意。

你能检查你的 JSON 吗？问题中发布的内容无效 - 额外的逗号可能会导致问题。例如："currentPrice": 50, 无效。

@andrewjames 抱歉，JSON 实际上还有其他列，我没有从我在问题中给出的示例中删除“，”。但 JSON 格式正确。

【参考方案1】：

而不是像这样访问您的数据...

// does not work
"data": data,
"columns": [
   "data": "products.productId",
   "data": "products.originalPrice",
   "data": "products.currentPrice"
]

将初始化器更改为：

// works
"data": data.products,
"columns": [
   "data": "productId",
   "data": "originalPrice",
   "data": "currentPrice"
]

DataTable 需要您将使用的可迭代对象位于列定义之外（迭代发生的地方）。

这些更改对我有用（在您的示例的精简版中）。

更新：

根据要求，这里有一些更多的细节来解释这种情况：

如果您尝试使用"data": data,，那么您将提供一个具有以下结构的 JSON 对象：

"products": [an array of objects]

columns 定义使用它来迭代您的 JSON。但是没有什么可以迭代的——只有一项——数组。

但是，如果您首先使用 "data": data.products 向下钻取结构中的一个级别，则您会将以下 JSON 传递给您的 columns 定义：

[row 1 data, row 2 data, ... row n data]

这可以通过 DataTables 进行迭代，以填充其表中的每一行。

如果存在嵌套对象，您仍然可以深入了解每个正在迭代的对象。在您的情况下，没有任何嵌套对象 - 但想象一下您的数据是否看起来像这样（顺便说一句，这是一个完全人为的例子）：

    "products": [
        "productId": 1,
        "originalPrice": 
            "currency": "USD",
            "amount": 60
        ,
        "currentPrice": 50
    , 
        "productId": 2,
        "originalPrice": 
            "currency": "USD",
            "amount": 80
        ,
        "currentPrice": 70
    ]

在这种情况下，我们可以这样访问数据：

"data": data2.products,
      "columns": [
         "data" : "productId" ,
         "data" : "originalPrice.amount" ,
         "data" : "currentPrice" 
      ]

这里我们看到使用点符号深入到originalPrice 对象，以获取我们想要显示的数字：originalPrice.amount。

【讨论】：

您好，感谢您的帮助。但是我能知道为什么“products.something”在这种情况下不起作用吗？这是否意味着默认情况下 DataTable 不会在嵌套 JSON 中写入，如果我只使用 "data" : data？

@JinWei - 我添加了一些注释和示例 - 希望对您有所帮助。

【参考方案2】：

默认情况下，DataTables 期望该数组被称为 data。您可以使用dataSrc 属性对其进行更改，但前提是您使用的是内置的DataTables Ajax 选项，老实说，无论如何还是建议您这样做。像这样定义您的 DataTable：

$('#existing-product').DataTable( 
    ajax: 
        url: "http://localhost:8080/Retail-war/webresources/products/allProducts",
        dataSrc: "products",
        headers: "Authorization": 'Bearer ' + sessionStorage.getItem('accessToken'),
    
);

在将数组回显为“数据”之前，也可以在服务器上重命名数组

【讨论】：

您好，我也尝试过使用 dataSrc，但它似乎也没有将任何数据填充到 DataTable 列中。