求助:如何通过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
相关产品推荐
相关产品推荐

