DataTables logo
≡

How to update individual column filter dropdown when ajax reload?

How to update individual column filter dropdown when ajax reload?

nasmanasma Posts: 5Questions: 1Answers: 0
in Free community support

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.

Answers

  • kthorngrenkthorngren Posts: 22,494Questions: 26Answers: 5,169

    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

  • nasmanasma Posts: 5Questions: 1Answers: 0

    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:

  • nasmanasma Posts: 5Questions: 1Answers: 0

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

  • kthorngrenkthorngren Posts: 22,494Questions: 26Answers: 5,169

    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

  • nasmanasma Posts: 5Questions: 1Answers: 0

    @kthorngren shared link is not working for me :/

  • kthorngrenkthorngren Posts: 22,494Questions: 26Answers: 5,169

    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

  • nasmanasma Posts: 5Questions: 1Answers: 0

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

This discussion has been closed.