首页 > 解决方案 > jquery 数据表无法通过 ajax 发布请求正常工作?

问题描述

在数据表中,我必须通过 ajax 请求显示表数据,但它无法正常工作,ajax 请求具有返回 json 数据的 post 方法,我在下面给出的代码将数据获取到控制台但它没有填充到桌子上。请查看我的代码并帮助我!提前致谢。

j 查询数据表代码:-

$(document).ready(function () {
    $('#example').DataTable({
        "processing": true,
        "serverSide": true,
        ajax: function (data, callback, settings) {
            var api = new $.fn.dataTable.Api(settings); // <--- create new api object using settings object
            $.ajax({
                url: 'api/v1/reconcile-data',
                type: "post",
                data: {
                    pageNumber: api.page(), // <---- get page number
                    pageSize: api.page.len(), //<--- get page length
                },
                success: function (response) {
                    console.log("this is datat" + response.content)
                    return response.content;
                },


            });
        },
        columns: [
            {content: 'accountNo'},
            {content: 'refNo'},
            {content: 'amount'},
            {content: 'mainCode'},

        ]
    });
});

json数据:-

{
    "content": [
        {
            "accountNo": "4321xxxxx5011",
            "refNo": "23456191211",
            "cardNo": "418121xxxxxxx431",
            "adviceType": null,
            "amount": "11000.0",
            "cardType": null,
            "description": "NA",
            "drCrType": null,
            "reason": null,
            "transactionTypeId": null,
            "mainCode": "189490988",
            "traceId": null,
            "txnAmount": null,
            "tdsName": "EJ",
            "rcName": null,
            "colorId": null,
            "txnDate": null,
            "cdate": "2020-12-20T05:54:42.015+0000"
        },
        {
            "accountNo": "4321xxxxx5011",
            "refNo": "23456191211",
            "cardNo": "418121xxxxxxx431",
            "adviceType": null,
            "amount": "11000.0",
            "cardType": null,
            "description": null,
            "drCrType": null,
            "reason": null,
            "transactionTypeId": null,
            "mainCode": "189490988",
            "traceId": "210111",
            "txnAmount": null,
            "tdsName": "CBS",
            "rcName": null,
            "colorId": null,
            "txnDate": null,
            "cdate": null
        }
    ],
    "pageable": {
        "sort": {
            "sorted": true,
            "unsorted": false,
            "empty": false
        },
        "offset": 0,
        "pageSize": 2,
        "pageNumber": 0,
        "paged": true,
        "unpaged": false
    },
    "totalElements": 101,
    "last": false,
    "totalPages": 51,
    "size": 2,
    "number": 0,
    "sort": {
        "sorted": true,
        "unsorted": false,
        "empty": false
    },
    "numberOfElements": 2,
    "first": true,
    "empty": false
}

html:-

 <table id="example" class="display" style="width:100%">
                            <thead>
                            <tr>
                                <th>name</th>
                                <th>address</th>
                                <th> books</th>
                                <th>home addres</th>

                            </tr>
                            </thead>
                        </table>

我的数据表的图像:-

在此处输入图像描述

标签: javascriptjqueryajaxdatatable

解决方案


推荐阅读