How to change DataTable so that the column filters are in the thead on a new row and not underneath

shaneamondos

I have looked everywhere and have not found a solution that helps in my situation.

data: dataSet,
columns: [
      { title: "Hidden col" },
      { title: "Hidden col" },
      { title: "col1" },
      { title: "col2" },
      { title: "col3" },
      { title: "col4" }
],
aoColumnDefs: [
      { iDataSort: 0, aTargets: [ 4 ] },
      { iDataSort: 1, aTargets: [ 5 ] },
      { bVisible: false, aTargets: [0,1] }
],

The source for my data is a json object and currently i am looping through the column headers to make a footer with an input in each and then using the following code:

table.columns().every( function () {
            var that = this;
            $( 'input', this.footer() ).on( 'keyup change', function () {
                if ( that.search() !== this.value ) {
                    that
                        .search( this.value )
                        .draw();
                }
            } );
        } );

This searches the table fine but it does not solve my problem as the column filters being on top of the table is a must. I can make the tfoot positioned absolute top but in a lot of cases this isnt a very sound solution and some of my tables have scrollY set and this causes issues.

tangerine

https://datatables.net//forums/discussion/comment/90349/#Comment_90349

That doesn't answer your question, but it will help simplify your code by spelling out the difference between "columns" and "aoColumnDefs", which should not be used together.

shaneamondos

Thanks for the advice!