Угловой Datatable с динамическими колонками

Question

Я нашел this очень крутая Угловая Datatable библиотека, которая добавляет разбиение на страницы, поиск и прочее на стол. Я хорошо работаю с предопределенными заголовками таблиц, но мне нужно разбивать таблицы на заголовки, которые не являются предопределенными.

Я попытался следующие this например, на их официальной документации, с некоторыми изменениями моих собственных, но он дал мне эту ошибку:

DataTables warning: table id=DataTables_Table_0 - Ajax error. For more information about this error, please see http://datatables.net/tn/7 

Это, как я попробовал:

в моем HTML файл

<table datatable="" dt-options="dtOptions" dt-columns="dtColumns" class="row-border hover"></table> 

в мой контроллер

angular.module("app").controller("uploadDataController", ['$scope', 
    'DTOptionsBuilder', 'DTColumnBuilder', 
    function($scope, DTOptionsBuilder, DTColumnBuilder) { 

      SetupScreen(); 

      function SetupScreen() { 
       $scope.dtOptions = DTOptionsBuilder.fromSource('data.json') 
     .withPaginationType('full_numbers'); 
     $scope.dtColumns = [ 
          DTColumnBuilder.newColumn('id').withTitle('ID'), 
          DTColumnBuilder.newColumn('firstName').withTitle('First name'), 
          DTColumnBuilder.newColumn('lastName').withTitle('Last name').notVisible() 
         ]; 
      } 
    } 

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

любые идеи?

Answer 1

Я думаю, вы можете использовать ng-repeat как для данных заголовков, так и для данных, чтобы заполнить таблицу.

Объясню данные, поступающие с сервера. Измените заголовок также в зависимости от ваших требований

Определив контроллер таким образом

angular.module('showcase.angularWay.dataChange', ['datatables', 'ngResource']) 
.controller('AngularWayChangeDataCtrl', AngularWayChangeDataCtrl); 

Определяя Datatable таким образом

$scope.dtOptions = DTOptionsBuilder.newOptions().withPaginationType('full_numbers').withOption('info', false).withOption('bFilter', false).withOption('paging', false); 

Определяя столбцы следующим образом. Это может быть столько, сколько столбцов нужно

$scope.dtColumnDefs = [ 
     DTColumnDefBuilder.newColumnDef(0), 
     DTColumnDefBuilder.newColumnDef(1) 
     ]; 

И в HTML коде следующим образом изменить данные, основанные на вашем требовании

<table datatable="ng" dt-options="dtOptions" dt-column-defs="dtColumnDefs" class="row-border hover"> 
        <thead> 
         <tr> 
          <th>Form ID</th> 
          <th>Form Description</th> 
          <th>Edit</th> 
         </tr> 
        </thead> 
         <tr ng-repeat="form_elements in View_Forms" > 
          <td>{{ form_elements.form_id }} </td> 
          <td>{{ form_elements.description }} </td> 
          <td ng-click="modify(form_elements.form_id)"><a>Edit</a></td> 
         </tr> 
        </table>