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

最新推荐文章于 2021-09-10 11:29:33 发布

lovely可爱欧辰

最新推荐文章于 2021-09-10 11:29:33 发布

阅读量622

点赞数

分类专栏：精品文摘

本文链接：https://blog.csdn.net/liqfyiyi/article/details/114944786

版权

精品文摘专栏收录该内容

71 篇文章 2 订阅

订阅专栏

之前常用的表格插件是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>
        
        
        <link rel="stylesheet" type="text/css" href="http://cdn.datatables.net/1.10.15/css/jquery.dataTables.css">

        
        <script type="text/javascript" charset="utf8" src="http://code.jquery.com/jquery-1.10.2.min.js"></script>

        
        <script type="text/javascript" charset="utf8" src="http://cdn.datatables.net/1.10.15/js/jquery.dataTables.js"></script>
    </head>
    <body>
        
        <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>
            
            $(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>