填充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”，即可引用数据表插件中的列默认选项。

另外，您正在调用尚未定义的名为“ 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复制）

希望这可以帮助。 快乐的编码:)

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