填充jquery datatable ajax txt文件

Question

我是jquery / ajax新手，并通过数据表示例。我在eclipse中使用txt数据填充数据表时遇到问题。我只是收到一条加载消息。任何帮助将不胜感激。

<table>
  <thead>
    <tr>
      <th>Name</th>
      <th>Position</th>
      <th>Office</th>
      <th>Extn</th>
      <th>Start date</th>
      <th>Salary</th>
     </tr>
  </thead>
</table>

<script>    
$(document).ready(function() {
  $('#example').dataTable( {
    "ajax": "data/object.txt",
    "columns": [
      { "data": "name" },
      { "data": "position" },
      { "data": "office" },
      { "data": "extn" },
      { "data": "start_date" },
      { "data": "salary" }
    ]
  } );
} );
</script>

/////object.txt 
{
  "data": [
    {
      "name": "Tiger Nixon",
      "position": "System Architect",
      "salary": "$320,800",
      "start_date": "2011/04/25",
      "office": "Edinburgh",
      "extn": "5421"
    },...................

Answer 1

在您的代码示例中，您有一行

"columns": [{ "data": "name" },{ "data": "position" },{ "data": "office" },{ "data": "extn" },{ "data": "start_date" },{ "data": "salary" }]

只需将列更改为“columnDefs”，它引用datatable插件中的列defaults选项。

而且，您正在调用名为“example”的id上的数据表插件，您尚未定义它。所以给你的表id="example"

所以最终的代码看起来应该是

$(document).ready(function() {
  $('#example').dataTable({
    "ajax": 'array.txt',
    "columnDefs": [{   /* changed this */
      "data": "name"
    }, {
      "data": "position"
    }, {
      "data": "office"
    }, {
      "data": "extn"
    }, {
      "data": "start_date"
    }, {
      "data": "salary"
    }]
  });
});

<link href="//cdn.datatables.net/1.10.5/css/jquery.dataTables.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script src="//cdn.datatables.net/1.10.5/js/jquery.dataTables.min.js"></script>
<table id="example" class="display" cellspacing="0" width="100%">
  <thead>
    <tr>
      <th>Name</th>
      <th>Position</th>
      <th>Office</th>
      <th>Extn</th>
      <th>Start date</th>
      <th>Salary</th>
    </tr>
  </thead>
</table>

现在上面的代码段 将不会 工作，因为array.txt的路径错误。在本地复制array.txt文件。小提琴或代码片段不允许通过它们发出ajax请求。

以下是示例array.txt（从数据表网站@ https://www.datatables.net/examples/ajax/data/arrays.txt复制而来）

希望这会有所帮助。 快乐编码：）

我本地计算机上的屏幕截图