使用dtOptions访问angularjs数据表中的json数据 [英] accessing json data in angularjs datatables using dtOptions
本文介绍了使用dtOptions访问angularjs数据表中的json数据的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我正在使用Angular Datatables和jquery数据表来填充我的json数据。不能使用DTColumnBuilder.withnewColumn（）访问json数据。我已经尝试了好几次，但无法弄清楚，任何人都可以帮助我解决问题。
I am using Angular Datatables and jquery datatables to populate my json data.Am not able to access the json data using DTColumnBuilder.withnewColumn(). I've tried it several times but not able to figure it out,can anyone help me with the solution.
$scope.dtOptions = DTOptionsBuilder.fromFnPromise( multishiftService.fetchfunds())
.withPaginationType('extStyle')
.withDOM ( '<"top"iflp<"clear">>rt<"bottom"iflp<"clear">>' )
.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 '<a href="#">' + data + '</a>';
}),
DTColumnDefBuilder.newColumnDef(1).renderWith(function(data, type, full) {
return '<input class="inputs txtFunds dt-body-center" type="text"/> %';
})
];
我的html代码是：
<table datatable="" dt-options="dtOptions" dt-columns="dtColumns" dt-column-defs="dtColumnDefs" cellspacing="0" width="100%" class="display fundsTable row-border hover">
</table>
样本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- <br>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- <br>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"
}
]
}
}
推荐答案
默认情况下，角数据表将寻找数组作为数据。
如果您的数据嵌套在对象中，则需要提供 AjaxDataProp 。
By default, Angular-datatables will look for an array as the data. If your data is nested in an object, then you need to provide the AjaxDataProp.
在您的情况下，您应在DT选项中添加 withDataProp ：
In your case, you should add the withDataProp in your DT options:
$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);
此外，您不需要在定义列时指定嵌套属性：
Moreover, you don't need to specify the nested attributes when defining your columns:
$scope.dtColumns = [
DTColumnBuilder.newColumn('productGroup').withTitle('Fund Name'),
DTColumnBuilder.newColumn(null).withTitle('Transfer %')
];
这篇关于使用dtOptions访问angularjs数据表中的json数据的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
