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

Posted

技术标签:

【中文标题】使用 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 %')
];

【讨论】:

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

以上是关于使用 dtOptions 访问 angularjs 数据表中的 json 数据的主要内容,如果未能解决你的问题,请参考以下文章

具有angularjs的数据表不适用于Columns和dtOptions

angularjs解决方案之 子表添加初始化值

重新渲染两个角度数据表

如何使用 AngularJS 保护 Laravel 4 中的 API 访问

从使用 AngularJS 开发的网站获取数据访问权限

使用 AngularJS 访问嵌套的 JSON