使用dtOptions访问angularjs数据表中的json数据

我正在使用Angular Datatables和jquery数据表来填充我的json数据。无法使用DTColumnBuilder.withnewColumn（）访问json数据。 我已经尝试了几次但是无法弄明白，任何人都可以帮我解决这个问题。

$scope.dtOptions = DTOptionsBuilder.fromFnPromise( multishiftService.fetchfunds()) .withPaginationType('extStyle') .withDOM ( '<"top"iflp>rt<"bottom"iflp>' ) .withOption('bFilter', false) .withOption('bInfo',false); $scope.dtColumns = [ DTColumnBuilder.newColumn('contracts.contracts[0].productGroup').withTitle('Fund Name'), DTColumnBuilder.newColumn(null).withTitle('Transfer %') ]; $scope.dtColumnDefs = [ DTColumnDefBuilder.newColumnDef(0).renderWith(function(data, type, full) { return '' + data + ''; }), DTColumnDefBuilder.newColumnDef(1).renderWith(function(data, type, full) { return ' %'; }) ]; 

我的HTML代码是：

样本json数据：

 { "contracts": { "contracts": [ { "productGroup": "American Legacy", "restrictionCode": "", "restrictionDesc": "", "owners": [ { "address": { "line1": "1541 EAST PALESTINE ROAD", "line2": null, "line3": null, "line4": null, "line5": null, "city": "PALESTINE", "state": "TX", "zip": "75801-732" }, "lastName": "ANAND", "firstName": "MANUSHRIFA11", "state": "TX", "roleCode": "8", "lastNameFirstName": "ANAND, MANUSHRIFA11" } ], "effectiveDate": "02/19/2008", "effectiveDateValue": 1203359400000, "effectiveDateValueStr": "02/19/2008", "valuationDate": 1412706600000, "valuationDateStr": "10/08/2014", "riders": [ "" ], "serviceFeatures": [ "N/A" ], "contract": "957097001", "lob": "VARIABLE ANNUITY- 
AM LEGACY FUSION", "productFamily": null, "value": 212793.24, "clients": [ { "clientType": "Annuitant", "lastName": "ANAND", "firstName": "MANUSHRIFA11", "birthDate": "10/25/1951", "roleCode": "35", "lastNameFirstName": "ANAND, MANUSHRIFA11", "ageSevntyAndHalf": false, "genderCode": "F" } ], "marketTypes": null, "active": true, "producerName": "KENNETH FREE", "primaryInsuredDob": "10/25/1951", "primaryInsuredGenderCode": "F", "primaryOwnerState": "TX", "faceAmt": 0, "indivCompany": "Individual" }, { "productGroup": "American Legacy", "restrictionCode": "", "restrictionDesc": "", "owners": [ { "address": { "line1": "1 MADISON AVE", "line2": null, "line3": null, "line4": null, "line5": null, "city": "NEW YORK", "state": "NY", "zip": "100103603" }, "lastName": "", "firstName": "EDWARD JONES", "state": "NY", "roleCode": "8", "lastNameFirstName": "EDWARD JONES" } ], "effectiveDate": "01/01/2005", "effectiveDateValue": 1104517800000, "effectiveDateValueStr": "01/01/2005", "valuationDate": 1412706600000, "valuationDateStr": "10/08/2014", "riders": [ "" ], "serviceFeatures": [ "N/A" ], "contract": "958410707", "lob": "VARIABLE ANNUITY- 
AM LEGACY 3", "productFamily": null, "value": 133469.72, "clients": [ { "clientType": "Annuitant", "lastName": "NAVEN", "firstName": "KUMARFA11", "birthDate": "02/28/1941", "roleCode": "35", "lastNameFirstName": "NAVEN, KUMARFA11", "ageSevntyAndHalf": true, "genderCode": "M" } ], "marketTypes": null, "active": true, "producerName": "KENNETH FREE", "primaryInsuredDob": "02/28/1941", "primaryInsuredGenderCode": "M", "primaryOwnerState": "NY", "faceAmt": 0, "indivCompany": "Company" } ] } 

}

Answer 1

默认情况下，Angular-datatables将查找数组作为数据。 如果您的数据嵌套在对象中，则需要提供AjaxDataProp 。

在您的情况下，您应该在DT选项中添加withDataProp ：

 $scope.dtOptions = DTOptionsBuilder.fromFnPromise( multishiftService.fetchfunds()) .withDataProp('contracts.contracts') .withPaginationType('extStyle') .withDOM ( '<"top"iflp<"clear">>rt<"bottom"iflp<"clear">>' ) .withOption('bFilter', false) .withOption('bInfo',false); 

而且，在定义列时不需要指定嵌套属性：

 $scope.dtColumns = [ DTColumnBuilder.newColumn('productGroup').withTitle('Fund Name'), DTColumnBuilder.newColumn(null).withTitle('Transfer %') ];