datatable ajax filter reload data

Question

I have a datatable with data coming from ajax. I have some input fields and when hiting a button I would like the datatable to make a new ajax request and reload the data.

I have:

<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> 

I have tried also to clear with clear() but nothing is happening. Also, I don't see any errors in the console, it just doesn't do anything.

I have tried also to shutdown MySQL database and then I get an error from datatables in the console when I click the button. This shows to me that it is trying to get the new data but it doesn't update them on the screen.

Answer 1

To achieve this, I'd suggest using Datatables build-in reload() capability:

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

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

The above code will refresh a table with given ID example every 3 seconds from the specified ajax source.

For your personal use, the part you really need is tableVar.ajax.reload(); where you replace tableVar with your own variable.

to refresh employeeActivityTable : employeeActivityTable.ajax.reload();

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