Answers

• allan Posts: 63,531Questions: 1Answers: 10,474 Site admin

  November 2017

  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 Posts: 228Questions: 60Answers: 4

  November 2017

  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 Posts: 63,531Questions: 1Answers: 10,474 Site admin

  November 2017 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.
• classic12 Posts: 228Questions: 60Answers: 4

  November 2017

  Cheers

  Got it working.
• classic12 Posts: 228Questions: 60Answers: 4

  November 2017 edited November 2017

  Sorry wrong post
• classic12 Posts: 228Questions: 60Answers: 4

  November 2017 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
• kthorngren Posts: 21,343Questions: 26Answers: 4,954

  November 2017

  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 Posts: 21,343Questions: 26Answers: 4,954

  November 2017 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
• classic12 Posts: 228Questions: 60Answers: 4

  November 2017 edited November 2017

  Thanks Kevin,

  cooking with gas now......

  Cheers

  Steve Warby
• classic12 Posts: 228Questions: 60Answers: 4

  December 2017

  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 Posts: 63,531Questions: 1Answers: 10,474 Site admin

  December 2017

  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