无法通过jjery datatable从ajax获取文件中的数据

时间:2015-06-26 07:19:40

标签: jquery ajax datatables

我在这里使用示例:https://datatables.net/examples/styling/jqueryUI.html

下面是我的html和jquery代码

<html>
<head>
  <link rel="stylesheet" type="text/css" href="jquery-dataTables.css">
  
  <script type="text/javascript" charset="utf8" src="jquery-min.js"></script>
  <script type="text/javascript" charset="utf8" src="jquery-dataTables.js"></script>
  <script>
  
  $(document).ready(function() {
    $('#example').dataTable( {
        "ajax": "data/test.txt",
        "columns": [
            { "data": "name" },
            { "data": "position" },
            { "data": "office" },
            { "data": "extn" },
            { "data": "start_date" },
            { "data": "salary" }
        ]
    } );
} );
  </script>
  
</head>
<body>
<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>
 
        <tfoot>
            <tr>
                <th>Name</th>
                <th>Position</th>
                <th>Office</th>
                <th>Extn.</th>
                <th>Start date</th>
                <th>Salary</th>
            </tr>
        </tfoot>
    </table>
</body>
</html>

这是我文件的结构

enter image description here

但它无法将数据加载到数据表中,任何人都可以提供帮助吗?

编辑(附加我的测试数据):此数据用于<​​/ p>

“数据”:[     {       “名字”:“老虎尼克松”,       “职位”:“系统架构师”,       “薪水”:“320,800美元”,       “start_date”:“2011/04/25”,       “办公室”:“爱丁堡”,       “extn”:“5421”     },     {       “名字”:“加勒特温特斯”,       “职位”:“会计”,       “薪水”:“170,750美元”,       “start_date”:“2011/07/25”,       “办公室”:“东京”,       “extn”:“8422”     },     {       “名字”:“Ashton Cox”,       “职位”:“初级技术作者”,       “薪水”:“86,000美元”,       “start_date”:“2009/01/12”,       “办公室”:“旧金山”,       “extn”:“1562”     },     {       “名字”:“塞德里克凯利”,       “职位”:“高级Javascript开发人员”,       “薪水”:“433,060美元”,       “start_date”:“2012/03/29”,       “办公室”:“爱丁堡”,       “extn”:“6224”     },
    {       “名字”:“Cara Stevens”,       “职位”:“销售助理”,       “薪水”:“145,600美元”,       “start_date”:“2011/12/06”,       “办公室”:“纽约”,       “extn”:“3990”     },
    {       “名字”:“Donna Snider”,       “职位”:“客户支持”,       “薪水”:“112,000美元”,       “start_date”:“2011/01/25”,       “办公室”:“纽约”,       “extn”:“4226”     }   ]

由于

1 个答案:

答案 0 :(得分:1)

我假设您使用了Datatables ajax simple example中的示例test.txt文件,但在this example中定义了列。问题是test.txt文件没有列,您的数据表期望。所以有两种方法可以解决它: 不要在数据表中定义列

$(document).ready(function() {
    $('#example').dataTable( {
        "ajax": "data/test.txt"
    } );
} );

或者更改您的test.txt文件以匹配列,例如:

"data": [
{
  "name": "Airi",
  "position": "Accountant",
  "office": "Tokyo",
  "extn": "...",
  "start_date": "28th Nov 08",
  "salary": "$162,700"
},...