使用dtOptions angularjs的DataTable访问JSON数据 [英] accessing json data in angularjs datatables using dtOptions

问题描述

我采用了棱角分明的DataTable和jQuery数据表来填充我的JSON data.Am无法访问使用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 = [

$scope.dtColumns = [

DTColumnBuilder.newColumn('contracts.contracts[0].productGroup').withTitle('Fund Name'),
DTColumnBuilder.newColumn(null).withTitle('Transfer %')

];

$ scope.dtColumnDefs = [

$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 code是：

and my html code is:

<table datatable="" dt-options="dtOptions" dt-columns="dtColumns" dt-column-defs="dtColumnDefs" cellspacing="0" width="100%" class="display fundsTable row-border hover">
   </table>

样JSON数据：

sample json data:

{
"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"
        }
    ]
}

}

推荐答案

默认情况下，角的DataTable会寻找一个阵列作为数据。
如果您的数据嵌套在一个对象，那么你需要提供 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的DataTable访问JSON数据的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！