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

Posted 2023-05-07

【中文标题】使用 dtOptions 访问 angularjs 数据表中的 json 数据

【英文标题】：accessing json data in angularjs datatables using dtOptions

【发布时间】：2015-03-04 01:08:46

【问题描述】：

我正在使用 Angular 数据表和 jquery 数据表来填充我的 json 数据。我无法使用 DTColumnBuilder.withnewColumn() 访问 json 数据。试了好几次都搞不定，谁能帮帮我。

$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"  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"
        
    ]

【参考方案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 %')
];

【讨论】：

这行得通吗？我有同样的问题，它对我不起作用。谢谢。