如何获取jquery.Datatable的数据以尊重角度双向绑定

时间:2014-02-14 20:44:58

标签: angularjs datatable jquery-datatables

我有一个可以通过本地条件修改的json对象(不是async ajax调用)。我希望这个json对象在datatables网格上输出。

我有显示数据的表格,但是如果数据发生变化,则网格不会。我每次都必须调用构造函数数据表吗?我宁愿只使用双向绑定,但我不确定。我已经使用$ watch更新了它,但如果可以的话,我想避免在这个大对象上使用$ watch。它可能有1000行。

这是显示数据表负载的fiddle,以及在3000毫秒(简单$ timeout)后更改时运行的数据。有没有办法让表检测json对象的变化并刷新自己?或者我需要在Angular代码中做一些不同的事情吗?

我正在使用指令加载表:

.directive('myTable', function() {
  return {
    restrict: 'E',
    scope: {
        data: '=',
        options: '=',
        columns: '='
    },
    template:
        '<table id="balancesTable"></table>',
    replace: true,
    link: function(scope, elem, attrs) {        
        scope.options["aaData"] = scope.data;
        scope.options["aoColumnDefs"] = scope.columns;
        elem.dataTable(scope.options);
    }
  };
})

我的控制器(为简洁而编辑...请参阅完整代码的小提琴):

var myApp = angular.module('myApp', [])
.controller('MyAppCtrl', function ($scope, $timeout) {
    $("#data-preview").css("color","green");
    $scope.dataObj = [ { "balanceType": "Available Funds", ... } ];

    $timeout(function(){
      $scope.dataObj = [ { "balanceType": "Available Funds", ... different data ...} ];
      $("#data-preview").css("color","red");
    },
    3000);

    // columns settings for data table
    $scope.columnDefs = [
      {
       "mData": "balanceType",
       "sTitle": "Balance Type",
       "aTargets":[0],
       "sWidth": "200px"
      },
      {
         ...
      }
    ];

    // data table settings for table to not show search, pagination and allow column resize
    $scope.overrideOptions = {
      "bSort": true,
      "bPaginate": false,
      "sDom": "Rlfrtip",
      "bFilter": false,
      "bAutoWidth": false,
      "bInfo": false
    };
  })

HTML:

<pre id="data-preview">{{dataObj}} | json}}</pre>
<my-table options="overrideOptions" data="dataObj" columns="columnDefs"><my-table>

先谢谢!!

0 个答案:

没有答案