javascript - 如何将此 json 与 Angular 数据表一起使用

Question

这是我的服务器响应。

{
"status": "success",
"data": [{
    "id": null,
    "reportType": "Total Voucher Report",
    "reportModule": "Vouchers",
    "reportData": [{
        "id": "1",
        "voucherPackId": "2",
        "serialNumber": "0",
        "status": "Free",
        "isBlocked": "N",
        "voucherPin": "0",
        "buyDate": null,
        "redeemDate": null,
        "phoneNumber": null,
        "statusCode": null,
        "identifier": "MCM0007532",
        "merchantName": "test1",
        "voucherName": "fddf",
        "expiryDate": "2016-02-24 00:00:00",
        "dealCategory": "Hotels \u0026 Travel",
        "shortDescription": "xvxv",
        "voucherWorth": "33.00"
    }, {
        "id": "2",
        "voucherPackId": "2",
        "serialNumber": "0",
        "status": "Free",
        "isBlocked": "N",
        "voucherPin": "0",
        "buyDate": null,
        "redeemDate": null,
        "phoneNumber": null,
        "statusCode": null,
        "identifier": "MCM0007532",
        "merchantName": "test1",
        "voucherName": "fddf",
        "expiryDate": "2016-02-24 00:00:00",
        "dealCategory": "Hotels \u0026 Travel",
        "shortDescription": "xvxv",
        "voucherWorth": "33.00"
    }, {
        "id": "3",
        "voucherPackId": "2",
        "serialNumber": "0",
        "status": "Free",
        "isBlocked": "N",
        "voucherPin": "0",
        "buyDate": null,
        "redeemDate": null,
        "phoneNumber": null,
        "statusCode": null,
        "identifier": "MCM0007532",
        "merchantName": "test1",
        "voucherName": "fddf",
        "expiryDate": "2016-02-24 00:00:00",
        "dealCategory": "Hotels \u0026 Travel",
        "shortDescription": "xvxv",
        "voucherWorth": "33.00"
    }]
}],
"message": null}

我用它作为，

vm.dtOptions = DTOptionsBuilder
        .newOptions()
        .withOption('ajax', {
            url: config.base_url + 'report/voucher?module=Vouchers&type=Total Voucher Report&merchant=1',
            type: 'POST',
            dataSrc: 'data.data[0].reportData[0]',
        })
        .withOption('processing', true)
        .withOption('serverSide', true)
        .withBootstrap()
        .withPaginationType('full_numbers');

它表示 JSON 响应无效。感谢您的善意帮助。调试结果:http://debug.datatables.net/urizon

Answer 1

使用以下值 dataSrc选项:data[0].reportData 如下所示。此外，您还需要删除 serverSide 和 processing 选项，因为您的数据不具有服务器端处理模式的正确结构。

您还需要定义列结构，因为您使用对象数组作为数据源。

vm.dtOptions = DTOptionsBuilder
        .newOptions()
        .withOption('ajax', {
            url: config.base_url + 'report/voucher?module=Vouchers&type=Total Voucher Report&merchant=1',
            type: 'POST',
            dataSrc: 'data[0].reportData'
        })
        .withBootstrap()
        .withPaginationType('full_numbers');

vm.dtColumns = [
    /* List data properties for each column in the table. */
    DTColumnBuilder.newColumn('id'),
    DTColumnBuilder.newColumn('voucherPackId'),
    DTColumnBuilder.newColumn('serialNumber'),
    DTColumnBuilder.newColumn('status')        
];