Column searching on Top

capiono

I'm using the example provided here, I was able to setup the search input.

How do I move the search input--currently in the footer, to the header?

tangerine

.appendTo( $(column.footer()).empty() )

Put "header" instead of "footer".

capiono

I did that, it replaces the column header text. I want It to show the inputs under the column header text

<table class="table table-striped table-condensed" id="document">
                    <thead>
                        <tr>
                            <th width="15%">Form</th>
                            <th width="25%">Effective Date</th>
                            <th width="25%">Type</th>
                            <th width="25%">Side</th>
                            <th width="10%">Download</th>
                        </tr>
                    </thead>
                    <tbody>
                        @foreach (var document in Model.Documents) {
                            <tr>
                                <td>@document.Form</td>
                                <td>@document.Date</td>
                                <td>@document.Type</td>
                                <td>@document.Side</td>
                                <td>@document.File</td>
                            </tr>
                        }
                    </tbody>
                </table>

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

tangerine

Drop the ".empty())".

aide_s

it works, but if you have sortable columns, the dropdown will sort the columns instead of open the options