jquery - 将数据表单个列搜索页脚移动到页眉

Question

现在我可以正常工作，以便列搜索作为页脚显示在数据表的底部，并且搜索功能可以正常工作。但是，我想将该页脚行附加到标题下方并保留搜索功能。我已经能够将行移动到正确的位置，但是当我执行搜索功能时，它会中断。我做错了什么？

完整的工作脚本，以搜索作为页脚:

    $('#divLoading').show();

    $(document).ready(function () {

    $('#<%=ASPxGridView1.ClientID%> tfoot tr td').each(function () {
            var title = $('#<%=ASPxGridView1.ClientID%> thead th').eq($(this).index()).text();
        $(this).html('<input type="text" placeholder="Search ' + title + '" />');
        });

        var dtable = $('#<%=ASPxGridView1.ClientID%>').DataTable({
            colReorder: true, stateSave: true, orderCellsTop: true,
            dom: 'Bfrtilp',
            buttons: [
                {
                    extend: 'colvis',

                },
                {
                    extend: 'csv',
                    text: 'Export',
                    title: 'Applications',
                    exportOptions: {
                        columns: ':visible',                                                                        
                        columns: ':not(:first-child)'
                    }
                }
            ],
            columnDefs: [
                {
                    targets: [7, 8, 9, 10],
                    visible: false
                },
                //{
                //    targets: 0,
                //    orderable: false
                //}
            ],
            "lengthMenu": [[5,100, 500, -1], [5,100, 500, "All"]],
            "scrollX": true

        });

        dtable.columns().every(function () {
            var that = this;

            $('input', this.footer()).on('keyup change', function () {
                if (that.search() !== this.value) {
                    that
                        .search(this.value)
                        .draw();
                }
            });
        });
    $('#divGrid').show();
    $('#divLoading').hide();


    dtable.columns.adjust().draw();

        $('#<%=txtSearch.ClientID%>').focusTextToEnd();
        $('#<%=txtSearch.ClientID%>').keypress(function (e) { if (e.which == 13) { e.preventDefault(); $('#<%=btnSearch.ClientID%>').click(); return false; } });

        $(".buttons-colvis").click(function () {
            if ($(".dt-button-collection").height() > 350) {
                $(".dt-button-collection").css("height", "350px");
                $(".dt-button-collection").css("overflow-y", "visible");
            }
        });
        });

我尝试在“$('#<%=ASPxGridView1.ClientID%> tfoot tr td').each(function () {”下面添加一行，该行确实会在标题行下方附加行，但它会中断搜索并显示“未找到匹配的记录”。不确定我是否只是将其放在错误的位置或什么。

添加行:

$('#<%=ASPxGridView1.ClientID%> tfoot tr').appendTo('#<%=ASPxGridView1.ClientID%> thead');

Answer 1

没有直接的方法可以实现这一点，

但是你可以尝试下面的方法。

HTML

<table id="example" class="display" style="width:100%">
        <thead>
            <tr>
                <th>Name</th>
                <th>Position</th>
                <th>Office</th>
                <th>Age</th>
                <th>Start date</th>
                <th>Salary</th>
            </tr>
        </thead>
        <thead>
            <tr>
                <th></th>
                <th></th>
                <th></th>
                <th></th>
                <th></th>
                <th></th>
            </tr>
        </thead>

        <tbody>
            <tr>
                <td>Tiger Nixon</td>
                <td>System Architect</td>
                <td>Edinburgh</td>
                <td>61</td>
                <td>2011/04/25</td>
                <td>$320,800</td>
            </tr>
            <tr>
                <td>Garrett Winters</td>
                <td>Accountant</td>
                <td>Tokyo</td>
                <td>63</td>
                <td>2011/07/25</td>
                <td>$170,750</td>
            </tr>
            <tr>
                <td>Ashton Cox</td>
                <td>Junior Technical Author</td>
                <td>San Francisco</td>
                <td>66</td>
                <td>2009/01/12</td>
                <td>$86,000</td>
            </tr>
        </tbody>
</table>

JS

$(document).ready(function() {
    $($('#example thead')[1]).find('th').each( function () {
        var title = $(this).text();
        $(this).append( '<input type="text" placeholder="Search '+title+'" />' );
    } );

    // DataTable
    var table = $('#example').DataTable();

    // Apply the search
    table.columns().every( function () {
        var that = this;


        $($( '#example input')[that[0][0]]).on( 'keyup change', function () {
            if ( that.search() !== this.value ) {
                that
                    .search( this.value )
                    .draw();
            }
        });

    } );

})