Search and Filter ontop of jQuery datatable

bepster

Evening All,

I'm using this jQuery example from Datatables

https://www.datatables.net/examples/api/multi_filter.html

I would like to place the Search Boxes that currently appear on the bottom of the page underneath the headings e.g. so I still have the bold headings that have the ability to sort but below are the filter boxes where I can filter if needs be.

There are some comments on the page with JavaScript claiming to work however I just cant get anything to work exactly how I would like it!?!

Any help would be much appreciated!!!

bepster

For anybody interested:

JAVA SCRIPT

'''
// Setup - Create table header with text + input type at top of page
$('#example thead th').each( function () {
var title = $(this).text();
$(this).append( '<input type="text" class="filter_box" placeholder="Filter" />' );
} );

// DataTable
var table = $('#example').DataTable();

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

            $( 'input' ).on( 'click', function(e) {
        e.stopPropagation();
    } );

    $( 'input', this.header() ).on( 'keyup change', function () {

        if ( that.search() !== this.value ) {
            that
                .search( this.value )
                .draw();
        }
    } );
} );

} );
'''

HTML

'''

<

table width="100%" class="results compact stripe hover row-border order-column" id="example">
<thead class="results_thead">
<tr>
<th>Product</th>
<th>Product Group</th>
<th>Description</th>
<th>Sage Rev</th>
<th>Drawing Rev</th>
<th>Drawing</th>
<th>Inspection</th>
<th>AI</th>
<th>IN</th>
<th>SOP</th>
<th>Email</th>
<th>Change Request</th>
</tr>
</thead>
<tbody class="results_tbody">
'''

All of the above gave me required effect needed