Datatables AJAX调用不更新表数据

Question

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

当页面加载时，数据显示正常没有问题，只有当我尝试对数据进行 dfilter 时。

下面是datatable和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 问题。 cache 默认为true。

试试下面的代码。

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调用成功时进行初始化。