javascript - jQuery DataTables Ajax GET json 格式化

Question

我正在使用 JQuery DataTables 来显示表格数据。

我使用以下代码来执行 GET ajax 请求:

$(document).ready(function() {
  var table = $('#data_table').DataTable( {
    ajax: {
        type: 'GET',
        url: url_path,
        data: {'data_id':data_id},
        success: function(data) {
            #here is where I am not sure how to populate the table with the data
            for (var i = 0; i < data.length; i++) {
                $.each(data[i], function(name, value) {
                    console.log(name + ": " + value);
                });
            }
        }
    }
} );

控制台输出示例:

>>obj1_property1: value1 #to go in table row 1 column 1
>>obj1_property2: value2 #to go in table row 1 column 2
>>obj2_property1: value1 #to go in table row 2 column 1
>>obj3_property2: value2 #to go in table row 2 column 2

从 ajax 请求中，我获得了一个对象数组，并且可以从 success 函数内的代码中获取它们的名称和值属性。但我不知道如何用这些数据填充数据表。

我在这里找到的例子:https://datatables.net/examples/ajax/objects.html显示使用:

"ajax": "data/objects.txt",
    "columns": [
        { "data": "name" },

但我无法弄清楚如何根据我提供的具体示例进行定制 - 在返回对象数组的示例中，我将在何处以及如何指定“列”？

Answer 1

您需要使用 data option 添加columns 选项给您数据表初始化选项。您还需要返回 JSON，它是单个对象，数据数组包含在“数据”字段中(见下文)。还要从 ajax 选项中删除 success 选项，因为这需要您显式调用来绘制表格。如果您需要从请求中发布流程数据，则可以使用它。这个 fiddle 应该有帮助 https://jsfiddle.net/backpackcoder/fv95dzxs/ 。因为我使用 post 进行 /echo/json 调用，所以我的 ajax 数据对象将返回的 JSON 放入 data 参数中，而不是您的 id。

您会希望返回的数据具有这种格式。

{
    "data": [{
      "col1": "data1",
      "col2": "data2",
      "col3": "data3",
    }, {
      "col1": "data4",
      "col2": "data5",
      "col3": "data6",
    }]
  }