jquery - DataTables Filter DropDown Not Showing

Question

I am trying to implement colum filtering via dropdown, I already tried different methods but non worked for me. So I went back with the basic impplementation that uses initComplete.

    data = submission.responseJSON.transactions
    console.log(data)
    var tableCustomElements = $('#table-select');
    if (tableCustomElements.length) {
        var table = tableCustomElements.DataTable({
            'data': data,
            "columns": [{"title": "Date"},
                {"title": "Logs"},
                {"title": "Account"},
            'language': {
                'search': '',
                'searchPlaceholder': 'Search'
            },
            'order': [2, 'asc'],
            'dom': 'ft<"footer-wrapper"l<"paging-info"ip>>',
            'scrollCollapse': true,
            'pagingType': 'full',
            'responsive': true,
            'initComplete': function () {
                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>')
                    });

                });

            }
        });

        $("th.sorting, th.sorting_asc, th.sorting_desc").css({
            'background-image': 'none',
            'cursor': 'default'
        });

        $('#table-select_wrapper').on('change', 'input[type=checkbox]', function (e) {
            var parentTR = $(this).parentsUntil('table').closest('tr');
            parentTR.toggleClass('selected', this.checked);
        });


        $('#table-select_wrapper').find('.select-all').on('click', function () {
            // Check/uncheck all checkboxes in the table
            var rows = table.rows({'search': 'applied'}).nodes();
            $('input[type="checkbox"]', rows)
                .prop('checked', this.checked)
            $(rows).toggleClass('selected', this.checked);
        });


    }

Things I tried:

https://www.datatables.net/release-datatables/examples/api/multi_filter_select.html http://live.datatables.net/tamixov/1/edit

But I couldnt get it show, in the logs I didnt get any error, and when I tried the datatable debugger it found no errors.

Ofcourse I already put in the needed jquery libraries as directed, but still it wont show.

Have you encountered this issue before? Any other methods you tried to filter it? I want to be able to filter via account.

question from:https://stackoverflow.com/questions/66056917/datatables-filter-dropdown-not-showing

Answer 1

Waitting for answers