查看: 3767|回复: 0

[DIV/CSS] dataTable如何清空数据

发表于 2018-2-13 08:00:02
  1. <main ng-app="showcase.withAjax">
  2. <header>
  3. <h1>When do clear, draw will be call after.</h1></header>
  4. <div ng-controller="WithAjaxCtrl as showCase" class="row">
  5. <div class="col-sm-8">
  6. <button ng-click="showCase.search()">search</button>
  7. <button ng-click="showCase.clear()">clear</button>
  8. <table datatable dt-options="showCase.dtOptions" dt-columns="showCase.dtColumns" dt-instance="showCase.ins"></table>
  9. </div>
  10. <div class="col-sm-4">
  11. <ul>
  12. <li ng-repeat="i in showCase.l">{{i.m}}</li>
  13. </ul>
  14. </div>
  15. </div>
  16. </main>
复制代码
  1. angular.module('showcase.withAjax', ['datatables']).controller('WithAjaxCtrl', WithAjaxCtrl);
  2. function WithAjaxCtrl(DTOptionsBuilder, DTColumnBuilder) {
  3. var vm = this;
  4. vm.ins = {
  5. $id: null
  6. };
  7. vm.l = [];
  8. vm.dtOptions = DTOptionsBuilder.fromSource(function(params, callback) {
  9. // 所以,这里被触发的时候,看下这个标志位,如果这个标志位为 true,那么就让数据返回为空
  10. // 可以看到点击 clear 按钮的时候,右边的列表里不会再打印 do callback!,数据也感觉被清空了
  11. if (vm._clearing) {
  12. callback([]);
  13. vm._clearing = false;
  14. return;
  15. }
  16. vm.l.push({
  17. m: 'do callback!'
  18. });
  19. callback([{
  20. "id": 860,
  21. "firstName": "Superman",
  22. "lastName": "Yoda"
  23. }, {
  24. "id": 870,
  25. "firstName": "Foo",
  26. "lastName": "Whateveryournameis"
  27. }, {
  28. "id": 590,
  29. "firstName": "Toto",
  30. "lastName": "Titi"
  31. }, {
  32. "id": 803,
  33. "firstName": "Luke",
  34. "lastName": "Kyle"
  35. }]);
  36. })
  37. .withPaginationType('full_numbers')
  38. // 因为设定了 serverSide 模式,所以只要调用了 draw,则一定触发数据的请求
  39. .withOption('serverSide', true);
  40. vm.dtColumns = [
  41. DTColumnBuilder.newColumn('id').withTitle('ID'),
  42. DTColumnBuilder.newColumn('firstName').withTitle('First name'),
  43. DTColumnBuilder.newColumn('lastName').withTitle('Last name')
  44. ];
  45. vm.clear = function() {
  46. // 当清除数据的时候,给一个特殊的标志位。
  47. vm._clearing = true;
  48. // 这样就达到了想要的效果。所以这里实际也不需要调用 clear
  49. vm.ins.DataTable.draw();
  50. };
  51. vm.search = function() {
  52. vm.ins.DataTable.draw();
  53. }
  54. }
复制代码


回复

使用道具 举报