datatables插件AJAX请求数据报错Uncaught TypeError: Cannot read property 'length' of undefined

最新推荐文章于 2024-07-25 12:41:07 发布

三都呐

最新推荐文章于 2024-07-25 12:41:07 发布

阅读量4.3w

点赞数 5

文章标签： datatables ajax js

本文链接：https://blog.csdn.net/qq_35310703/article/details/81133244

版权

之前常用的表格插件是bootstraptable·，现在换了地方工作，这边用的是datatables。上午再看官网API，感觉写的不是很清晰很到位。

看到一篇博客写的很详细，收藏了。最全的jquery datatables api 使用详解-Amoni

我根据网上的例子写了一个ajax请求数据的demo，结果报错Uncaught TypeError: Cannot read property 'length' of undefined，错误位置实在datatables插件的js里面。代码如下：

 <!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>DataTables</title>
        <!--第一步：引入Javascript / CSS （CDN）-->
        <!-- DataTables CSS -->
        <link rel="stylesheet" type="text/css" href="http://cdn.datatables.net/1.10.15/css/jquery.dataTables.css">
         
        <!-- jQuery -->
        <script type="text/javascript" charset="utf8" src="http://code.jquery.com/jquery-1.10.2.min.js"></script>
         
        <!-- DataTables -->
        <script type="text/javascript" charset="utf8" src="http://cdn.datatables.net/1.10.15/js/jquery.dataTables.js"></script>
    </head>
    <body>
        <!--第二步：添加如下 HTML 代码-->
        <table id="table_id_example" class="table table-striped table-bordered table-hover" cellspacing="0" width="100%">
            <thead>
            <tr>
                <th>姓名</th>
                <th>岗位</th>
                <th>工资</th>
                <th>部门</th>
            </tr>
            </thead>
            <tbody>
            </tbody>
        </table>
        <script>
            <!--第三步：初始化Datatables-->
            $(document).ready( function () {
                /*var tabledata;
                $.ajax({
                    type:"post",
                    url:"https://www.easy-mock.com/mock/5b5064a129bddf4b872cce05/zyn/getTable",
                    async:false,
                    success: function(data){
                        tabledata = data
                    }
                });*/
               var table =  $('#table_id_example').DataTable({
                   /* data: tabledata,*/
                      ajax: {
                          url: "https://www.easy-mock.com/mock/5b5064a129bddf4b872cce05/zyn/getTable2"
                      },
                    columns: [
                        { data: 'name' },
                        { data: 'position' },
                        { data: 'salary' },
                        { data: 'office' }
                    ]
                });
            } );
        </script>
    </body>
</html>

url里的链接是我在EasyMock模拟的数据

我的数据格式如下：

[{
    "name": "1",
    "position": "1",
    "salary": "1",
    "office": "1"
  },
  {
    "name": "2",
    "position": "2",
    "salary": "2",
    "start_date": "2011/07/25",
    "office": "2",
    "extn": "8422"
  },
  {
    "name": "3",
    "position": "3",
    "salary": "3",
    "start_date": "2011/04/25",
    "office": "3",
    "extn": "5421"
  },
  {
    "name": "4",
    "position": "4",
    "salary": "4",
    "start_date": "2011/07/25",
    "office": "4",
    "extn": "8422"
  }, {
    "name": "5",
    "position": "5",
    "salary": "5",
    "start_date": "2011/04/25",
    "office": "5",
    "extn": "5421"
  },
  {
    "name": "6",
    "position": "6",
    "salary": "6",
    "start_date": "2011/07/25",
    "office": "6",
    "extn": "8422"
  }, {
    "name": "7",
    "position": "7",
    "salary": "7",
    "start_date": "2011/04/25",
    "office": "7",
    "extn": "5421"
  },
  {
    "name": "8",
    "position": "8",
    "salary": "8",
    "start_date": "2011/07/25",
    "office": "8",
    "extn": "8422"
  }, {
    "name": "9",
    "position": "9",
    "salary": "9",
    "start_date": "2011/04/25",
    "office": "9",
    "extn": "5421"
  },
  {
    "name": "10",
    "position": "10",
    "salary": "10",
    "start_date": "2011/07/25",
    "office": "10",
    "extn": "8422"
  }
]

把数据贴出来放在datatables的data里，没问题，可以正常加载；代码中注释的部分是我尝试在datatables的外部用ajax同步请求数据，赋值给全局变量，在赋值给datatables的data。没问题，可以正常加载。

但是一使用datatables 的ajax请求方法就错误！！

后来又查了好久才发现。确实是数据格式不对。更改数据格式如下：

{
  sEcho: 1, //当前页
  iTotalRecords: 2, //总数
  iTotalDisplayRecords: 3, //筛选后总数
  aaData: //返回的集合
    [{
        "name": "1",
        "position": "1",
        "salary": "1",
        "office": "1"
      },
      {
        "name": "2",
        "position": "2",
        "salary": "2",
        "start_date": "2011/07/25",
        "office": "2",
        "extn": "8422"
      },
      {
        "name": "3",
        "position": "3",
        "salary": "3",
        "start_date": "2011/04/25",
        "office": "3",
        "extn": "5421"
      },
      {
        "name": "4",
        "position": "4",
        "salary": "4",
        "start_date": "2011/07/25",
        "office": "4",
        "extn": "8422"
      },
      {
        "name": "5",
        "position": "5",
        "salary": "5",
        "start_date": "2011/04/25",
        "office": "5",
        "extn": "5421"
      },
      {
        "name": "6",
        "position": "6",
        "salary": "6",
        "start_date": "2011/07/25",
        "office": "6",
        "extn": "8422"
      },
      {
        "name": "7",
        "position": "7",
        "salary": "7",
        "start_date": "2011/04/25",
        "office": "7",
        "extn": "5421"
      },
      {
        "name": "8",
        "position": "8",
        "salary": "8",
        "start_date": "2011/07/25",
        "office": "8",
        "extn": "8422"
      },
      {
        "name": "9",
        "position": "9",
        "salary": "9",
        "start_date": "2011/04/25",
        "office": "9",
        "extn": "5421"
      },
      {
        "name": "10",
        "position": "10",
        "salary": "10",
        "start_date": "2011/07/25",
        "office": "10",
        "extn": "8422"
      }
    ]

}

终于成功！

重点是aaDate，要把数据放在aaDate中，这样就不会报错了

三都呐

关注

5
点赞
踩
3

收藏

觉得还不错? 一键收藏
6
评论
datatables插件AJAX请求数据报错Uncaught TypeError: Cannot read property 'length' of undefined

之前常用的表格插件是bootstraptable·，现在换了地方工作，这边用的是datatables。上午再看官网API，感觉写的不是很清晰很到位。看到一篇博客写的很详细，收藏了。最全的jquery datatables api 使用详解-Amoni我根据网上的例子写了一个ajax请求数据的demo，结果报错Uncaught TypeError: Cannot read property ...
复制链接

扫一扫