开发者问题收集

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

2019-11-21
1224

我试图在 Datatable 上显示一些数据。数据是从 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
3个回答

首先,您不需要用 HTML 制作表格。 Datatables 创建表。

第二件事是您没有正确调用表 $('#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 调用即可。

参考此 文档

ricks
2019-11-21

按照@ricks 所述,将您的表选择器替换为 $('#mytable') ,并且您需要将 ajax 中的 json 与数据表所需的格式进行匹配,如下所示:

{ 
    data: [{"item": "one", "price": 22, "status": "free"}, {"item": "two", "price": 15, "status": "taken"}] 
}
iamdlm
2019-11-21

我知道这个问题问了好久了,但尽管如此,我想我知道如何解决它。

dataSrc 属性的位置不对。

datatable 设置中的“ajax”节点需要分解为一个对象。在对象内部,您需要指定 dataSrc 属性并将其设置为空字符串。

因此,新代码应如下所示:

<script>
  $(document).ready(function() {
    $('mytable').DataTable( {
      "ajax": {      
        "url":"myurl",
        "type":"GET",
        "dataSrc": ""
      },
      "columns": [
        {"data": "item" },
        {"data": "price" },
        {"data": "status"},  
      ]
    });
  });
</script> 

观察

"ajax": "myurl" 

如何更改为

"ajax": {
  "url": "myurl",
  "type": "GET",
  "dataSrc": ""
}
Shahriar chandon
2022-04-27