Add search boxes to datatable. - Page 2

Add search boxes to datatable.

2»

Answers

  • allanallan Posts: 61,446Questions: 1Answers: 10,054 Site admin

    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.

  • classic12classic12 Posts: 228Questions: 60Answers: 4

    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( {
    
  • allanallan Posts: 61,446Questions: 1Answers: 10,054 Site admin
    Answer ✓

    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.

  • classic12classic12 Posts: 228Questions: 60Answers: 4

    Cheers

    Got it working.

  • classic12classic12 Posts: 228Questions: 60Answers: 4
    edited November 2017

    Sorry wrong post

  • classic12classic12 Posts: 228Questions: 60Answers: 4
    edited November 2017

    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

  • kthorngrenkthorngren Posts: 20,144Questions: 26Answers: 4,736

    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

  • kthorngrenkthorngren Posts: 20,144Questions: 26Answers: 4,736
    edited November 2017 Answer ✓

    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

  • classic12classic12 Posts: 228Questions: 60Answers: 4
    edited November 2017

    Thanks Kevin,

    cooking with gas now......

    Cheers

    Steve Warby

  • classic12classic12 Posts: 228Questions: 60Answers: 4

    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

  • allanallan Posts: 61,446Questions: 1Answers: 10,054 Site admin

    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

This discussion has been closed.