Bootstrap 4 Column Specific Drop Down filter

speego

Hello,

I am using Bootstrap 4 template, i am looking for a drop down filter in Column 2 & 4 if possible on top. I have followed a few responses in this forum and online, but looks the version i am running (with DOM) VS what i found are not compatible and could not make it work.

I am a beginner on this, any help will be appreciated

Thanks,
Enrique

    $(function () {
        $('#myTable').DataTable({
            responsive: true,
            dom: 'lBfrtip',
            buttons: [
                'copy', 'csv', 'excel', 'pdf', 'print'
            ]
        });
        $('.buttons-copy, .buttons-csv, .buttons-print, .buttons-pdf, .buttons-excel').addClass('btn btn-primary mr-1');
    });

colin

You can do something like this, I think it's doing what you want,

Colin

speego

Thanks!!!!

OSF

The Fiddle example looks good, but what can i do, if i send a Ajax refresh on the Table ($('#example').DataTable().ajax.reload();). Looks like the DropDown Filters still hold the old Data. ?

colin

Yep, they would need - you would need to remove the options and rebuild the dropdown with the new table data. You could do that in an xhr perhaps.

Colin

OSF

Thanks @colin for your fast answer!

I will look forward to xhr Event's. Problem, i have not access to this.api() and columns like:

                        this.api().columns([4, 5, 6]).every(function () {
                            var column = this;
                            var select = $('<select style="width: 100%"><option value=""></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>')
                            });
                        });

OSF

@colin and other with the same issue.

Info: Filter remove need separate js:
//cdn.datatables.net/plug-ins/1.10.21/api/fnFilterClear.js

I resolve the issue with follow code:

In <script> Tag:

                    var myCallback = function () {
                        $('.MyFilter').remove();
                        $('#example').dataTable().fnFilterClear();
                        $('#example').dataTable().api().columns([4, 5, 6]).every(function () {
                            var column = this;
                            var select = $('<select class="btn btn-primary MyFilter" style="width: 100%"><option value=""></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>')
                            });
                        });
                    };

In Datatables:
"initComplete": myCallback

After reload table
$('#example').DataTable().ajax.reload(myCallback);