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

Question

$.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
            }
        ]
    }

Answer 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。

Answer 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')},
    }
});

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