带有 Ajax 源的 Angular 数据表答案

【问题标题】：Angular dataTables with Ajax Source带有 Ajax 源的 Angular 数据表
【发布时间】：2016-08-16 18:37:47
【问题描述】：

我正在尝试将 ajax 源中的数据加载到角度数据表中，但它甚至没有命中 ajax 调用。

var analyzer=angular.module('analyzer', ['datatables']);
analyzer.controller('WithAjaxCtrl', WithAjaxCtrl);

            function WithAjaxCtrl(DTOptionsBuilder, DTColumnBuilder) {
                    var vm = this;

                    $scope.dtOptions = DTOptionsBuilder.fromSource('/analyzer/List')

                    $scope.dtColumns = [
                    DTColumnBuilder.newColumn('BuildName').withTitle('Name'),
                    DTColumnBuilder.newColumn('Total').withTitle('Total'),
                    DTColumnBuilder.newColumn('Passed').withTitle('Passed'),
                    DTColumnBuilder.newColumn('Failed').withTitle('Failed')

                ];
            }

这是表格的 html 代码-

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

来自 ajax 源的数据格式为 -

{"responseCode":0,"responseData":[{"Name":"Rob","Total":6273,"Passed":5874,"Failed":399}]}

那么我必须定义 datasrc 吗？

【问题讨论】：

标签： angular-datatables

【解决方案1】：

是的，您需要指定dataSrc，因为您的行包含在responseData 中，而不是默认或预期的data 属性中。在 angular dataTables 中有一个名为 withDataProp() 的选项设置器：

$scope.dtOptions = DTOptionsBuilder.fromSource('/analyzer/List')
  .withDataProp('responseData')

无法直接链接，但请查看https://l-lin.github.io/angular-datatables/#/api

【讨论】：