bepster bepster - 1 year ago 143
Java Question

jQuery DataTables JavaScript move search boxes

Evening All,

I'm using this jQuery example from Datatables

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!!!

Answer Source

The following fiddle has minimal changes in an attempt to achieve what you describe in your question (moving the input sort boxes below the table header titles):

The javascript changes featured can be summarized as:

$(document).ready(function() {
// Setup - add a text input to each footer cell
$('#example thead th').each( function () {
    var title = $(this).text();
    $(this).append( '<input type="text" placeholder="Search '+title+'" />' );
} );

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

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

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

    $( 'input', this.header() ).on( 'keyup change', function () {
        if ( !== this.value ) {
                .search( this.value )
    } );
} );
Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download