When appending my footer (individual column searching) below my header the search function breaks

cadams77

I have successfully implemented the individual column searching into my gridview table. However, I want the search boxes to show up below the header, so the simplest solution seems to be appending it to the header. When I do that the boxes do indeed show up in the correct location, but the search function no longer works as it did. Instead, no matter what I type in the boxes it shows "No matching records found".

Sidenote: I would love to just make the search show up as a second header row, but I cannot figure out how to create a second header row for my gridview using vb.net that works in conjunction with datatables. So this seems to be my only option.

Script:

$(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 + '" />');
                $('#<%=ASPxGridView1.ClientID%> tfoot tr').appendTo('#<%=ASPxGridView1.ClientID%> thead');
            });

            var dtable = $('#<%=ASPxGridView1.ClientID%>').DataTable({
                colReorder: true, stateSave: true, orderCellsTop: 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();
                    }
                });
            });

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



            });

cadams77

I was able to get it working by changing "$('input', this.footer()).on('keyup change', function () {" to "$('input', this.header()).on('keyup change', function () {" and disabling column reorder, state save, and order cells top. I guess those three options are not compatible somehow?