具有动态列的Angular Datatable

时间:2016-10-17 12:39:59

标签: angularjs datatable

我找到了this非常酷的Angular Datatable库,它将分页,搜索和内容添加到表中。我使用预定义的表头很好,但我需要对一个未预定义标题的表进行分页。

我尝试在他们的官方文档中关注this示例,并对我自己进行了一些更改,但它给了我这个错误:

template< size_t N, typename T >
void foo(T(*func)(T))
{
  return foo<N>(std::function<T(T)>(func));
}

这是我尝试的方式:

在我的html文件中

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

在我的控制器中

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

我正在从服务器接收可以包含任何类型标头的数据,因此我无法定义列。

任何想法?

1 个答案:

答案 0 :(得分:1)

我认为你可以使用ng-repeat来标题和行数据来填充表格。

我将解释来自服务器的数据。根据您的要求更改标题

通过这种方式定义控制器

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

以这种方式定义数据表

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