数据表 AJAX 筛选器重新加载数据

datatable ajax filter reload data

本文关键字:加载 数据 新加载 AJAX 筛选 数据表      更新时间:2023-09-26

我有一个数据表,其中包含来自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数据库,然后在单击该按钮时从控制台中的数据表中收到错误。这向我表明它正在尝试获取新数据,但它不会在屏幕上更新它们。

为了实现这一点,我建议使用Datatables内置reload()功能:

var table = $('#example').DataTable( {
    ajax: "data.json"
} );
setInterval( function () {
    table.ajax.reload();
}, 30000 );

上面的代码将每隔 3 秒从指定的 ajax 源刷新一次具有给定 ID example表。

对于您个人使用,您真正需要的部分是tableVar.ajax.reload();用您自己的变量替换tableVar

刷新employeeActivityTableemployeeActivityTable.ajax.reload();

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