DataTables Кнопка + Колонок фильтрация с раскрывающимся

Question

Я в настоящее время есть DataTable, который имеет загрузить данные кнопки в формате, который я ищу:

$(document).ready(function() { 
$('#dataTables-example').DataTable({ 
    dom: 'Bfrtip', 
    buttons: [ 
     'copyHtml5', 
     'excelHtml5', 
     'csvHtml5', 
     'pdfHtml5' 
    ] 
    }); 
}); 

Однако, я хочу, чтобы иметь возможность фильтровать столбцы с выпадающим меню в сноске - точно, как в примере, в этой ссылке:

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

код инициализации для этого является:

$(document).ready(function() { 
    $('#dataTables-example').DataTable({ 

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

Я хочу объединить эти две функции - фильтр столбцов и параметры загрузки данных. Я пытался двигаться вокруг кнопки и йот сниппета в приведенном выше коде:

dom: 'Bfrtip', 
    buttons: [ 
     'copyHtml5', 
     'excelHtml5', 
     'csvHtml5', 
     'pdfHtml5' 
    ] 
    }); 

Но у меня не было никакой удачи при получении его правильно (или вообще) отображения.

Answer 1

У меня был инженерный прорыв и сделал очевидную вещь, добавлены настройки DOM перед:

initComplete: function(){....... 

И это сработало.

Полная функция:

$(document).ready(function() { 

    $('#dataTables-example').DataTable({ 
    dom: 'lBfrtip', 
    buttons: [ 
       'copyHtml5', 
       'excelHtml5', 
       'csvHtml5', 
       'pdfHtml5' 
       ], 

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

});