Angular Datatable nie działa z danymi

Question

Używam Angular-datatable do pokazywania danych i ich pracy z danymi statycznymi, ale jeśli podanie dynamicznie danych nie działa. To zabiera mi ciężki czas.

Co chcę osiągnąć to załadować dane z ajax w datatable.

Ten Następujący kod używam dla inicjowania i jego pracy grzywny Plunker:

function MyChapterController($scope, $q, DTOptionsBuilder, DTColumnBuilder, chapter) { 
    var vm = this;  

    vm.dtOptions = DTOptionsBuilder.newOptions() 
     .withPaginationType('full_numbers') 
     .withDisplayLength(2) 
     .withDOM('pitrfl'); 
    vm.dtColumns = [ 
     DTColumnBuilder.newColumn('id').withTitle('ID'), 
     DTColumnBuilder.newColumn('title').withTitle('First name'), 
     DTColumnBuilder.newColumn('lastName').withTitle('Last name').notVisible() 
    ]; 

    vm.myChapters = []; 
} 

To Poniższy kod nie działa sprawdzanie Plunker:

function MyChapterController($scope, $q, $resource, DTOptionsBuilder, DTColumnBuilder, chapter) { 
    var vm = this;  

    vm.dtOptions = DTOptionsBuilder.newOptions() 
     .withPaginationType('full_numbers') 
     .withDisplayLength(2) 
     .withDOM('pitrfl'); 
    vm.dtColumns = [ 
     DTColumnBuilder.newColumn('id').withTitle('ID'), 
     DTColumnBuilder.newColumn('title').withTitle('First name'), 
     DTColumnBuilder.newColumn('lastName').withTitle('Last name').notVisible() 
    ]; 

    vm.myChapters = [{ 
      "id": 860, 
      "firstName": "Superman", 
      "lastName": "Yoda" 
     }, { 
      "id": 870, 
      "firstName": "Foo", 
      "lastName": "Whateveryournameis" 
     }, { 
      "id": 590, 
      "firstName": "Toto", 
      "lastName": "Titi" 
     }, { 
      "id": 803, 
      "firstName": "Luke", 
      "lastName": "Kyle" 
     }]; 

} 

Próbowałem również z dataresourcePlunker ale tu też ciężko.

To już zużyło moją dużo czasu. W końcu postanowiłem zasięgnąć rady od was wszystkich. Każda pomoc będzie doceniona.

Answer 1

tęskniłeś dwa punkty:

1. Sterownik nie został zwane, ponieważ nie został dodany do znaczników. Jeśli użyjesz ui-router później, będzie to w porządku, ponieważ możesz dodać kontroler w konfiguracji.
2. Twoja tabela nie została wypełniona, ponieważ nie udało Ci się dodać powiązania, np. {{chapter.id}} i myChapters nie są dostępne w $scope, ponieważ używasz składni controllerAs.

Zapraszamy do obejrzenia prezentacji poniżej lub zaktualizowanej plunkr.

W wersji demonstracyjnej poniżej zmieniłem tylko $http.get(...) na $http.jsonp(...), aby uzyskać dane json z mocky.io.

Aktualizacja

Aby filtr utwór paginacja trzeba zmienić znaczników tabeli do tego.

<table datatable="ng" dt-options="chapterCtrl.dtOptions" dt-column-defs="chapterCtrl.dtColumnDefs" id="cb-mychapter-table" class="row-border hover table table-bordered cb-data-table" cellspacing="0" width="100%">

// Code goes here 
 
'use strict'; 
 

 
angular.module('myApp', ['datatables','ngResource']); 
 

 
(function (angular) { 
 
    'use strict'; 
 

 
    angular 
 
      .module('myApp') 
 
      .controller('myChapterController', MyChapterController) 
 
      .factory('chapter', ChapterFactory); 
 

 
    MyChapterController.$inject = ['$scope', '$q', '$resource', 'DTOptionsBuilder', 'DTColumnBuilder', 'chapter']; 
 

 
    function MyChapterController($scope, $q, $resource, DTOptionsBuilder, DTColumnBuilder, chapter) { 
 
     var vm = this;  
 
     
 
     vm.dtOptions = DTOptionsBuilder.newOptions() 
 
      .withPaginationType('full_numbers') 
 
      .withDisplayLength(2) 
 
      .withDOM('pitrfl'); 
 
     vm.dtColumns = [ 
 
      DTColumnBuilder.newColumn('id').withTitle('ID'), 
 
      DTColumnBuilder.newColumn('title').withTitle('First name'), 
 
      DTColumnBuilder.newColumn('lastName').withTitle('Last name').notVisible() 
 
     ]; 
 
     
 
     /*vm.myChapters = [{ 
 
       "id": 860, 
 
       "firstName": "Superman", 
 
       "lastName": "Yoda" 
 
      }, { 
 
       "id": 870, 
 
       "firstName": "Foo", 
 
       "lastName": "Whateveryournameis" 
 
      }, { 
 
       "id": 590, 
 
       "firstName": "Toto", 
 
       "lastName": "Titi" 
 
      }, { 
 
       "id": 803, 
 
       "firstName": "Luke", 
 
       "lastName": "Kyle" 
 
      }];*/ 
 
     
 
     chapter.getChapters().then(function(chapters) { 
 
      vm.myChapters = chapters; 
 
     }); 
 
    } 
 
    
 
    ChapterFactory.$inject = ["$http"]; 
 
    
 
    function ChapterFactory($http) { 
 
    return { 
 
    getChapters: function() { 
 
     return $http.jsonp('http://www.mocky.io/v2/55f2b4cb0938f5cd069cff10?callback=JSON_CALLBACK').then(function(response) { 
 
     console.log(response); 
 
     return response.data; 
 
     }); 
 
    } 
 
    }; 
 
    } 
 
    
 
}(angular));

<!DOCTYPE html> 
 
<html ng-app='myApp'> 
 

 
    <head> 
 
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css"> 
 
    <!--<link rel="stylesheet" href="style.css">--> 
 
    
 
    <script src="https://code.jquery.com/jquery-1.11.3.js"></script> 
 
    <script type="text/javascript" charset="utf8" src="//cdn.datatables.net/1.10.9/js/jquery.dataTables.js"></script> 
 
    <script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.5/angular.min.js"></script> 
 
    <script src="https://cdn.rawgit.com/l-lin/angular-datatables/dev/dist/angular-datatables.min.js"></script> 
 
    <script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.5/angular-resource.min.js"></script> 
 
    <!--<script src="script.js"></script>--> 
 
    </head> 
 

 
    <body ng-controller="myChapterController as chapterCtrl" > 
 
    <table datatable="ng" dt-options="chapterCtrl.dtOptions" dt-column-defs="chapterCtrl.dtColumnDefs" id="cb-mychapter-table" class="row-border hover table table-bordered cb-data-table" cellspacing="0" width="100%"> 
 
     <thead> 
 
      <tr> 
 
       <th>ID</th> 
 
       <th>FirstName</th> 
 
       <th>LastName</th> 
 
      </tr> 
 
     </thead> 
 
     <tbody> 
 
      <tr ng-repeat="chapter in chapterCtrl.myChapters"> 
 
       <td>{{chapter.id}}</td> 
 
       <td>{{chapter.firstName}}</td> 
 
       <td>{{chapter.lastName}}</td> 
 
      </tr> 
 
     </tbody> 
 
    </table> 
 
    </body> 
 

 
</html>