Drop down filter not being updated on new dataset using 'table.ajax.url().load();'

markMathews1989

I created a drop down on the date column using an init function and something similar happens. The options that load on the drop down filter are only from the initial data load. When navigating to other data sets, the options do not get updated. The same options from the original data load only gets displayed. I create a navigation menu outside of the datatables that load on a click event.

```

$(document).ready(function() {

var table = $('#table').DataTable( {
    ajax: {
        url: '/docs/accounting',
        dataSrc: ''
    },
    info: false,
    order: [[ 2, "asc" ]],
    paging: false,
    scrollX: true,
    scrollY: 500,
    searching: true,
    scrollCollapse: true,
    columns: [
        {
            'targets': 0,
            'searchable':false,
            'orderable':false,
            'className': 'dt-body-center',
            'render': function (data, type, full, meta){
                return '<input class="select" name="selection" type="checkbox">';
            },
            width: "5%"
        },
        {
            data: "id",
            width: "15%"
        },
        {
            data: "department",
            width: "25%"
        },
        {
            data: "date",
            //convert time from milliseconds to date
            render: function(jsonDate) {
                //convert numeric month into string
                var date = new Date(jsonDate);
                var options = { month: 'long', year: 'numeric' };
                var dateToString = date.toLocaleDateString("en-US", options);
                return dateToString;
            },
            orderable: false,
            width: "15%"
        },
        {
            data: "file",
            render: function( data ) {
                var message = "No file";
                return message
            },
            sortable: false,
            searchable: false,
            class: "dt-body-center",
            width: "15%"
        }
    ],


    initComplete: function () {
        //Drop down filter replaces the header title for Date
        this.api().columns([3]).every( function () {
            var column = this;
            var select = $('<select class="date-filter"><option value="">Date</option></select>')
                .appendTo( $(column.header()).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 ) {
                //convert milliseconds to date
                var date = new Date(d);
                var options = { month: 'long', year: 'numeric' };
                var dateToString = date.toLocaleDateString("en-US", options);

                //reformat date and fill options with new date
                select.append( '<option value="'+dateToString+'">'+dateToString+'</option>' )
            } );
        } );
    }

} );

$("#finance").click(function() {
    table.ajax.url('/docs/finance').load();
});

$("#accounting").click(function() {
    table.ajax.url('/docs/accounting').load();
});

$("#sales").click(function() {
    table.ajax.url('/docs/sales').load();
});

} );

kthorngren

It looks like the thead is created before Datatables initializes the first time. initComplete is only run once after Datatables initializes. Since it looks like the thead exists I think you can move the code inside initComplete into the xhr event and have it populate the header drop down after each ajax request/reload.

Kevin

markMathews1989

so I added the xhr event at the very top as shown below, but the problem I face now is the option values in my drop down are not displaying in the proper departments. The drop down options that are supposed to display for finance are showing in Sales and vice versa. On the initial load, the drop down filter is working just fine under the Accounting, but not for the other tables. When navigating back to Accounting, it no longer works (sometimes it does and sometimes it doesn't. It randomizes every time you click the button to navigate to a different department). I am only using 1 table to display 3 different data sets.

$(document).ready(function() {

**var table = $('#table').on('xhr.dt', function ( e, settings, json, xhr ) {
    var tableFilter = $('#table').DataTable()
    tableFilter.columns([3]).every( function () {
        var column = this;
        var select = $('<select class="drop-down-date-filter" data-uk-dropdown><option value="">Date</option></select>')
            .appendTo( $(column.header()).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 ) {
            //convert milliseconds to date
            var date = new Date(d);
            var options = { month: 'long', year: 'numeric' };
            var dateToString = date.toLocaleDateString("en-US", options);

            //reformat date and fill options with new date
            select.append( '<option value="'+dateToString+'">'+dateToString+'</option>' )
        } );
    } );
} ).DataTable( {
    ajax: {
        url: '/docs/accounting',
        dataSrc: ''
    },
    info: false,
    order: [[ 2, "asc" ]],
    paging: false,
    scrollX: true,
    scrollY: 500,
    searching: true,
    scrollCollapse: true,
    columns: [
        {
            'targets': 0,
            'searchable':false,
            'orderable':false,
            'className': 'dt-body-center',
            'render': function (data, type, full, meta){
                return '<input class="select" name="selection" type="checkbox">';
            },
            width: "5%"
        },
        {
            data: "id",
            width: "15%"
        },
        {
            data: "department",
            width: "25%"
        },
        {
            data: "date",
            //convert time from milliseconds to date
            render: function(jsonDate) {
                //convert numeric month into string
                var date = new Date(jsonDate);
                var options = { month: 'long', year: 'numeric' };
                var dateToString = date.toLocaleDateString("en-US", options);
                return dateToString;
            },
            orderable: false,
            width: "15%"
        },
        {
            data: "file",
            render: function( data ) {
                var message = "No file";
                return message
            },
            sortable: false,
            searchable: false,
            class: "dt-body-center",
            width: "15%"
        }
    ],


    initComplete: function () {
        //Drop down filter replaces the header title for Date
        this.api().columns([3]).every( function () {
            var column = this;
            var select = $('<select class="date-filter"><option value="">Date</option></select>')
                .appendTo( $(column.header()).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 ) {
                //convert milliseconds to date
                var date = new Date(d);
                var options = { month: 'long', year: 'numeric' };
                var dateToString = date.toLocaleDateString("en-US", options);

                //reformat date and fill options with new date
                select.append( '<option value="'+dateToString+'">'+dateToString+'</option>' )
            } );
        } );
    }

} );

$("#finance").click(function() {
    table.ajax.url('/docs/finance').load();
});

$("#accounting").click(function() {
    table.ajax.url('/docs/accounting').load();
});

$("#sales").click(function() {
    table.ajax.url('/docs/sales').load();
});

} );
```

kthorngren

You have duplicate threads running. Please keep the discussion to the other thread.

Kevin