之前常用的表格插件是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中,这样就不会报错了