Need help using individual column searching with gridview

cadams77

I have successfully implemented individual column searching in the header by using some code from the comments on that page, but I still have a couple of questions.

1. How can I have the header text be displayed above the search boxes and still be usable by my column visibility button? Right now the header text is gone and replaced by the search and the column visibility button displays blank lines because of it.

2. What is the best way to set up my column width to have it adjust when users type in the search boxes or at least be big enough to see? I have some columns that have data going to multiple lines and this makes the search box tiny and you cannot see what you are typing because I am using columns.adjust. I still want it to adapt based on the data in the column, but I at least want to set a minimum width so the search boxes are bigger.

My full script:

$(document).ready(function () {

            // Setup - add a text input to each header cell
            $('#<%=ASPxGridView1.ClientID%> thead th').each(function () {
                var title = $('#<%=ASPxGridView1.ClientID%> thead th').eq($(this).index()).text();
                $(this).html('<input type="text" placeholder="Search ' + title + '" />');
            });

            //DataTable
            var dtable = $('#<%=ASPxGridView1.ClientID%>').DataTable({
                stateSave: true, orderCellsTop: true,
                dom: 'Bfrtilp',
                buttons: [
                    {
                        extend: 'colvis',
                        columns: ':not(:first-child)'

                    },
                    {
                        extend: 'csv',
                        text: 'Export',
                        title: 'Servers',
                        exportOptions: {
                            columns: ':visible',
                            columns: ':not(:first-child)'
                        }
                    }
                ],
                columnDefs: [
                    {
                        targets: [14, 15, 16, 17, 18, 19, 21, 22],
                        visible: false
                    },
                    {
                        targets: 0,
                        orderable: false
                    }                   
                ],
                "lengthMenu": [[5, 100, 500, -1], [5, 100, 500, "All"]],
                "scrollX": true

            });


            // Apply the search
            dtable.columns().eq(0).each(function (colIdx) {
                $('input', dtable.column(colIdx).header()).on('keyup change', function () {
                    dtable
                        .column(colIdx)
                        .search(this.value)
                        .draw();
                });

                $('input', dtable.column(colIdx).header()).on('click', function (e) {
                    e.stopPropagation();
                });
            });


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


        });