Как отобразить пользовательские фильтры DataTable, которые выровнены друг с другом?

Question

У меня проблемы с пониманием того, как отобразить пользовательские фильтры, которые будут совмещены с фильтрами DataTable по умолчанию. Насколько я понимаю, HTML-код DataTable создается на лету через Javascript. У меня есть пользовательский @Html.DropDownList, который я хочу поместить слева от поля поиска, но не уверен, как это сделать, поскольку у меня нет HTML-кода для работы с данными. Как я могу иметь «Показать записи» «Поиск» и мой пользовательский показ @ Html.DropDownList в одной строке? Я также приложил скриншот, чтобы сделать изображение лучше.

<div class="table-responsive">
                        <div class="form-group">
                            @using (Html.BeginForm("Index", "Report_Completion_Status"))
                            {
                                @Html.DropDownList("SelectedReportCategory", new SelectList((System.Collections.IEnumerable)ViewData["Report_Category"], "ReportCategoryID", "ReportCategory"), "All", new { @class = "form-control", @onchange = "this.form.submit();", style = "width: 300px" })
                            }
                        </div>
                        <table class="table table-striped dom-jQuery-events table-xs table-hover" id="table_id" style="border-collapse: collapse !important;">
                            <thead>
                                <tr>
                                    <th style="padding-left: 5px">
                                        Name
                                    </th>
                                    <th class="text-center">
                                        Popularity
                                    </th>
                                    <th class="text-center">
                                        Change Log
                                    </th>
                                </tr>
                            </thead>
                            <tbody>
                                  <td>
                                  </td>
                                   <td>
                                  </td>
                                   <td>
                                  </td>
                            </tbody>
                        </table>
                    </div>

Answer 1

Используйте параметр DataTables dom , а затем добавьте HTML-код для раскрывающегося списка, используя одно из событий DataTables, например, событие draw ...

Поместите элемент управления длиной (l) и фильтр поиска (f) в строку flexbox перед таблицей перед отображением (t) ...

dom: '<"d-flex w-100"<l><"#mydiv.d-flex ml-auto text-right"f>>tips',

Как только наступит событие таблицы draw, добавьте HTML-код к "#mydiv" ...

var customFilter = "(HTML for dropdown here)";
table.on('draw', function () {
    customFilter.prependTo('#mydiv');
});

https://www.codeply.com/go/TjyjZT36yb