时间戳

首页 > 解决方案 > 将动态数据调用到 jquery 数据表时出错

jquery - 将动态数据调用到 jquery 数据表时出错

问题描述

将动态数据渲染到数据表时出现以下错误。

错误：

jquery.dataTables.min.js:78 Uncaught TypeError: Cannot read property 'style' of undefined
    at da (jquery.dataTables.min.js:78)
    at ba (jquery.dataTables.min.js:58)
    at HTMLTableElement.<anonymous> (jquery.dataTables.min.js:127)
    at Function.each (jquery-1.8.2.min.js:2)
    at init.each (jquery-1.8.2.min.js:2)
    at init.j (jquery.dataTables.min.js:116)
    at datatable.html:16
da @ jquery.dataTables.min.js:78
ba @ jquery.dataTables.min.js:58
(anonymous) @ jquery.dataTables.min.js:127
each @ jquery-1.8.2.min.js:2
each @ jquery-1.8.2.min.js:2
j @ jquery.dataTables.min.js:116
(anonymous) @ datatable.html:16

我在下面解释我的代码。

数据表.html：

<html>
<head>
  <link rel="stylesheet" type="text/css" href="http://ajax.aspnetcdn.com/ajax/jquery.dataTables/1.9.4/css/jquery.dataTables.css">
</head>
<body>
  <table id="example">
  <thead>
    <tr><th class="site_name">Name</th><th>Url </th><th>Type</th><th>Last modified</th></tr>
  </thead>
  <tbody>
  </tbody>
</table>
  <script type="text/javascript" charset="utf8" src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.8.2.min.js"></script>
  <script type="text/javascript" charset="utf8" src="http://ajax.aspnetcdn.com/ajax/jquery.dataTables/1.9.4/jquery.dataTables.min.js"></script>
  <script>
  $("#example").dataTable({
  "bServerSide": true,
  "sAjaxSource": "http://localhost/test/data_source.json",
  "aoColumns": [{
    "mData":"name",
    "sTitle": "Site name"
  },{
    "mData": "url",
    "mRender": function ( url, type, full )  {
      return  '<a href="'+url+'">' + url + '</a>';
    }
  },{
    "mData": "editor.name"
  },{
    "mData": "editor.phone"
  },{
    "mData":"editor",
    "mRender": function(data){
      return data.email.join("<br>");
    }
  }]
});
  </script>
</body>
</html>

数据源.json：

{ 
    "iTotalRecords": 50,
    "iTotalDisplayRecords": 10,
    "sEcho":10,
    "aaData": [
        {"name": "Sitepoint", "url": "http://sitepoint.com", "editor" :{ "name" : "John Doe", "phone" : ["9191919", "1212121"], "email":[]}},
        {"name": "Flippa", "url": "http://flippa.com",  "editor": { "name": "Adam Smith", "email" : ["adam.smith@domain.com"], "phone":[] }}
    ]
}

在这里，我试图获取数据 rom.json文件并将这些记录呈现在表上，但在浏览器控制台中出现上述错误。我需要解决这个问题。

标签： jquerydatatable

解决方案

推荐阅读