angular-datatables с ColVis, сортировка или скрытие столбцов удаляет все данные

Я использую AngularJS с таблицами данных Angular (http://l-lin.github.io/angular-datatables/), и я использую плагин Datatables ColVis. Таблица отображается нормально, но сортировка заголовков столбцов ИЛИ использование столбцов отображения/скрытия ColVis удаляет все данные:

У меня есть таблица в контроллере Angular

<div ng-controller="withColVisCtrl">
<table datatable dt-options="dtOptions">
  <thead>
    <tr>
      <th>Col 1</th>
      <th>Col 2</th>          
    </tr>
  </thead>
  <tbody>
     <tr ng-repeat="value in value_list">
       <td>col 1 data</td>
       <td> col 2 data</td>
    </tr>
 </tbody>
</table>

withColVisCtrl использует контроллер:

  angular.module('myApp').controller('withColVisCtrl', function ($scope, DTOptionsBuilder) {
        $scope.dtOptions = DTOptionsBuilder.newOptions()
          .withBootstrap()
          .withColVis()
          .withDOM('C<"clear">lfrtip')                                                
          .withColVisOption('aiExclude', [1]);                                       
      });

Когда я нажимаю на заголовок столбца ИЛИ использую отображение/скрытие ColVis, таблица, кажется, перерисовывается, но без данных.

Мои данные поступают через API, поэтому они отличаются от примеров Angular-Datatables ColVis (http://l-lin.github.io/angular-datatables/#/withColVis).

Что мне здесь не хватает?


angularjs angular-datatables
person rlsaj    schedule 05.12.2014    source источник

Ответы (2)


arrow_upward
3
arrow_downward

Причина, по которой ничего не появляется, заключается в том, что вам нужен источник данных. Представленный пример имеет следующий код:

angular.module('datatablesSampleApp', ['datatables']).controller('withColVisCtrl', function ($scope, DTOptionsBuilder, DTColumnBuilder) {
    $scope.dtOptions = DTOptionsBuilder.fromSource('data.json')
        .withPaginationType('full_numbers')
        // Active ColVis plugin
        .withColVis()
        // Add a state change function
        .withColVisStateChange(function(iColumn, bVisible) {
            console.log('The column' + iColumn + ' has changed its status to ' + bVisible)
            })
        // Exclude the last column from the list
        .withColVisOption('aiExclude', [2]);
    $scope.dtColumns = [
        DTColumnBuilder.newColumn('id').withTitle('ID'),
        DTColumnBuilder.newColumn('firstName').withTitle('First name'),
        DTColumnBuilder.newColumn('lastName').withTitle('Last name')
    ];
});

Обратите внимание на вторую строку: $scope.dtOptions = DTOptionsBuilder.fromSource('data.json')

Используемый метод извлекает данные из файла json.

При просмотре сети их источник данных выглядит так: http://l-lin.github.io/angular-datatables/data.json?_=1417925914539.

Просто заново создайте этот файл данных, загрузите его в данные с помощью DTOptionsBuilder.fromSource(PATH_TO_FILE), и все готово.

Дайте мне знать, если у вас есть какие-либо проблемы.

person Dom    schedule 07.12.2014

arrow_upward
0
arrow_downward

@Дом,

Пожалуйста, посмотрите на скриншот, здесь метод работает нормально, но при вызове этого метода из второго успешного ответа API с новыми данными пользовательский интерфейс не получит изменений, или если я использовал $apply для вызова вручную, таблица данных начала вести себя странно.

Пожалуйста, поправьте меня, если я делаю что-то не так

введите здесь описание изображения

person Deepak Patidar    schedule 25.05.2016