为了账号安全,请及时绑定邮箱和手机立即绑定

dataTable如何清空数据

<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 点赞

若觉得本文不错,就分享一下吧!

评论

作者其他优质文章

正在加载中
Web前端工程师
手记
粉丝
61
获赞与收藏
656

关注作者,订阅最新文章

阅读免费教程

  • 推荐
  • 1
  • 收藏
  • 共同学习,写下你的评论
感谢您的支持,我会继续努力的~
扫码打赏,你说多少就多少
赞赏金额会直接到老师账户
支付方式
打开微信扫一扫,即可进行扫码打赏哦
今天注册有机会得

100积分直接送

付费专栏免费学

大额优惠券免费领

立即参与 放弃机会
意见反馈 帮助中心 APP下载
官方微信

举报

0/150
提交
取消