数据表 AJAX 调用不更新表数据

Question

我正在尝试使用 PHP 从 AJAX 调用更新我的数据表。我有一个下拉列表，当选择时将过滤数据。正在正确检索数据，但表未基于此数据进行更新。

加载页面时，数据显示正常没有问题，只有当我尝试过滤数据时。

下面是数据表和 ajax 调用的初始化

var table = $('#business-page-click-through-report').DataTable({
dom: 'Bfrtip',
buttons: [
'csv', 'excel'
],
ajax: {
url: Wo_Ajax_Requests_File() + '?f=filter_click_through_report',
type: 'POST',
"data": function ( data ) {
data.filter = $('#history option:selected').val();
}
},
serverSide: true,
//processing: true,
serverMethod: 'post',
'columns': [
{data: 'page_title'},
{data: 'module'},
{data: 'post_title'},
{data: 'site_destination'},
{data: 'totalClicks'},
]
});

接下来，当发生 onchange 事件时，将执行以下代码：

$('#history').on('change', function() {
table.draw();
} );

我通过验证器运行返回的 json 数据，一切都很好

{
"draw": 1,
"recordsTotal": 5,
"recordsFiltered": 5,
"aaData": [{
"page_title": "Free Plan",
"module": "jobs",
"post_title": "Senior Web Developer / FUll Stack Developer",
"site_destination": "https://www.seek.com.au/job/40560129?type=standard#searchRequestToken=c165897b-0be9-4734-84b1-040034173669",
"totalClicks": "5"
}, {
"page_title": "Gold Plan",
"module": "jobs",
"post_title": "gold plan test job",
"site_destination": "http://www.google.com",
"totalClicks": "1"
}, {
"page_title": "Free Plan",
"module": "products",
"post_title": "fsdfsdfsd",
"site_destination": "http://www.facebook.com",
"totalClicks": "15"
}, {
"page_title": "Free Plan",
"module": "public-post",
"post_title": "this is a public post for testing purposes",
"site_destination": "/read-blog/381",
"totalClicks": "2"
}, {
"page_title": "Free Plan",
"module": "events",
"post_title": "this is an event for a business page",
"site_destination": "/car-shows/this-is-an-event-for-a-business-page-3308",
"totalClicks": "2"
}]

}

不确定为什么数据没有更新。

任何帮助将不胜感激

谢谢 丹尼

Answer 1

看起来你遇到了一个cache问题。 默认情况下truecache。

只需尝试使用以下代码。

var table = $('#business-page-click-through-report').DataTable({
dom: 'Bfrtip',
buttons: [
'csv', 'excel'
],
ajax: {
url: Wo_Ajax_Requests_File() + '?f=filter_click_through_report',
cache: false,
type: 'POST',
"data": function ( data ) {
data.filter = $('#history option:selected').val();
}
},            
serverSide: true,
//processing: true,
serverMethod: 'post',
'columns': [
{data: 'page_title'},
{data: 'module'},
{data: 'post_title'},
{data: 'site_destination'},
{data: 'totalClicks'},
]
});

添加cache: false后，它应该使用更新的内容呈现数据表。

编辑在创建新数据表之前，请尝试销毁以前的数据表：

var table = $('#business-page-click-through-report').DataTable();
table.clear().destroy(); // If this doesn't work, remove .clear() and try table.destroy();

在此行之后运行实际的数据表和 ajax 逻辑。

var table = $('#business-page-click-through-report').DataTable({
dom: 'Bfrtip',
buttons: [
'csv', 'excel'
],
ajax: {
url: Wo_Ajax_Requests_File() + '?f=filter_click_through_report',
cache: false,
type: 'POST',
"data": function ( data ) {
data.filter = $('#history option:selected').val();
}
},            
serverSide: true,
//processing: true,
serverMethod: 'post',
'columns': [
{data: 'page_title'},
{data: 'module'},
{data: 'post_title'},
{data: 'site_destination'},
{data: 'totalClicks'},
]
});

Answer 2

你可以简单地销毁数据表，并在ajax调用成功时初始化。