You need to enable JavaScript to run this app.
优惠活动
大模型
产品
解决方案
定价
更多

求助:如何通过POST请求配置DataTables分页并处理响应字段

问题:DataTables服务端分页失效,POST传参与响应字段处理问题

我已经查阅了DataTables官方文档,但还是搞不懂怎么在POST请求里发送自定义数据模型,以及如何从响应中正确获取分页必需的draw、recordsTotal和recordsFiltered字段。我确定问题出在ajax.data或ajax.dataSrc的配置上,但毫无头绪,求帮忙。

POST请求发送的模型示例

let model = {};
model.entityid = entityid;
model.entitytypeid = entitytypeid;
model.fromDate = fromDateVal;
model.toDate = toDateVal;
model.vins = $('#searchVIN').val();
model.violations = $('#selViolation option:checked').val();

生成DataTable的JavaScript代码

let dailyScanTable = $('#dailyScanTable').DataTable({
    processing: true,
    serverSide: true,
    ajax: {
        type: 'POST',
        url: 'https://api.example.com/Advertising/AdvertisingDailyScanPost',
        dataType: 'json',
        data: model,
        dataSrc: function (json) {
            if (json == undefined) {
                // 错误处理
                return false;
            } else {
                const totalListing = json.Summary.TotalListings;
                let numPriceMissing;
                // 初始化更多变量

                if (json.Summary == undefined || json.Summary.TotalListings == undefined) {
                    // 错误处理
                    return false;
                }

                let returnModel = {};
                returnModel.dailyScanJson = json.Violations.Rows;
                returnModel.recordsTotal = json.Summary.TotalListings;
                returnModel.recordsFiltered = 0;
                switch (model.violations) {
                    case 'Missing Price':
                        returnModel.recordsFiltered = getRecordsFiltered(json.Summary.Violations, 'Missing Price');
                        break;
                    // 其他case
                    default:
                        break;
                }

                // 计算各类总计、小计,以及DOM操作

                // 返回DataTable要用的数据
                // 这是我唯一能填充表格的方式,但会导致分页失效。:(
                return returnModel.dailyScanJson; 

            }
        },
    },
    columns: [
        { data: 'vin' },
        { data: 'Violation' },
        { data: 'url' },
        { data: 'ScanDate' },
    ],
    columnDefs: [
        {
            visible: false,
            targets: [3],
        },
        {
            render: function (data, type, row) {
                const modifiedURL = data.replace('https://', '').replace('/', '<br />/');
                return `<a href="${data}" target="_blank">${modifiedURL}</a>`;
            },
            targets: [2],
        }
    ],
    paging: true,
})

Ajax调用返回结果(取自Postman)

{
    "Violations": {
        "RowCount": 515,
        "CurrentPage": 1,
        "PageSize": 20,
        "Rows": [
            {
                "vin": "19XFB2F86EE015081",
                "Violation": "Has Open Recall",
                "url": "https://www.example.com/used-St+Albans-2014-Honda-Civic-EX-19XFB2F86EE015081",
                "ScanDate": "2024-04-21T00:00:00"
            },
            {
                "vin": "1C4BJWDG5DL616992",
                "Violation": "Has Open Recall",
                "url": "https://www.example.com/used-St+Albans-2013-Jeep-Wrangler-Unlimited+Sport-1C4BJWDG5DL616992",
                "ScanDate": "2024-04-21T00:00:00"
            },
            {
                "vin": "1C4BJWDG9EL157029",
                "Violation": "Has Open Recall",
                "url": "https://www.example.com/used-Charleston-2014-Jeep-Wrangler-Unlimited+Sport-1C4BJWDG9EL157029",
                "ScanDate": "2024-04-21T00:00:00"
            },
            ...
        ]
    },
    "Summary": {
        "TotalListings": 1772,
        "Violations": [
            {
                "Name": "Has Open Recall",
                "Total": 492
            },
            {
                "Name": "Missing Price",
                "Total": 23
            },
            {
                "Name": "No Cookie ConsentBanner",
                "Total": 0
            },
            {
                "Name": "Price Clarification Notice Missing",
                "Total": 0
            },
            {
                "Name": "Price Clarification Closure Missing",
                "Total": 0
            }
        ]
    }
}

目前我只能通过返回returnModel.dailyScanJson来填充表格,但这会导致分页功能失效。


内容的提问来源于stack exchange,提问作者Nosnetrom

相关产品推荐
方舟 Agent Plan

超全模态模型 × Harness 升级,最新支持 Deepseek-V4.1-Flash、GLM-5.3 系列、Doubao-Seedream-5.0-pro、Kimi-K3 (部分), 限时 9.9 元起

最近更新时间:2026.06.24 17:38:11