Individual column searching in header

T_Tronix

I have 2 questions:

1) How can I add the Individual column searching on the header of the first column only right under its title? I can add it to the header but I lose the title when doing so.
2) Can I reset the Individual column searching to blank when the user types anything into the main search box of the table (the one located at the top right of the table)?

mmcnair80

This is how I create a search box in the footer that has a place holder of the title from the header

        // Setup - add a text input to each footer cell
        // This is placed right be fore the *var table = $('DateTable').DataTable*
        $('#DataTable tfoot th').each(function ()           //creates the search bar as the footer
        {
            var title = $(this).text();
            $(this).html('<input type="text" placeholder="Search ' + title + '" />');
        });
            
            //This part is where I setup the search I have it after all the rest of the setting in the *var table = $('DateTable').DataTable*
            initComplete: function ()                       //sets the search
            {
                var api = this.api();

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

                    $('input', this.footer()).on('keyup change', function (e)
                    {
                        if (that.search() !== this.value & e.keyCode == 13) //you have to hit enter for the search to start
                        {
                            that
                              .search(this.value)
                              .draw();
                        }
                    });
                });
            }