具有动态列的角度数据表

Question

我发现 this 非常酷的 Angular 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>