之前常用的表格插件是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="/1.10.15/css/jquery.dataTables.css"><!-- jQuery --><script type="text/javascript" charset="utf8" src="/jquery-1.10.2.min.js"></script><!-- DataTables --><script type="text/javascript" charset="utf8" src="/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/5b5064a129bddf4b872cce05/zyn/getTable",async:false,success: function(data){tabledata = data}});*/var table = $('#table_id_example').DataTable({/* data: tabledata,*/ajax: {url: "https://www.easy-/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": "/07/25","office": "2","extn": "8422"},{"name": "3","position": "3","salary": "3","start_date": "/04/25","office": "3","extn": "5421"},{"name": "4","position": "4","salary": "4","start_date": "/07/25","office": "4","extn": "8422"}, {"name": "5","position": "5","salary": "5","start_date": "/04/25","office": "5","extn": "5421"},{"name": "6","position": "6","salary": "6","start_date": "/07/25","office": "6","extn": "8422"}, {"name": "7","position": "7","salary": "7","start_date": "/04/25","office": "7","extn": "5421"},{"name": "8","position": "8","salary": "8","start_date": "/07/25","office": "8","extn": "8422"}, {"name": "9","position": "9","salary": "9","start_date": "/04/25","office": "9","extn": "5421"},{"name": "10","position": "10","salary": "10","start_date": "/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": "/07/25","office": "2","extn": "8422"},{"name": "3","position": "3","salary": "3","start_date": "/04/25","office": "3","extn": "5421"},{"name": "4","position": "4","salary": "4","start_date": "/07/25","office": "4","extn": "8422"},{"name": "5","position": "5","salary": "5","start_date": "/04/25","office": "5","extn": "5421"},{"name": "6","position": "6","salary": "6","start_date": "/07/25","office": "6","extn": "8422"},{"name": "7","position": "7","salary": "7","start_date": "/04/25","office": "7","extn": "5421"},{"name": "8","position": "8","salary": "8","start_date": "/07/25","office": "8","extn": "8422"},{"name": "9","position": "9","salary": "9","start_date": "/04/25","office": "9","extn": "5421"},{"name": "10","position": "10","salary": "10","start_date": "/07/25","office": "10","extn": "8422"}]}
终于成功！
重点是aaDate，要把数据放在aaDate中，这样就不会报错了
![[2024年]中考话题作文700字范文：真挚](https://700zi.400zi.cn/uploadfile/img/2024/06/07/3c5a3ae9df18925c6c423c86b3bb37c0.jpg)
![[2024年]乘着梦想的翅膀飞作文|乘着梦想的翅膀飞作文700字](https://700zi.400zi.cn/uploadfile/img/2024/06/06/65076d598b87b535c46b50abba3eca59.jpg)
