Moving Individual Column Search Footer to Header

cadams77

Right now I have it working so that the column search appears at the bottom of the datatable as a footer and the search function works. However, I would like to append that footer row to be below the header and retain the search functionality. I have been able to move the row to the correct place, but when I do the search function breaks. What am I doing wrong?

Full working script with search as footer:

    $('#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");
            }
        });
        });

I have tried adding a line below "$('#<%=ASPxGridView1.ClientID%> tfoot tr td').each(function () {", which does append the row below the header row, but it breaks the search and says "No matching records found". Not sure if I am just putting it in the wrong place or what.

Added line:

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

kthorngren

Maybe my example will help:
http://live.datatables.net/giharaka/1/edit

Also you probably will want to use orderCellsTop to move the sorting function to the top header row.

Kevin

cadams77

Hey Kevin,

I see that the main difference is changing "tfoot tr td" to "thead tr:eq(1) th", however, when I try that it does not seem to work. The search boxes are no longer at the footer, but they are not below the header either. They just kind of disappear. I am already using the orderCellTop option in my posted code as well.

If I change it to just "thead tr:eq(0) th" then the search boxes replace the header text for each row and retain search functionality, but I want to have both the header text and the search boxes. So it just isn't inserting it into a new row.

I'm connecting to a gridview instead of an html table if that makes any difference.

kthorngren

Did you add a second header row to your table?

Kevin

cadams77

@kthorngren I am trying, but I don't know how exactly...

kthorngren

The easiest way is to add it in the HTML like I have in the example I posted. This is in my example:

        <thead>
          <tr>
            <th>Name</th>
            <th>Position</th>
            <th>Office</th>
            <th>Age</th>
            <th>Start date</th>
            <th>Salary</th>
          </tr>
          <tr>
            <th>Name</th>
            <th>Position</th>
            <th>Office</th>
            <th>Age</th>
            <th>Start date</th>
            <th>Salary</th>
          </tr>
        </thead>

Kevin

cadams77

@kthorngren Well, I am using an asp gridview table, so I think I have to do it a bit differently.