How to update individual column filter dropdown when ajax reload?

nasma

I am using a datatable in my application and I need individual column filters. I also have a date range picker and when the user changes the date I need to reload the datatable. In order to do this am using ajax reload and it works fine. But individual column filters are not updating at ajax reload. I am pasting my code below and please someone help me here to sort out my issue, also I am a newbie in datatables. Thank you in advance.

html table:

<div id="table_customers">
                            <table id="tb_customers" class="table table-striped">
                                <thead>
                                <tr>
                                    <th scope="col">{{__('app.name')}}</th>
                                    <th scope="col">{{__('app.company')}}</th>
                                    <th scope="col">{{__('app.company_position')}}</th>
                                    <th scope="col">{{__('app.created_by')}}</th>
                                    <th scope="col">{{__('app.statistics_report_created_at')}}</th>
                                </tr>
                                </thead>
                                <tfoot style="display: table-header-group;">
                                    <tr>
                                        <th scope="col">{{__('app.name')}}</th>
                                        <th scope="col">{{__('app.company')}}</th>
                                        <th scope="col">{{__('app.company_position')}}</th>
                                        <th scope="col">{{__('app.created_by')}}</th>
                                        <th scope="col">{{__('app.statistics_report_created_at')}}</th>
                                    </tr>
                                </tfoot>
                                <tbody></tbody>
                            </table>
                        </div>

JS function:

var table_cli = $('#tb_customers').DataTable({
                "language": table_lang,
                ajax: {
                    method: "GET",
                    url: requestUrl,
                    "data": function ( ) {
                        return requestData;
                    },
                   dataSrc: ""
                },
                "columns": [
                    { "data": "name" },
                    { "data": "company" },
                    { "data": "company_position" },
                    { "data": "created_by" },
                    { "data": "created_at" }
                ],
                initComplete: columnFilter
        });

function columnFilter(){
            this.api()
                .columns()
                .every(function () {
                    var column = this;
                    var select = $('<select><option value=""></option></select>')
                        .appendTo($(column.footer()).empty())
                        .on('change', function () {
                            var val = $.fn.dataTable.util.escapeRegex($(this).val());
 
                            column.search(val ? '^' + val + '$' : '', true, false).draw();
                        });
 
                    column
                        .data()
                        .unique()
                        .sort()
                        .each(function (d, j) {
                            select.append('<option value="' + d + '">' + d + '</option>');
                        });
                });
            
        }

below is the function called when changing the date period in the application:

function loadTable(){
            requestData = { "grid": true, "start": period_start.format('YYYY-MM-DD'), "end": period_end.format('YYYY-MM-DD'), "report_type": 1, "user": $('#report_user').val(), "role": $('#report_role').val() };
            table_cli.ajax.reload(columnFilter);
        }

and below is the error thrown when changing the date period, it loads the table correctly but not the individual column filters

I have spent a lot of hours debugging this, any help would be appreciated.

kthorngren

The initComplete function exposes the Datatables API instance by using this.api(). However this.api() is not available in the callback function call using ajax.reload(). Try replacing this.api() with $('#tb_customers').DataTable() in the function. See the API docs for details of accessing the API.

Kevin

nasma

hello @kthorngren
thanks for your reply, I tried as you said but now it throws me a different error as below:

$(...).DataTable is not a function

as I checked in network tab, required js files are loaded:

nasma

or I wanna know is there are any other ways to refresh the individual column filters in datatables after ajax reload

kthorngren

What did you change?

I took your code an placed into this test case with the change I suggested and it works:
http://live.datatables.net/zusiyofe/1/edit

If this doesn't help then please update the test case or provide your own that replicates the issue.

Kevin

nasma

@kthorngren shared link is not working for me

kthorngren

The link works. Your browser is probably trying to use SSL and changing http to https which won't work. Try a different browser or make sure the the URL has http.

Kevin

nasma

oh yea, @kthorngren now the link works, let me check and get back, btw thank you so much