Need to update the select box in footer as filter option

shahalom

Hi,
Consider the following code

$(table).dataTable({
    ...
    "footerCallback": function() {
            var api = this.api();
            if (api.context[0].nTFoot !== null) {
                api.columns().every(function() {
                    var column = this;
                    if (column.index()>1) {
                        var select = $('<select><option value=""></option></select>');

                        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) {
                            var val = ($(d).is('*')) ? $(d).html() : d;
                            select.append('<option value="' + val + '">' + val + '</option>');
                        });
                    }
                });
            }
        }
});

My datatable contain select filter box on each column in the footer. It is good that the filter select boxes are updating on paginate the table. Problem is when use these filter select boxes to redraw the datatable the filter boxes are also updating with updated data of the datatable. How to fix it?