AngularJS dataTable，$http get 不起作用答案

【问题标题】：AngularJS dataTable, $http get doesn't workAngularJS dataTable，$http get 不起作用
【发布时间】：2017-08-25 09:34:31
【问题描述】：

当我来自$http.get 的ng-repeat 对象时，angularJS 中的数据表不起作用@ 这是前任。（第一个表可以，第二个表不行）https://codepen.io/bafu2203/pen/VzBVmy

JS：

var app=angular.module('formvalid', ['ui.bootstrap','ui.utils']);
app.controller('validationCtrl',function($scope, $http, $timeout){
  $scope.getapi = function(){
        $http({
            method: 'GET',
            url: 'https://www.w3schools.com/angular/customers_mysql.php',
        })
            .then(function successCallback(data) {
                $scope.test = data.data.records;
                console.log($scope.test);
                $timeout($scope.getapi, 1000);
            }, function errorCallback(response) {
                console.log(response);
                console.log('error');
            });

    };
    $scope.getapi();


  $scope.data={ "records":[ {"Name":"Alfreds Futterkiste","City":"Berlin","Country":"Germany"}, {"Name":"Ana Trujillo Emparedados y helados","City":"México D.F.","Country":"Mexico"}, {"Name":"Antonio Moreno Taquería","City":"México D.F.","Country":"Mexico"}, {"Name":"Around the Horn","City":"London","Country":"UK"}, {"Name":"B's Beverages","City":"London","Country":"UK"}, {"Name":"Berglunds snabbköp","City":"Luleå","Country":"Sweden"}, {"Name":"Blauer See Delikatessen","City":"Mannheim","Country":"Germany"}, {"Name":"Blondel père et fils","City":"Strasbourg","Country":"France"}, {"Name":"Bólido Comidas preparadas","City":"Madrid","Country":"Spain"}, {"Name":"Bon app'","City":"Marseille","Country":"France"}, {"Name":"Bottom-Dollar Marketse","City":"Tsawassen","Country":"Canada"}, {"Name":"Cactus Comidas para llevar","City":"Buenos Aires","Country":"Argentina"}, {"Name":"Centro comercial Moctezuma","City":"México D.F.","Country":"Mexico"}, {"Name":"Chop-suey Chinese","City":"Bern","Country":"Switzerland"}, {"Name":"Comércio Mineiro","City":"São Paulo","Country":"Brazil"} ] }



$scope.dataTableOpt = {
   //custom datatable options 
  // or load data through ajax call also
  "aLengthMenu": [[10, 50, 100,-1], [10, 50, 100,'All']],
  "aoSearchCols": [
      null
    ],
  };
});

【问题讨论】：

什么“不起作用”？两张桌子对我来说都很好。它们都充满了数据。为什么这个问题甚至得到了投票？？
过滤不起作用

标签： javascript angularjs datatables

【解决方案1】：

使 Api 调用一次次。然后将其添加到对象或数组中。然后过滤该对象/数组。现在看来，您每次按下任何过滤功能时都在进行 Api 调用。使其可以在 api 函数之外访问。

//Outside function
$scope.testData = {};

//Inside
$scope.testdata = data.data.records;

【讨论】：

【解决方案2】：

这就是您应该使用angular dataTables 的原因。 AngularJS 和 jQuery dataTables 最终陷入了一场他们都试图操纵 DOM 的竞赛中，而一个人不知道另一个人在做什么，甚至不知道另一个人在做什么。 angular-ui-jq 不能解决这个问题，它基本上只是在某个任意点做一个$('table').DataTable()。

您可以实现一个简单的 dataTable 和 angular，但是一旦使用多个表或更花哨的 dataTables 东西，整个设置就会中断。 Angular dataTables 是包装在指令中的 jQuery dataTables，因此它们实际上可以在 Angular 环境中工作。

您的代码可以很容易地重构为

$scope.dtOptions = DTOptionsBuilder.fromFnPromise(function() {
   var defer = $q.defer();
   $http.get('https://www.w3schools.com/angular/customers_mysql.php').then(function(result) {
     defer.resolve(result.data.records);
   });
   return defer.promise;
 })    
 .withOption('lengthMenu', [[10, 50, 100,-1], [10, 50, 100,'All']]);

$scope.dtColumns = [       
  DTColumnBuilder.newColumn(null).withTitle('#').renderWith(function(data, type, full, meta) {
     return meta.row + 1
  }),  
  DTColumnBuilder.newColumn('Name').withTitle('name'),
  DTColumnBuilder.newColumn('City').withTitle('position')
]

标记

<table datatable
   dt-options="dtOptions" 
   dt-columns="dtColumns">
</table>

演示 -> http://plnkr.co/edit/sca9WflpKNn2EIYct0EL?p=preview

如果您使用datatable="ng"，您可以使用ng-repeat 进行渲染，但不推荐这样做，因为与dataTables 优化渲染相比，它要慢得多。

如果您对 dtColumns 结构感到困惑，您可以改用良好的旧数据表 columns：

$scope.dtColumns = [       
  { data: null, title: '#', 
    render: function(data, type, full, meta) {
     return meta.row + 1
    })
  },
  { data: 'Name', title: 'Name' },
  { data: 'City', title: 'City' }
]

【讨论】：