无法读取数据表中未定义的属性长度

Question

我正在尝试在数据表上显示一些数据。从 Ajax 请求中调用数据，响应为 Json 数组，如下所示：

[{"item": "one", "price": 22, "status": "free"}, {"item": "two", "price": 15, "status": "taken"}]

这是我的要求：

<script>
$(document).ready(function() {

  $('mytable').DataTable( {
      "ajax": "myurl",
      "dataType": 'json',
      "dataSrc": '',

      "columns": [
        {"data": "item" },
        {"data": "price" },
        {"data": "status"},  
    ]

  } );
} );
</script> 

这是我的 HTML：

<table id="mytable" class="display" style="width:100%">
    <thead>
        <tr>
            <th>ITEM</th>
            <th>PRICE</th>
            <th>STATUS</th>
        </tr>
    </thead>
</table>

问题是数据没有显示在表格上。 我认为当 Datatables 尝试处理我的 JSON 数据时会出现问题，因为我在控制台上收到此错误：

Uncaught TypeError: Cannot read property 'length' of undefined

Answer 1

首先，您不需要在 HTML 中制作表格。数据表创建表。

第二件事是你没有正确地调用你的桌子$('#mytable')

第三，您似乎没有将任何数据传递给表：

使用您的数据创建一个变量： var data = [{"item": "one", "price": 22, "status": "free"}, {"item": "two", "price": 15, "status": "taken"}]

将其添加到表格中：

$('#mytable').DataTable( {
      "data": data,
      "columns": [
        {"data": "item" },
        {"data": "price" },
        {"data": "status"},  
    ]

  } );
} );

链接到小提琴https://jsfiddle.net/edpbk0gc/3/

编辑

由于您正在进行ajax 调用，您需要指定"ajax" 而不是"data"

$('#mytable').DataTable( {
    ajax: {
        url: "/fetch_data",
        type: "GET",
        data: {
            id: id
        },
    },
    "columns": [
        {"data": "item" },
        {"data": "price" },
        {"data": "status"},  
    ]

  } );
} );

你基本上只是在那里做你喜欢的 ajax 调用。

参考这个doc。

Answer 2

用@ricks 提到的$('#mytable') 替换您的表选择器，您需要将ajax 中的json 与数据表预期的格式相匹配，如下所示：

{ 
    data: [{"item": "one", "price": 22, "status": "free"}, {"item": "two", "price": 15, "status": "taken"}] 
}