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

之前常用的表格插件是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>

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
引用\[1\]: Uncaught TypeError: Cannot read property 'node' of undefined at OnePersonScene.js:143 at CCLoader.<anonymous> (CCLoader.js:446) at CCLoader.js:238 at utils.js:85 。 引用\[2\]:小编的页面出现了“Uncaught TypeError: $(...).dataTable is not a function”误,检查了好几遍js引入路径,都没有发现任何问题,具体误如下: Uncaught TypeError: Cannot read property 'defaults' of undefined at jquery.dataTables.bootstrap.js:2 (anonymous) @ jquery.dataTables.bootstrap.js:2 Uncaught TypeError: $(...).dataTable is not a function user_list:198 at HTMLDocument.<anonymous> (user_list:198) at l (jquery.min.js:4) at Object.fireWith \[as resolveWith\] (jquery.min.js:4) at Function.ready (jquery.min.js:4) at HTMLDocument.S (jquery.min.js:4) 。 引用\[3\]:小编一个个的排查,发现小编在引入jquery.dataTables.min.js这个文件的时候,上方有一个“echarts.js”图表件的js,好像和它有冲突,当小编将echarts.js这一行注释掉之后,就再也没有Uncaught TypeError: $(...).dataTable is not a function”误了。 。 问题:Uncaught TypeError: Cannot read property 'children' of null \[0\]anonymous@assets 回答: 这个误通常是由于在代码中尝试访问一个空对象的属性而引起的。具体来说,误信息中的"Cannot read property 'children' of null"表示在一个空对象上尝试访问'children'属性时出。\[0\]要解决这个问题,你可以检查代码中是否有任何地方将一个变量设置为null,然后尝试访问它的属性。另外,你还可以使用条件语句或try-catch块来处理可能为空的对象,以避免出现这种误。 #### 引用[.reference_title] - *1* [Cocos creator中出现Uncaught TypeError: Cannot read property 'node' of undefined](https://blog.csdn.net/ToBeTheOnlyOne/article/details/77949980)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v91^insert_down28v1,239^v3^insert_chatgpt"}} ] [.reference_item] - *2* *3* [“Uncaught TypeError: $(...).dataTable is not a function”](https://blog.csdn.net/xiao__jia__jia/article/details/86663751)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v91^insert_down28v1,239^v3^insert_chatgpt"}} ] [.reference_item] [ .reference_list ]
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值