jquery - 无法使用 jquery datatable 通过 ajax 从文件中获取数据

标签 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>

“数据”:[ { “名称”:“老虎尼克松”, "position": "系统架构师", "工资": "$320,800", "开始日期": "2011/04/25", “办公室”:“爱丁堡”, “扩展”:“5421” }, { “名称”:“加勒特·温特斯”, "职位": "会计师", "工资": "$170,750", "开始日期": "2011/07/25", “办公室”:“东京”, “扩展”:“8422” }, { “姓名”:“阿什顿·考克斯”, "position": "初级技术作者", “工资”:“$86,000”, “开始日期”:“2009/01/12”, “办公室”:“旧金山”, “扩展”:“1562” }, { “姓名”:“塞德里克·凯利”, "position": "高级 Javascript 开发人员", "工资": "$433,060", "开始日期": "2012/03/29", “办公室”:“爱丁堡”, “扩展”:“6224” },
{ “姓名”:“卡拉·史蒂文斯”, "position": "销售助理", "工资": "145,600 美元", "开始日期": "2011/12/06", “办公室”:“纽约”, “扩展”:“3990” },
{ “名称”:“唐娜·斯奈德”, "position": "客户支持", “工资”:“112,000 美元”, "开始日期": "2011/01/25", “办公室”:“纽约”, “扩展”:“4226” } ]

谢谢

最佳答案

我假设您使用了 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"
},...

关于jquery - 无法使用 jquery datatable 通过 ajax 从文件中获取数据,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/31067259/

相关文章:

jquery - 如何使用 knockout 更改表的行顺序。拖放或使用向上/向下按钮

ajax - fastcgi_finish_request 在打开 session 存在时创建挂起连接

javascript - 如何使用 DataTables 中的编辑器并从 ajax 调用数据

javascript - 我如何搜索在 jQuery 数据表中以字符串形式显示的 bool 值?

php - jQuery 数据表 - 未捕获的 TypeError : a. charAt 不是函数

javascript - 滚动宽度问题的最佳解决方案是什么?

javascript - 无法与 <t :loop> (Tapestry ) 进行叠加

javascript - 如何在同一模式窗口中创建 3 个步骤?

php - history.pushState 导航 - 元标签怎么样 - 单独的模板?

javascript - AJAX 后 $scope.variable 未更改