JQuery DataTable Column Filter Dropdown

<table id="exampleTBL" style="width:100%" class="table table-hover table-striped">
    <thead>
        <tr style="text-align: left">
            <th>
                Column Name
            </th>
            <th>
                Column Name
            </th>
            <th>
               Column Name
            </th>
            <th>
                Column Name
            </th>
            <th>
                Column Name
            </th>
            <th>
                Column Name
            </th>
            <th>
                Column Name
            </th>
            <th>
                Column Name
            </th>
            <th>
                Column Name
            </th>
        </tr>
    </thead>
</table>
<div style="text-align:center" id="Spinner">
    <i class="fas fa-spinner fa-pulse fa-5x fa-fw text-info"></i>
</div>
//###########################################################################
var table = $('#invoicesTBL').DataTable({
        ajax: {
            url: "/Controller/Action",
            beforeSend: function (xhr) {
                xhr.setRequestHeader('Authorization', 'bearer ' + localStorage.getItem("tokenKey"));
                $("#Spinner2").show();
            },
            dataSrc: '',
            method: 'Get',
            dataType: 'json',
        },
        paging: true,
        sort: true,
        search: true,
        //data: data,
        autoWidth: true,
        stripeClasses: false,
        responsive: true,

        //rowGroup: {
        //    dataSrc: 'InvoiceNumber',
        //    startRender: function (rows, group) {
        //        return group + ' ' + rows.data()[0].NetDueDate.Display,
        //            group + ' ' + rows.data()[1].ColumnName.Display,
        //            group + ' ' + rows.data()[2].ColumnName.Item.Id,
        //            group + ' ' + rows.data()[3].ColumnName,
        //            group + ' ' + rows.data()[4].ColumnName
        //            group + ' ' + rows.data()[5].ColumnName,
        //            group + ' ' + rows.data()[6].ColumnName.Display,
        //            group + ' ' + rows.data()[7].ColumnName.Display

        //    }
        //},
        columns: [
            {
                'data': 'ColumnName',
                'render': function (InvoiceNumber, type, full, meta) { return '<a style="text-decoration: none;" href= "/Controller/ActionName?InvoiceNumber=' + InvoiceNumber + '" >' + InvoiceNumber + '</a>' }
            },
            { 'data': 'ColumnName.Display' },
            { 'data': 'ColumnName.Display' },
            { 'data': 'ColumnName[].Item.ItemCode' },
            { 'data': 'ColumnName' },
            { 'data': 'ColumnName' },
            { 'data': 'ColumnName' },
            { 'data': 'ColumnName.Display' },
            { 'data': 'ColumnName.Display' }
        ],

        initComplete: function () {
            $("#Spinner2").hide();
            this.api().columns([6]).every(function () {
                var column = this;
                var select = $('<select><option value=""> -- Select -- </option></select>')
                    .appendTo($(column.header()))
                    .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>')
                });
            });
        }
    });