Datatables, initComplete - выберите заголовок, а не нижний колонтитул

Question

У меня есть этот код:

initComplete: function () {
    this.api().columns().every(function () {
      var column = this;
      var select = $('<select style="width: 100%;"><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>')
      });
    });
}

Это тест того, что я делаю: Здесь я тестирую, как это сделать https://jsfiddle.net/pmiranda/nrzpq5g2/

Что я 'Я пытаюсь добавить фильтры каждого столбца сверху, а не в нижний колонтитул . Если я установлю .appendTo($(column.header()).empty()), у меня может быть фильтр сверху, но я потеряю свой фактический заголовок:

https://jsfiddle.net/pmiranda/y1s6auj4/

Есть идеи?

Answer 1

Я думаю, вы хотите это . Когда вы добавили выбор, вы очистили содержимое с помощью

.appendTo( $(column.header()).empty() )

. Вам просто нужно было избежать этого действия:

.appendTo( $(column.header()) )

РЕДАКТИРОВАТЬ после комментария:

Чтобы избежать срабатываниясортировка, вы можете предотвратить распространение клика (например, здесь )

.on( 'click' , function (evt){
     evt.stopPropagation();
 })