带有角度数据表的动态列答案

【问题标题】：Dynamic columns with angular datatables带有角度数据表的动态列
【发布时间】：2017-04-28 00:49:02
【问题描述】：

所以我尝试根据 api 请求的响应在数据表中生成列。

    $scope.getProductCustomFields = function() {
                    $scope.custom_fields_loading = true;
                    $scope.dtCustomFieldsInstance = {};
                    $scope.dtCustomFieldsOptions = DTOptionsBuilder.newOptions().withOption('order', []);
                    $scope.dtCustomFieldsOptions.withOption('ajax', {
                        headers: {'Authorization': 'Basic ' + $rootScope.globals.currentUser.api_token},
                        dataSrc: 'data',
                        url: API.returnUrl('/ecommerce/reports/get-product-custom-fields?' + $httpParamSerializer({product: $scope.product})),
                        type: 'GET'
                    })
                        .withOption('processing', true)
                        .withOption('serverSide', true)
                        .withPaginationType('full_numbers')
                        .withOption('createdRow', createdRow);



function createdRow(row, data, dataIndex) {
                    // Recompiling so we can bind Angular directive to the DT
                    $compile(angular.element(row).contents())($scope);
                }
                $scope.dtCustomFieldsColumns = [];
    //Here I make another request to php within this function since I cannot actually use dataSrc: 'data' as array            
     ProductsReportsService.getProductCustomFields($scope.product).then(function (response) {
                        $scope.data = response.data.data;
                        angular.forEach($scope.data, function (value, key) {
                            $scope.dtCustomFieldsColumns.push(DTColumnBuilder.newColumn('value.value').withTitle(key).notSortable());
                        });
                    });
                    $scope.custom_fields_loading = false;
                };

如您所见，我提出了两个请求，一个是数据不可访问的 ajax，另一个是我之前评论过的，用于我的 forEach。

数据如下所示：

array:1 [
  "test drop down" => array:2 [
    0 => array:4 [
      "id" => 1
      "label" => "test drop down"
      "value" => "test1"
      "name" => "test drop down"
    ]
    1 => array:4 [
      "id" => 1
      "label" => "test drop down"
      "value" => "test2"
      "name" => "test drop down"
    ]
  ]

简单地说，我尝试完成的表格基本上如下所示：

<table>
  <thead>
     <tr>
        <th>test drop down</th>
     </tr>
  </thead>
  <tbody>
     <tr>
        <td>test1</td>
     </tr>
     <tr>
         <td>test2</td>
     </tr>
  </tbody>
</table>

现在我的表格只有正确的标题，但表格正文中没有数据。

    <table>
      <thead>
         <tr>
            <th>test drop down</th>
         </tr>
      </thead>
      <tbody>
         <tr>
            <td></td>
         </tr>
         <tr>
             <td></td>
         </tr>
      </tbody>
    </table>

感谢您的宝贵时间和帮助！

【问题讨论】：

组合动态列和服务器端处理是完全不可能的。你不能两者兼得。
那么服务器端处理的唯一方法是经典的吗？有确切数量的列我已经知道谁的号码？
这就是 dataTables 的工作方式，无论是否在服务器端。您可以使用各种技术拥有动态列，但它们全部都涉及重新初始化。这就是为什么 serverSide 和动态列是不可能的（或更正确的荒谬），因为 dataTable 应该在过滤、排序、分页等时一遍又一遍地生成。您可以进行第一次加载，渲染 DOM 表并然后初始化为 serverSide...或者为什么不打开和关闭一系列不可见的列，然后给出它们是动态标题标题...？

标签： angularjs datatables angular-datatables

【解决方案1】：

不确定这是不是您要查找的内容，但显示给定数据集中的类似表格（假设它保存在 $scope.dtCustomFieldsColumns 中）将是这样的：

<tbody>
   <tr ng-repeat="column in dtCustomFieldsColumns.testdropdown">
      <td>{{column.value}}</td>
   </tr>
</tbody>

您应该将数据集中的test drop down 键更改为testDropDown 之类的内容。这将帮助您直接访问列。祝你好运。

【讨论】：