<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();
  }
}