Show individual column search (select:input) list on click of respective header

hitler9667

I am beginner to datatables and jQuery. I want to show the filter select list on click of respective header and keep hidden otherwise. I tried the below code, but it doesnt seem to be working.

Also I wanted to change the list contents dynamically of other dropdowns when one is selected. For example, in web page on selecting Airi Satau, I can see all the position in dropdown instead of only Accountant. Please help. Thanks!

initComplete: function () {
var api = this.api();
api.$('th').on('click', 'th', function () {
e.preventDefault();
debugger;
api.columns([0, 1]).every(function () {
var column = this;
var select = $('<select class="btn-primary" style="border-radius:5px"><option value="">All</option></select><br><br>')
.prependTo($(column.header()))
.on('change click', function (e) {
e.stopPropagation();
var val = $.fn.dataTable.util.escapeRegex(
$(this).val()
);

                    column
                        .search(val ? '^' + val + '$' : '', true, false)
                        .draw();
                });
            debugger;
            column.data().unique().sort().each(function (d, j) {
                select.append('<option value="' + d + '">' + d + '</option>')

            });
        });
    })},