Задать местозаполнитель для фильтра столбца DataTables

Question

Я использую DataTables для отображения списка «Провайдеров»

Я включил модуль фильтрации столбцов, и он отображает поля «Выбрать» над столбцами.

Как мне показать Заголовки таблицы в качестве заполнителя для выбора?

Вот снимок экрана текущего выбора:

Вот результат, который я получил после

Вот мой код

<script>
    $(document).ready(function() {
    $('#Table').DataTable( {
        "pagingType": "full_numbers",
        "lengthMenu": [[10, 25, 50, -1], [10, 25, 50, 100, "All"]],
        "lengthChange": false,
        language: { 
            search: "",
            searchPlaceholder: "Search Providers",
        },
        "ordering": false,
        initComplete: function () {
            this.api().columns().every( function () {
                var column = this;
                var select = $('<select><option value=""></option></select>')
                    .appendTo( $(column.header()).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>' )
                } );
            } );
        }
    } );
    $('div.dataTables_filter input').addClass('form-control');
    $('div.dataTables_filter input').placeholder = "Search Providers";
    $( "select" ).addClass( "form-control" );
} );
</script>

<div class="kt-container kt-grid__item kt-grid__item--fluid">
    <div class="row">
        <div class="col-md-12">        
            <div class="kt-portlet">
                <div class="kt-portlet__body">
                    <div class="kt-section">
                        <div class="kt-section__content">
                            <table class="table" id="Table">
                                <thead>
                                    <tr>
                                        <th>Provider</th>
                                        <th>Type</th>
                                        <th>Location</th>
                                        <th>Phone</th>
                                    </tr>
                                </thead>
                                <tbody>
                                    {% for item in records %}
                                        <tr>
                                            <td>{{ item.title }}</td>
                                            <td>{{ item.type }}</td>
                                            <td>
                                                {{ item.city }}
                                            </td>
                                            <td>{{ item.phone }}</td>
                                        </tr>
                                    {% endfor %}
                                </tbody>
                            </table>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

Answer 1

Этот подход использует следующую строку для получения значения заголовка столбца:

var colTitle = this.header().innerHTML;

Затем он помещает это значение в элемент управления select, используя метод / трюк-заполнитель:

var select = $('<select><option value="" disabled selected>' + colTitle + '</option></select>')

Таким образом, соответствующий сегмент из вашего вопроса в конечном итоге выглядит следующим образом:

<script>
    $(document).ready(function() {
    $('#Table').DataTable( {
        "pagingType": "full_numbers",
        "lengthMenu": [[10, 25, 50, -1], [10, 25, 50, 100, "All"]],
        "lengthChange": false,
        language: { 
            search: "",
            searchPlaceholder: "Search Providers",
        },
        "ordering": false,
        initComplete: function () {
            this.api().columns().every( function () {
                var column = this;
                var colTitle = this.header().innerHTML;
                var select = $('<select><option value="" disabled selected>' + colTitle + '</option></select>')
                    .appendTo( $(column.header()).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>' )
                } );
            } );
        }
    } );
    $('div.dataTables_filter input').addClass('form-control');
    $('div.dataTables_filter input').placeholder = "Search Providers";
    $( "select" ).addClass( "form-control" );
} );
</script>

В результате вы получаете следующее поведение: текст заполнителя является частью раскрывающегося списка в верхней части списка, но затенено - и его нельзя выбрать.

Указывает на примечание:

1) Если вы хотите видеть «Имя поставщика» вместо «Поставщик» в первом столбце, выберите элемент управления, затем измените значение в заголовке связанной таблицы:

<th>Provider</th>

2) Я не знаю, как это взаимодействует с тем, как вам нужно заполнить остальные значения в каждом раскрывающемся списке (мой автономный тестовый файл, не использующий bootstrap) - поэтому заранее приносим свои извинения, если он не поможет вам полностью достичь желаемого.