dataTables: Remove all but one of select inputs

Question

Hy,

The following multi filter select dataTable fits my project.

https://datatables.net/examples/api/multi_filter_select.html

However, I would like to remove all but one of the select inputs (at the bottom of the table) say "Office" select input in the above page and instead of blank should show a default caption like "Choose Office".

Since I am quite new to dataTables and also JS so doesn't know much about how to use dataTAbles API to customize it, so can anybuddy help me out.

Thanks dk

Answer 1

you just need to modify the given code slightly. Instead of foreaching every column do it with one column so:

/*this.api().columns().every( function () {
  var column = this;
} )*/
var column = this.api().column(2);

to remove the blank and display something like "Chose Office". You need to place the text between the closing and opening tags of option

var select = $('<select><option value="">YOUR TEXT HERE</option></select>')

here is the complete code and a jsfiddle

$(document).ready(function() {
  $('#example').DataTable({
    initComplete: function() {
      var column = this.api().column(2);
      var select = $('<select><option value="">Choose Office</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, text: d}));
      });
    }
  });
});

edit : I also was so free and replaced '<option value="'+d+'">'+d+'</option>' with $('<option>', {value: d, text: d}) to fix a xss vulnerability and allow values with " .