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