Add search boxes to datatable.

allan

Not in DataTables, but you can use a simple bit of jQuery to do it before you initialise the DataTable:

$('#myTable thead').append( '<tr> .... </tr>' );

You could clone the original row if you just want a copy.

classic12

Thanks Allan,

what is the exact code to copy the header and where do I add this.
Is this the correct place.

          $("#dtDataChanged").DataTable().destroy();
          $('#dtDataChanged').empty();
          $('#dtDataChanged thead').append( '<tr> .... </tr>' );
        tableDataChanged =  $('#dtDataChanged').DataTable( {

allan

To copy the header you would use $().clone():

$('#dtDataChanged thead tr').clone().appendTo( $('#dtDataChanged thead') );

and yes you would add it before the DataTable initialisation.

classic12

Cheers

Got it working.

classic12

Sorry wrong post

classic12

Hi Kevin,

I now have the second header working.

I've just noticed the search fields are not working.

What do I need to get these working again.

http://www.surplusanywhere.com/surplusAnywhere7

http://live.datatables.net/rumakepe/1/edit

kthorngren

Probably will need to change the event listener. Here is an example I have with a working complex header search input:
http://live.datatables.net/hepeqiro/1/edit

Kevin

kthorngren

I updated my other example:
http://live.datatables.net/rumakepe/2/edit

Note I added class="column_search" to the search inputs and changed the event handler to this:

    $( '#example thead'  ).on( 'keyup', ".column_search",function () {
   
        table
            .column( $(this).parent().index() )
            .search( this.value )
            .draw();
    } );

Kevin

classic12

Thanks Kevin,

cooking with gas now......

Cheers

Steve Warby

classic12

HI guys,

I have this working okay in my existing app.

In that app I make an ajax call and process the data.

getQuoteDetails=function(){
  req = Ajax("http://www.xxx.com/xxx.php", "GET", 'someData',quotesReturned);  
}                

 function quotesReturned() {
   dataChanged =[];
     if (req.status == 200) { //success
         
// Process the data and create 'dataChanged'



});
            
            //console.log(JSON.stringify(dataChanged));
            Button1.onclick();  
    }
  else {//'failure
    
    alert('error');
          htmResponse.innerHTML=req.err;
          }

        
}

I then build the datatable.

Button1.onclick=function(){

          $("#dtDataChanged").DataTable().destroy();
          $('#dtDataChanged').empty();
          tableDataChanged =  $('#dtDataChanged').DataTable( {
          data : dataChanged,

          etc etc )}

   $('#dtDataChanged thead tr').clone().appendTo( $('#dtDataChanged thead') );
 
$('#dtDataChanged thead tr:eq(1) th').each( function (e) {
// don't add search box to column 1    
        //console.log(e);
        if(e!==1){
        
        var title = $(this).text();
        if(e==0){ 
        $(this).html( '<input type="text" style="width: 60px;" id = "searchDeal" class="column_search form-control " placeholder="Search '+title+'" />' );
        }
        else{
        $(this).html( '<input type="text" class="column_search form-control " placeholder="Search '+title+'" />' );
        }
        }
       
    } );
    
        $( '#dtDataChanged thead'  ).on( 'keyup', ".column_search",function () {
   
        tableDataChanged
            .column( $(this).parent().index() )
            .search( this.value )
            .draw();
    } );

}

I am building another app and using the same logic.

When the app runs I see the cloned header but is disappears when the ajax data is returned.

The only difference is I make the ajax call while creating the datatables.

        get(allInvoices(){
        $("#dtAllInvoices").DataTable().destroy(); 
        $('#dtAllInvoices').empty();
        
        tableAllInvoices = $('#dtAllInvoices').DataTable( {        
ajax :       { 
                            'url' :  'http://www.xxx.com/xxx.php',
                            "type": "GET",
                                        
                          },

I have tried to add

$('#dtAllInvoices thead tr').clone().appendTo( $('#dtAllInvoices thead') );

in various places but can't get it to work.

I can't show a link because of sensitive data.

What is the correct placement of the piece of code.
1. The append header
2. Build the search boxes & 'keyup' code.

Cheers

Steve Warby

allan

When the app runs I see the cloned header but is disappears when the ajax data is returned.

That's because you do:

$('#dtDataChanged').empty();

then:

$('#dtDataChanged thead tr').clone().appendTo ...

Without seeing the full code I can't tell if you are using columns.title to set the column title text, but from your description I guess not. You are emptying the table and then trying to move parts around. Try doing the clone first.

Allan