Angular Datatable не работает с данными

Я использую Angular-datatable для отображения данных и их отлично работает со статическими данными, но когда данные динамически передаются, это не работает. Это отнимает у меня много времени.

Чего я хочу добиться, так это загрузить данные из ajax в datatable.

Этот следующий код я использую для инициализации, и он отлично работает 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 = [];
}

Следующий код не работает, проверьте 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"
      }];

}

Я также пробовал с dataresource Plunker, но здесь тоже не повезло .

Это уже отняло у меня много времени. Итак, наконец, я решил посоветоваться со всеми вами. Любая помощь будет оценена по достоинству.


datatable jquery angularjs angular-datatables
person Manwal    schedule 11.09.2015    source источник

Ответы (1)


arrow_upward
4
arrow_downward

Вы упустили два момента:

  1. Контроллер не вызывался, потому что он не был добавлен в разметку. Если вы будете использовать ui-router позже, это нормально, потому что тогда вы сможете добавить контроллер в конфигурацию.
  2. Ваша таблица не была заполнена, потому что вы пропустили добавление привязки, например. {{chapter.id}} и myChapters недоступны в $scope, потому что вы используете синтаксис controllerAs.

Пожалуйста, взгляните на демо ниже или в этот обновленный plunkr.

В приведенной ниже демонстрации я изменил только $http.get(...) на $http.jsonp(...), чтобы получить данные json с mocky.io.

Обновить

Чтобы заставить фильтр работать с разбиением на страницы, вы должны изменить разметку таблицы на это.

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

person AWolf    schedule 11.09.2015
comment
Я понял, что данные вашей точки заполняются, теперь проблема в том, что посмотрите на конец Showing 0 to 0 of 0 entries и попробуйте щелкнуть столбец, все данные исчезнут. Почему мы получаем эту проблему. - person Manwal; 11.09.2015
comment
Да, я вижу проблему. Но не уверен, как исправить. Дай посмотреть. - person AWolf; 11.09.2015
comment
Хорошо, я нашел это. Смотрите мой обновленный ответ. Я не обновлял его в Plunkr, потому что в данный момент у меня проблема с сохранением в plunkr. - person AWolf; 11.09.2015
comment
Добавлен datatable="ng", а controllerAs отсутствует. Это немного сбивает с толку в примерах на сайте angular.datatable. showCase — это их controllerAs имя. - person AWolf; 11.09.2015
comment
Давайте продолжим это обсуждение в чате. - person AWolf; 11.09.2015