數據表ajax過濾器重載數據

Question

我有一個數據表，數據來自ajax。 我有一些輸入字段，單擊按鈕時，我希望數據表發出一個新的ajax請求並重新加載數據。

我有：

<script>
    var domain = [];
    var subdomain = [];
    var job_role = [];
    var month = [];
    var meta_activity = [];

    $.fn.dataTableExt.oApi.fnFilterAll = function (oSettings, sInput, iColumn, bRegex, bSmart) {
        var settings = $.fn.dataTableSettings;

        for (var i = 0; i < settings.length; i++) {
            settings[i].oInstance.fnFilter(sInput, iColumn, bRegex, bSmart);
        }
    };

    $(document).ready(function() {
        $.ajaxSetup({
            headers: {
                'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
            }
        });

        //Init select2 boxes
        $("#domain").select2({
            allowClear: true,
            ajax: {
                url: "{!! route('ajaxlistdomain') !!}",
                dataType: 'json',
                type: "GET",
                processResults: function (data) {
                    return {
                        results: $.map(data, function (item) {
                            return {
                                text: item.text,
                                id: item.text
                            }
                        })
                    };
                }
            }
        });
        //Init select2 boxes
        $("#subdomain").select2({
            allowClear: true,
            ajax: {
                url: "{!! route('ajaxlistsubdomain') !!}",
                dataType: 'json',
                type: "GET",
                processResults: function (data) {
                    return {
                        results: $.map(data, function (item) {
                            return {
                                text: item.text,
                                id: item.text
                            }
                        })
                    };
                }
            }
        });
        //Init select2 boxes
        $("#jobrole").select2({
            allowClear: true,
            ajax: {
                url: "{!! route('ajaxlistjobrole') !!}",
                dataType: 'json',
                type: "GET",
                processResults: function (data) {
                    return {
                        results: $.map(data, function (item) {
                            return {
                                text: item.text,
                                id: item.text
                            }
                        })
                    };
                }
            }
        });
        //Init select2 boxes
        $("#month").select2({
            allowClear: true,
            data:[
                { id: 'Jan', text: 'Jan' },
                { id: 'Feb', text: 'Feb' },
                { id: 'Mar', text: 'Mar' },
                { id: 'Apr', text: 'Apr' },
                { id: 'May', text: 'May' },
                { id: 'Jun', text: 'Jun' },
                { id: 'Jul', text: 'Jul' },
                { id: 'Aug', text: 'Aug' },
                { id: 'Sep', text: 'Sep' },
                { id: 'Oct', text: 'Oct' },
                { id: 'Nov', text: 'Nov' },
                { id: 'Dec', text: 'Dec' }
            ]
        });
        //Init select2 boxes
        $("#metaactivity").select2({
            allowClear: true,
            ajax: {
                url: "{!! route('ajaxlistmetaactivity') !!}",
                dataType: 'json',
                type: "GET",
                processResults: function (data) {
                    return {
                        results: $.map(data, function (item) {
                            return {
                                text: item.text,
                                id: item.text
                            }
                        })
                    };
                }
            }
        });

        $("#update").click(function()
            {
                domain = [];
                subdomain = [];
                job_role = [];
                month = [];
                meta_activity = [];

                $("#domain option:selected").each(function()
                    {
                    // log the value and text of each option
                    domain.push($(this).val());
                });
                $("#subdomain option:selected").each(function()
                    {
                    // log the value and text of each option
                    subdomain.push($(this).val());
                });
                $("#jobrole option:selected").each(function()
                    {
                    // log the value and text of each option
                    job_role.push($(this).val());
                });
                $("#month option:selected").each(function()
                    {
                    // log the value and text of each option
                    month.push($(this).val());
                });
                $("#metaactivity option:selected").each(function()
                    {
                    // log the value and text of each option
                    meta_activity.push($(this).val());
                });
                employeeActivityTable.ajax.reload();
                projectActivityTable.ajax.reload();
            }
        );

        var employeeActivityTable = $('#employeeActivityTable').DataTable({
            ajax: {
                    url: "{!! route('ajaxactivityperemployee') !!}",
                    type: "POST",
                    data: {
                        'domain[]': domain,
                        'subdomain[]': subdomain,
                        'job_role[]': job_role,
                        'month[]': month,
                        'meta_activity[]': meta_activity
                          },
                    dataType: "JSON"
                },
            columns: [
                { data: 'employee_id', name: 'employee_id' },
                { data: 'employee_name', name: 'employee_name' },
                { data: 'month', name: 'month' },
                { data: 'sum_task_hour', name: 'sum_task_hour' }
                ],
            columnDefs: [
                {
                    "targets": [ 0 ],
                    "visible": false,
                    "searchable": false
                }
                ]
        } );

        var oTable0 = $("#table1").dataTable();

        $("#Search_All").keyup(function () {
           // Filter on the column (the index) of this element
           oTable0.fnFilterAll(this.value);
        });

        var projectActivityTable = $('#projectActivityTable').DataTable( {
            ajax: {
                    "url": "{!! route('ajaxactivityperproject') !!}",
                    "type": "POST",
                    data: {
                        'domain[]': domain,
                        'subdomain[]': subdomain,
                        'job_role[]': job_role,
                        'month[]': month,
                        'meta_activity[]': meta_activity
                          },
                    dataType: "JSON"
            },
            columns: [
                { data: 'project_id', name: 'project_id' },
                { data: 'customer_name', name: 'customer_name' },
                { data: 'project_name', name: 'project_name' },
                { data: 'meta_activity', name: 'meta_activity' },
                { data: 'employee_id', name: 'employee_id' },
                { data: 'employee_name', name: 'employee_name' },
                { data: 'month', name: 'month' },
                { data: 'sum_task_hour', name: 'sum_task_hour' }
                ],
            columnDefs: [
                {
                    "targets": [ 0 ],
                    "visible": false,
                    "searchable": false
                },
                {
                    "targets": [ 4 ],
                    "visible": false,
                    "searchable": false
                }
                ]
        } );

        var oTable1 = $("#table1").dataTable();

        $("#Search_All").keyup(function () {
           // Filter on the column (the index) of this element
           oTable1.fnFilterAll(this.value);
        });
    } );
</script> 

我也嘗試過用clear（）清除，但是什么也沒有發生。 另外，我在控制台中看不到任何錯誤，它什么也沒做。

我也嘗試關閉MySQL數據庫，然后單擊按鈕時從控制台的數據表中收到錯誤消息。 這向我表明，它正在嘗試獲取新數據，但不會在屏幕上更新它們。

Answer 1

為此，我建議使用Datatables內置的reload()功能：

var table = $('#example').DataTable( {
    ajax: "data.json"
} );

setInterval( function () {
    table.ajax.reload();
}, 30000 );

上面的代碼將從指定的ajax源每3秒刷新一次具有給定ID example的表。

對於您的個人用途，您真正需要的部分是tableVar.ajax.reload(); 使用您自己的變量替換tableVar 。

刷新employeeActivityTable ： employeeActivityTable.ajax.reload();

來源： https : //datatables.net/reference/api/ajax.reload%28%29