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

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

  1. 小程序组件报错Uncaught TypeError: Cannot read property 'name' of undefined

    小程序组件报错Uncaught TypeError: Cannot read property 'name' of undefined Component({/*** 组件的属性列表*/propert ...

  2. JsonMap对象的获取与前台浏览器报错Uncaught TypeError: Cannot read property ‘map‘ of undefined

    JsonMap对象的获取与前台浏览器报错Uncaught TypeError: Cannot read property 'map' of undefined 经过不断排查以后发现是自己的后台传的值出 ...

  3. uEditor setContent方法报错Uncaught TypeError: Cannot read property ‘innerHTML‘ of undefined

    uEditor setContent方法报错Uncaught TypeError: Cannot read property 'innerHTML' of undefined 报错信息 解决方法 报错 ...

  4. select2 多选的下拉框报错Uncaught TypeError: Cannot read property 'toUpperCase' of undefined

    报错原有: select2使用多选下拉框,<input select2  select2-model="entity.brandIds" config="brand ...

  5. vue3报错“ Uncaught TypeError Cannot read property ‘use‘ of undefined”

    在跟着视频学习用vue配置路由时,在路由文件中使用Vue.use(router)的语句无法正常启动服务,并且浏览器报错,提示'use'并未定义:看了一下,如下图,vue中没有use()这个方法 经过查 ...

  6. datatable报错 uncaught TypeError: Cannot read property 'aDataSort' of undefined

    1.https://stackoverflow.com/questions/28454203/jquery-datatables-cannot-read-property-adatasort-of-u ...

  7. vue-cli3的项目 CDN链接报错解决 Uncaught TypeError: Cannot read property 'prototype' of undefined at Object.

    Uncaught ReferenceError: iview is not defined 出现这个问题的原因是路径的问题 确保你的路径是正确的,或者是既全局引入了iview,又按需引入,会造成这样的 ...

  8. 接上一篇:【Vue 项目打包后访问报错:Uncaught TypeError: Cannot read property 'call' of undefined】

    上一篇:Vue 项目打包后访问报错:Uncaught TypeError: Cannot read property 'call' of undefined 其实在修改 webpack.prod.co ...

  9. Uncaught TypeError: Cannot read property ‘dispatch‘ of undefined

    一.背景描述 用VUE的时候报这个错 Uncaught TypeError: Cannot read property 'dispatch' of undefined 二.问题分析 1.我的代码是酱紫 ...

最新文章

  1. Uva 11292 The Dragon of Loowater 模拟题
  2. 整数数组查找java_使用Java编写程序以查找整数数组中的第一个非重复数字?
  3. Windows环境下spyder调用Arcpy
  4. 云计算具有什么平台_漫话:什么是云计算?
  5. 包含Iphlpapi.h 编译错误 error C2065: 'HRASCONN'
  6. clojure JavaFX程序uberjar打包卡死的问题
  7. 基于 ida 的反汇编转换 Obj 的可行性 笔记(1)
  8. python使用matplotlib绘制k线图
  9. 班级日常分享:一天一瞬间!
  10. 用于基于SWT的应用程序的RichText编辑器组件
  11. jq监听子元素被点击_vue开发app点击字母展示地区列表(兄弟组件之间联动)
  12. 启动activemq_「Java」 - SpringBoot amp; ActiveMQ
  13. oracle 使用数据泵恢复,oracle 使用数据泵 导出整个db 并恢复
  14. mysql 存储过程(提供查询语句并返回查询执行影响的行数)
  15. 百度文库会员制度悄然上线
  16. Axure RP9新手教程
  17. ipone=遥控器?
  18. androidmmi可以卸载吗_删除Android自带的系统软件注意事项
  19. 自己在VB编程过程中遇到的--不能加载MSCOMCTL.OCX提示
  20. python提取excel表格数据

热门文章

  1. python数据库操作sqlite_Python操作mysql和sqlite
  2. 05-xpath爬虫数据解析
  3. ORA-39095: Dump file space has been exhausted
  4. redis-sentinel主从复制高可用
  5. 综合示例:自动生成一组新闻
  6. java-四则运算,自动出题(4)
  7. linux环境变量与文件查找
  8. SharePoint 使用代码创建 SPWeb/SPSiite/SPWebApplication以及WebPart添加到页面与删除 (一)...
  9. 解决Linux下音乐乱码的问题:
  10. Linux vi 中移动光标 命令