菜鸟刚刚搜索了一下，到底应不应该学 jq，大部分回答都是不应该，主要是公司都开始去jq了，现在主要推荐学习react、vue、angular，但是菜鸟感觉datatable这个功能 vue 还不能完全替代，主要是 element-ui 和 vant 的表格功能都没有datatable的全面。
当然，菜鸟发现了一个组件库的table还挺全面的，这里给出地址：Vuetify table
文章目录
datatable
这里菜鸟就不跑题了，反正现在demo用的是 datatable ，就先来粗略总结一下 datatable 常用的操作，今后用到会更快，然后就是今后菜鸟用vue重构项目的时候，也会重新再写一篇文章。
1、引入
菜鸟发现官网只能下载最新版，其它版本只能自己去搜索着下载，反正菜鸟没搜到，然后菜鸟就搜了一下datatable是否兼容以前的版本，然后果然还是没有（干得漂亮T~T），应该是直接使用最新版就行。
这里菜鸟奉上自己项目用到的版本（datatable 1.10.15）：
链接：https://pan.baidu.com/s/1xvf2ULxoOxJ4yYsijZ8KRw
提取码：aaaa
在你的项目中使用 DataTables，只需要引入三个文件即可：jQuery库，一个DT的核心js文件和一个DT的css文件（这里css文件就不给了，官网最新版的css应该是兼容以前版本的），css文件引入不一样的效果也有点不同，可以自己看看css源码（可以都引入一次，找到自己喜欢的样式就行）。
这是全部样式，其中min就是把对应的 js 丑化后的代码！（没什么影响）
菜鸟想来想去、写来写去，最后发现直接看文档最好： 安装
2、基础 和 结合ajax
注意：
菜鸟这里用的是 h-ui框架，所以有很多引入都是自带的，样式也是h-ui写的，所以读者看不到菜鸟引入上面列举的css，读者着重看js部分就好， h-ui的官网 ，后面我会写一下h-ui有关的博客！
代码：
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<meta name="renderer" content="webkit|ie-comp|ie-stand">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport"
content="width=device-width,initial-scale=1,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no" />
<meta http-equiv="Cache-Control" content="no-siteapp" />
<!--/meta 作为公共模版分离出去-->
<link rel="stylesheet" type="text/css" href="static/h-ui/css/H-ui.min.css" />
<link rel="stylesheet" type="text/css" href="lib/Hui-iconfont/1.0.9/iconfont.css" />
<link rel="stylesheet" type="text/css" href="static/business/css/style.css" />
<!--/meta 作为公共模版分离出去-->
<title>车辆信息</title>
</head>
<body>
<div class="wap-container">
<h2
style="width: 100%;height:8%;position: fixed;background:url(img/car_head.jpg);background-size: 100% 400%;background-position:0% 60%;">
</h2>
<article class="Hui-admin-content clearfix">
<div class="panel mt-20">
<div class="panel-body">
<div class="clearfix mt-20">
<table style="cursor: pointer;" class="table table-border table-bordered table-hover table-bg table-sort">
<thead>
<tr class="text-c">
<th>旧门牌</th>
<th>新门牌</th>
<th>姓名</th>
<th>网格</th>
<th>联系电话</th>
<th>电动车、摩托车等车辆（车牌号）</th>
<th>机动车（车主、联系电话、车牌号）</th>
<th>是否养犬、是否办理狗证</th>
<th>备注（是否存在乱堆乱放、是否油烟外溢）</th>
</tr>
</thead>
<tbody>
</tbody>
</table>
</div>
</div>
</div>
</article>
</div>
<!--_footer 作为公共模版分离出去-->
<script type="text/javascript" src="lib/jquery/1.9.1/jquery.min.js"></script>
<script type="text/javascript" src="lib/layer/3.1.1/layer.js"></script>
<script type="text/javascript" src="static/h-ui/js/H-ui.min.js"></script>
<!--/_footer /作为公共模版分离出去-->
<!--请在下方写此页面业务相关的脚本-->
<script type="text/javascript" src="lib/datatables/1.10.15/jquery.dataTables.min.js"></script>
<script type="text/javascript" src="lib/laypage/1.2/laypage.js"></script>
<script type="text/javascript" src="static/business/js/main.js"></script>
<script type="text/javascript">
$(function () {
$('.table-sort').dataTable({
"aaSorting": [[4, "desc"]], // 默认第几个排序，从0开始
"bStateSave": true, // 状态保存。有默认需要排序的需求时，该属性最好不要，尽管会降低速度，但是：完成需求 >= 速度；如果有点击跳转，那么就需要该属性，不然别人跳转完回来又需要重新翻页过去（修改代码看效果的时候也记得把这个关了，不然不清除缓存一直都是先的界面）
"pagingType": "full_numbers", // 要想显示首页和尾页这两个按钮，就必须加这个属性
"aoColumnDefs": [
{ "orderable": false, "aTargets": [] } // 不参与排序的列
],
// 这里写ajax
ajax: {
url: 'XXXXXXXXXx',
type: "get",
dataSrc: function (res) {
return res;
}
},
columns: [ // 要和返回的字段相对应
{
"data": "old_brand",
"sClass": "text-c" // 为td添加这个class，自己定义这个class样式就行
},
{
"data": "new_brand",
"sClass": "text-c"
},
{
"data": "name",
"sClass": "text-c"
},
{
"data": "grid",
"sClass": "text-c"
},
{
"data": "phone",
"sClass": "text-c"
},
{
"data": "electric_vehicle",
"sClass": "text-c"
},
{
"data": "vehicle",
"sClass": "text-c"
},
{
"data": "dog",
"sClass": "text-c"
},
{
"data": "remarks",
"sClass": "text-c"
},
],
});
});
</script>
<!--/请在上方写此页面业务相关的脚本-->
</body>
</html>
运行结果：
注意dataSrc
dataSrc 不仅可以返回 JSON数据 ，还能在里面执行一些方法，例如：在表格显示之前就可以预先加载的一些数据（当然一般看不出来很大的先后差别）
3、render函数
代码：
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<meta name="renderer" content="webkit|ie-comp|ie-stand">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport"
content="width=device-width,initial-scale=1,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no" />
<meta http-equiv="Cache-Control" content="no-siteapp" />
<link rel="Bookmark" href="favicon.ico">
<link rel="Shortcut Icon" href="favicon.ico" />
<!--_meta 作为公共模版分离出去-->
<link rel="stylesheet" type="text/css" href="static/h-ui/css/H-ui.min.css" />
<link rel="stylesheet" type="text/css" href="lib/Hui-iconfont/1.0.9/iconfont.css" />
<link rel="stylesheet" type="text/css" href="static/business/css/style.css" />
<!--/meta 作为公共模版分离出去-->
<title>进出车辆信息</title>
</head>
<body>
<div class="wap-container">
<h2
style="text-align: center;color: gold;font-weight: 800;width: 100%;height: 8%;position: fixed;background:url(img/car_head.jpg);background-size: 100% 400%;background-position: 0% 60%;">
</h2>
<article class="Hui-admin-content clearfix">
<div class="panel mt-20">
<div class="panel-body">
<div class="clearfix mt-20">
<table style="cursor: pointer;" class="table table-border table-bordered table-hover table-bg table-sort">
<thead>
<tr class="text-c">
<th>车牌</th>
<th>时间</th>
<th>出入</th>
</tr>
</thead>
<tbody>
</tbody>
</table>
</div>
</div>
</div>
</article>
</div>
<!--_footer 作为公共模版分离出去-->
<script type="text/javascript" src="lib/jquery/1.9.1/jquery.min.js"></script>
<script type="text/javascript" src="lib/layer/3.1.1/layer.js"></script>
<script type="text/javascript" src="static/h-ui/js/H-ui.min.js"></script>
<!--/_footer /作为公共模版分离出去-->
<!--请在下方写此页面业务相关的脚本-->
<script type="text/javascript" src="lib/datatables/1.10.15/jquery.dataTables.min.js"></script>
<script type="text/javascript" src="lib/laypage/1.2/laypage.js"></script>
<script type="text/javascript" src="static/business/js/main.js"></script>
<script type="text/javascript">
$(function () {
$('.table-sort').dataTable({
"aaSorting": [[1, "desc"]],
"pagingType": "full_numbers",
// 这里写ajax
ajax: {
url: 'XXXXXXXXXXXX',
type: "get",
dataSrc: function (res) {
return res;
}
},
columns: [
{
"data": "car_number",
"sClass": "text-c"
},
{
"data": "car_time",
"sClass": "text-c"
},
{
"data": "inout",
"render": function (data, type, row) { //对数据进行处理，并返回（type\row都可以打印看看）
return data == 1 ? "<font color=red>进场</font>" : "<font color=blue>出场</font>";
},
"sClass": "text-c"
},
],
});
});
</script>
<!--/请在上方写此页面业务相关的脚本-->
</body>
</html>
运行结果：
4、取消第一行默认排序
这个是菜鸟在写这篇博客时，老师突然提出的需求，然后菜鸟发现：不管你用SQL查询数据时，是如何排序的，当数据传递给 DataTable 时，它会按照它自己的规则再进行一次排序，这个规则就是 "order"
官网（order）：
那么如何才能取消呢？
当然，我这个是需求比较奇怪，必须是第一排不排序，其它排也不能默认排序(但是要可以排序)，及数据库返回的是什么就用什么顺序。如果你可以使用其它行排列，那么也比较简单：
5、获取数据 和 添加事件
注意：
添加事件时，必须使用 DataTable 而不能写 dataTable
官网：
代码：
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<meta name="renderer" content="webkit|ie-comp|ie-stand">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no" />
<meta http-equiv="Cache-Control" content="no-siteapp" />
<link rel="Bookmark" href="favicon.ico" >
<link rel="Shortcut Icon" href="favicon.ico" />
<!--_meta 作为公共模版分离出去-->
<link rel="stylesheet" type="text/css" href="static/h-ui/css/H-ui.min.css" />
<link rel="stylesheet" type="text/css" href="lib/Hui-iconfont/1.0.9/iconfont.css" />
<link rel="stylesheet" type="text/css" href="static/business/css/style.css" />
<!--/meta 作为公共模版分离出去-->
<title>美食街信息</title>
</head>
<body>
<div id="pbw_app" class="wap-container">
<h2 style="text-align: center;color: rgb(30,144,255);font-weight: 800;width: 100%;height: 8%;position: fixed;background: url(img/food_head.jpg);background-size: 50% 500%;background-position: 0 40%;">美食街信息</h2>
<article class="Hui-admin-content clearfix">
<div class="panel mt-20">
<div class="panel-body">
<div class="clearfix mt-20">
<table style="cursor: pointer;" class="table table-border table-bordered table-hover table-bg table-sort">
<thead>
<tr class="text-c">
<th>店铺名称</th>
<th>类别</th>
<th>面积</th>
<th>从业人数</th>
<th>店主姓名</th>
<th>联系电话</th>
<th>地址</th>
<th>运营情况</th>
<th>备注</th>
</tr>
</thead>
<tbody>
</tbody>
</table>
</div>
</div>
</div>
</article>
</div>
<!--_footer 作为公共模版分离出去-->
<script type="text/javascript" src="lib/jquery/1.9.1/jquery.min.js"></script>
<script type="text/javascript" src="lib/layer/3.1.1/layer.js"></script>
<script type="text/javascript" src="static/h-ui/js/H-ui.min.js"></script>
<!--/_footer /作为公共模版分离出去-->
<!--请在下方写此页面业务相关的脚本-->
<script type="text/javascript" src="lib/datatables/1.10.15/jquery.dataTables.min.js"></script>
<script type="text/javascript" src="lib/laypage/1.2/laypage.js"></script>
<script type="text/javascript" src="static/business/js/main.js"></script>
<script>
const food_introduction = new Map([
["杏花早点", "舌间上的美味，你与我的滋味。"],
["鸿兴早吃", "养生粥+公婆饼，开启健康每一天;手工无添加，美味先万家。"],
["咸宁酒坊", "采用传统土曲发酵，无任何添加剂，自然清香，口感尚佳，后劲舒畅，绿色自然是吾辈一贯坚持的理念！"],
["辰颐水果生鲜", "今天维C您吃了吗？新鲜水果，每日必不可少哟！"],
["矿建牛肉黑粉", "口感浓郁，份量十足，回味无穷;老汤底料配上优质粉面，好吃不是吹的。"],
["老面馒头", "纯手工现做现卖，好吃看的见;吃美食，听一个老兵的故事。"],
["亮亮副食", "价优质好，欢迎常来。"],
["矿建粮油店", "真情为民，服务至上。"],
["煎饼传说", "酱香饼以香、甜、辣、脆为主要特点，香中有香，甜中带绵，辣而不燥，外脆里软，配上特制秘酱，一饼在手、唇指留香 ！原味青菜馅饼皮薄馅大，物美价廉，馅饼有限(馅)，回味无穷！铁山的美味煎饼尽在冶矿巷(煎饼传说）！"],
["纯味饮品", "健康美味的早餐从纯味饮品开始。"],
["第一家粉面馆", "是从1988年开始到现在已经有31年历史的老店，多年来坚持“品质为上、待客以诚”的经营理念。主打产品有牛肉黑粉，肥肠粉面，热干面等......一直精选用品质上好的米粉、牛肉、佐料，30多年的秘制配方吸引了大批顾客，铁山很多顾客都是在我们家从小吃到大的，不少顾客评价物美价廉，我们不开分店，精益求精。店址一直位于冶矿巷美食街，每到节假日排队的络绎不绝，现在应很多顾客要求，已经上线饿了么外卖，为大家提供更好的服务。"]
]);
$(function () {
const table = $('.table-sort').DataTable({
"order": [],
"pagingType": "full_numbers",
"aoColumnDefs": [
{ "orderable": false, "aTargets": [] }
],
ajax: {
url: 'XXXXXXXXXXXX',
type: "get",
dataSrc: function(res) {
console.log(res);
return res;
}
},
columns: [
{
"data": "name",
"render": function (data, type, row) {
if (food_introduction.has(data)) {
return `<font color="blue">${data}</font>`;
}else{
return data;
}
},
"sClass": "text-c",
},
{
"data": "type",
"sClass": "text-c"
},
{
"data": "area",
"sClass": "text-c"
},
{
"data": "number",
"sClass": "text-c"
},
{
"data": "leader_name",
"sClass": "text-c"
},
{
"data": "phone",
"sClass": "text-c"
},
{
"data": "address",
"sClass": "text-c"
},
{
"data": "status",
"sClass": "text-c"
},
{
"data": "remarks",
"sClass": "text-c"
}
],
});
// 添加事件和获取数据
$('.table-sort tbody').on('click', 'tr', function () {
const idx = table.row(this).data().id;
const namex = table.row(this).data().name;
window.location.href = '../food_store_detail/food_store_detail.html?id='+idx+"&name="+namex;
});
});
</script>
<!--/请在上方写此页面业务相关的脚本-->
</body>
</html>
6、修改每页显示的条数
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<meta name="renderer" content="webkit|ie-comp|ie-stand">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no" />
<meta http-equiv="Cache-Control" content="no-siteapp" />
<link rel="Bookmark" href="favicon.ico" >
<link rel="Shortcut Icon" href="favicon.ico" />
<!--_meta 作为公共模版分离出去-->
<link rel="stylesheet" type="text/css" href="static/h-ui/css/H-ui.min.css" />
<link rel="stylesheet" type="text/css" href="lib/Hui-iconfont/1.0.9/iconfont.css" />
<link rel="stylesheet" type="text/css" href="static/business/css/style.css" />
<!--/meta 作为公共模版分离出去-->
<title>美食街信息</title>
</head>
<body>
<div id="pbw_app" class="wap-container">
<h2 style="text-align: center;color: rgb(30,144,255);font-weight: 800;width: 100%;height: 8%;position: fixed;background: url(img/food_head.jpg);background-size: 50% 500%;background-position: 0 40%;">美食街信息</h2>
<article class="Hui-admin-content clearfix">
<div class="panel mt-20">
<div class="panel-body">
<div class="clearfix mt-20">
<table style="cursor: pointer;" class="table table-border table-bordered table-hover table-bg table-sort">
<thead>
<tr class="text-c">
<th>店铺名称</th>
<th>类别</th>
<th>面积</th>
<th>从业人数</th>
<th>店主姓名</th>
<th>联系电话</th>
<th>地址</th>
<th>运营情况</th>
<th>备注</th>
</tr>
</thead>
<tbody>
</tbody>
</table>
</div>
</div>
</div>
</article>
</div>
<!--_footer 作为公共模版分离出去-->
<script type="text/javascript" src="lib/jquery/1.9.1/jquery.min.js"></script>
<script type="text/javascript" src="lib/layer/3.1.1/layer.js"></script>
<script type="text/javascript" src="static/h-ui/js/H-ui.min.js"></script>
<!--/_footer /作为公共模版分离出去-->
<!--请在下方写此页面业务相关的脚本-->
<script type="text/javascript" src="lib/datatables/1.10.15/jquery.dataTables.min.js"></script>
<script type="text/javascript" src="lib/laypage/1.2/laypage.js"></script>
<script type="text/javascript" src="static/business/js/main.js"></script>
<script>
const food_introduction=new Map([
["思味缘饺子馆", "热爱早餐，热爱生活，几十年老店的思味缘饺子馆，是慕名前来美食街过早的人的不二选择。头天下午9名店员分工协作纯手工擀面皮、手工包饺子，次日老板亲自火候把握得当，方能煎至出两面金黄酥脆的炕饺，再配上独家榨菜爽脆可口，一碗浓浓的黑米粥，又是元气满满的一天。"],
["杏花早点", "舌间上的美味，你与我的滋味。"],
["鸿兴早吃", "养生粥+公婆饼，开启健康每一天;手工无添加，美味先万家。"],
["咸宁酒坊", "采用传统土曲发酵，无任何添加剂，自然清香，口感尚佳，后劲舒畅，绿色自然是吾辈一贯坚持的理念！"],
["辰颐水果生鲜", "今天维C您吃了吗？新鲜水果，每日必不可少哟！"],
["矿建牛肉黑粉", "31年的老店，两代人的传承，孝感安陆夫妻俩凭借自家独特的美味，成为无数铁山人的回忆 。矿建牛肉黑粉和其他大部分的早餐店不同，这家店只有黑粉、黑面两种选择，食客们却络绎不绝。烫粉、煮面、淋酱、最后再撒上葱花，一碗黑粉/面就这样上桌了，粉面本身是基础，酱料是关键，牛肉更是灵魂。矿建黑粉不加调料、没有汤汁，纯靠一勺牛肉酱搭配一勺榨菜萝卜酱，捆住铁山人民的胃。酱料里的牛肉都是舒师傅自己卤制，片片入味又不失嚼劲，绝对是黑粉的灵魂搭档。矿建黑粉的魅力从入口那一刻起就让人惊艳！相比于其他粉面的口感不同，黑粉的酱料更加浓郁，满满的咸香，伴着米粉和牛肉，嗦到根本停不下来。"],
["老面馒头", "纯手工现做现卖，好吃看的见;吃美食，听一个老兵的故事。"],
["亮亮副食", "价优质好，欢迎常来。"],
["矿建粮油店", "真情为民，服务至上。"],
["煎饼传说", "酱香饼以香、甜、辣、脆为主要特点，香中有香，甜中带绵，辣而不燥，外脆里软，配上特制秘酱，一饼在手、唇指留香 ！原味青菜馅饼皮薄馅大，物美价廉，馅饼有限(馅)，回味无穷！铁山的美味煎饼尽在冶矿巷(煎饼传说）！"],
["纯味饮品", "健康美味的早餐从纯味饮品开始。"],
["第一家粉面馆", "是从1988年开始到现在已经有31年历史的老店，多年来坚持“品质为上、待客以诚”的经营理念。主打产品有牛肉黑粉，肥肠粉面，热干面等......一直精选用品质上好的米粉、牛肉、佐料，30多年的秘制配方吸引了大批顾客，铁山很多顾客都是在我们家从小吃到大的，不少顾客评价物美价廉，我们不开分店，精益求精。店址一直位于冶矿巷美食街，每到节假日排队的络绎不绝，现在应很多顾客要求，已经上线饿了么外卖，为大家提供更好的服务。"],
["天天见面", "肥肠粉、牛肉面、杂酱面，洒上点香葱，再配上独家腌制的泡菜，还可再来一份酥脆焦黄的面窝，这就是每天排上长队也要来一口的天天见面，这也就是一日不见甚是想念的传说。"],
["万里香麻辣烫", "因为抖音去打卡，那个烫土豆片儿，我吃了N串，味道美极了。铁山麻辣烫简称爱情麻辣烫人间美味，价格低廉，种类繁多，各种蔬菜，肉类混合在一起，加上又辣又麻的底料，简直不能更好吃，几乎每个星期都会去吃一次。鲜香美味，汤汁浓郁可口，入口回甘，简直太好喝了，菜品种类丰富，干净卫生，份量充足，价格公道，好听的这么多，选几个就是了。"]
]);
$(function () {
const table = $('.table-sort').DataTable({
"pageLength": 13, // 每页显示条数（如果不在下拉选项中，则虽然分页显示的是最小的，但是一页的条数是这个）
"lengthMenu": [13, 25, 50, 75, 100], // 下拉选择的每页显示条数
"order": [],
"pagingType": "full_numbers",
"aoColumnDefs": [
{ "orderable": false, "aTargets": [] }// 不参与排序的列
],
ajax: {
url: 'xxxxxxxxxxxxxxxxxxxxxxxxxx',
type: "get",
dataSrc: function(res) {
console.log(res);
return res;
}
},
columns: [
{
"data": "name",
"render": function (data, type, row) {
if (food_introduction.has(data)) {
return `<font color="blue">${data}</font>`;
}else{
return data;
}
},
"sClass": "text-c",
},
{
"data": "type",
"sClass": "text-c"
},
{
"data": "area",
"sClass": "text-c"
},
{
"data": "number",
"sClass": "text-c"
},
{
"data": "leader_name",
"sClass": "text-c"
},
{
"data": "phone",
"sClass": "text-c"
},
{
"data": "address",
"sClass": "text-c"
},
{
"data": "status",
"sClass": "text-c"
},
{
"data": "remarks",
"sClass": "text-c"
}
],
});
$('.table-sort tbody').on('click', 'tr', function () {
const idx = table.row(this).data().id;
const namex = table.row(this).data().name;
window.location.href = '../food_store_detail/food_store_detail.html?id='+idx+"&name="+namex;
});
});
</script>
<!--/请在上方写此页面业务相关的脚本-->
</body>
</html>
运行结果：
7、多表格渲染
当许多表格共用一个 table 时，当你切换表格，一般会报错：
这里官网有解释：
datatable
大致的意思就是：DataTables 不允许在初始化时间以外的任何时间更改初始化选项，初始化后对表的任何操作都必须通过API完成。（菜鸟这里主要是因为重复渲染，当所选节点的 DataTable 实例已经初始化时，通过将选项传递给 DataTables 构造函数对象会触发此错误）
那么如何解决这个问题呢？
这里最简单的解决方案就是在初始化时加上一个 destroy 属性（官网上说：一般不推荐），代码如下：
let table2 = $('.table-sort2').DataTable({
"destroy": true,
"pagingType": "full_numbers",
"aaSorting": [[0, "desc"]],//默认第几个排序
ajax: {
url: 'XXXXXXXXXXXXXXXXXXXXXXX',
type: "post",
dataType:"JSON",
data:{imei:a},
dataSrc: function (res) {
return res;
}
},
columns: [
{
"data": "time_begin",
"sClass": "text-c",
"width":"30%"
},
{
"data": "heartrate",
"sClass": "text-c",
"width":"10%"
},
{
"data": "address",
"sClass": "text-c",
"width": "60%"
},
],
});
8、更新表格
如果你不是想共用同一个 table ，仅仅只是想更新一下，那么建议使用
table.ajax.reload(null, false); //table是 datatables 实例
9、 API
更多API见 (反正菜鸟感觉中文档API隐藏得找不着，找到了就分享出来 ) ： API