<main ng-app="showcase.withAjax">
<header>
<h1>When do clear, draw will be call after.</h1></header>
<div ng-controller="WithAjaxCtrl as showCase" class="row">
<div class="col-sm-8">
<button ng-click="showCase.search()">search</button>
<button ng-click="showCase.clear()">clear</button>
<table datatable dt-options="showCase.dtOptions" dt-columns="showCase.dtColumns" dt-instance="showCase.ins"></table>
</div>
<div class="col-sm-4">
<ul>
<li ng-repeat="i in showCase.l">{{i.m}}</li>
</ul>
</div>
</div>
</main>
angular.module('showcase.withAjax', ['datatables']).controller('WithAjaxCtrl', WithAjaxCtrl);
function WithAjaxCtrl(DTOptionsBuilder, DTColumnBuilder) {
var vm = this;
vm.ins = {
$id: null
};
vm.l = [];
vm.dtOptions = DTOptionsBuilder.fromSource(function(params, callback) {
// 所以,这里被触发的时候,看下这个标志位,如果这个标志位为 true,那么就让数据返回为空
// 可以看到点击 clear 按钮的时候,右边的列表里不会再打印 do callback!,数据也感觉被清空了
if (vm._clearing) {
callback([]);
vm._clearing = false;
return;
}
vm.l.push({
m: 'do callback!'
});
callback([{
"id": 860,
"firstName": "Superman",
"lastName": "Yoda"
}, {
"id": 870,
"firstName": "Foo",
"lastName": "Whateveryournameis"
}, {
"id": 590,
"firstName": "Toto",
"lastName": "Titi"
}, {
"id": 803,
"firstName": "Luke",
"lastName": "Kyle"
}]);
})
.withPaginationType('full_numbers')
// 因为设定了 serverSide 模式,所以只要调用了 draw,则一定触发数据的请求
.withOption('serverSide', true);
vm.dtColumns = [
DTColumnBuilder.newColumn('id').withTitle('ID'),
DTColumnBuilder.newColumn('firstName').withTitle('First name'),
DTColumnBuilder.newColumn('lastName').withTitle('Last name')
];
vm.clear = function() {
// 当清除数据的时候,给一个特殊的标志位。
vm._clearing = true;
// 这样就达到了想要的效果。所以这里实际也不需要调用 clear
vm.ins.DataTable.draw();
};
vm.search = function() {
vm.ins.DataTable.draw();
}
}
点击查看更多内容
为 TA 点赞
评论
共同学习,写下你的评论
评论加载中...
作者其他优质文章
正在加载中
感谢您的支持,我会继续努力的~
扫码打赏,你说多少就多少
赞赏金额会直接到老师账户
支付方式
打开微信扫一扫,即可进行扫码打赏哦