Answers

• allan Posts: 63,523Questions: 1Answers: 10,473 Site admin

  February 2018

  If you don't want the search inputs in a footer element, then yes, you can still use that approach. You'd just insert the filters wherever it is that you want them.

  Allan
• ankush02 Posts: 6Questions: 1Answers: 0

  February 2018

  Thnanks for quick reply but could you please direct me to some link?
  I need search input box appear for each dynamically generated column.its ok if its on top or footer..i need it for each column....can this be configured at "columns": ColReport level or anything else need to be done..please advice
• allan Posts: 63,523Questions: 1Answers: 10,473 Site admin

  February 2018

  If you do want it in the footer, your best bet is to create a footer in the table before you initialise the DataTable:

  var row = $('#myTable thead tr').clone();
  $('#myTable').append( $('<tfoot/>').append( row ) );
  

  Allan
• ankush02 Posts: 6Questions: 1Answers: 0

  February 2018 edited February 2018

  I have added like below and it manage to get search bar, but the moment i type anything for search, it always shows zero result . and it did this very fast.
  also footer gets disappear after search....unlike in demo where it stays..

   var rreport = $("#rreport ").DataTable({
       "data": RList,
       "lengthMenu": [
           [25, 50, -1],
           [25, 50, "All"]
       ],
       "scrollY": "800px",
       "scrollX": "900px",
       "scrollCollapse": true,
       "dom": '<"top"Bf>rt<"bottom"lip><"clear">',
       "buttons": [{
           "extend": "collection",
           "text": "Export",
           "buttons": ["excelHtml5"]
       }],
       "columns": ColReport
   });
   var row = $('#rreport thead tr').clone();
   $('#rreport ').append($('<tfoot/>').append(row));
  
  
   $('#rreport tfoot th').each(function() {
       var title = $(this).text();
       $(this).html('<input type="text" placeholder="Search ' + title + '" />');
   });
  
  
   // Apply the search
   rreport .columns().every(function() {
       var that = this;
  
       $('input', this.footer()).on('keyup change', function() {
           if (that.search() !== this.value) {
               that
                   .search(this.value)
                   .draw();
           }
       });
   });
  
  
• ankush02 Posts: 6Questions: 1Answers: 0

  February 2018

  
  this seems to be issue search box coming inside table..what I am doing wrng..

  dd.PNG 7.4K
• kthorngren Posts: 21,343Questions: 26Answers: 4,954

  February 2018

  As Allan suggested you need to put these two lines before you initialize Datatables:

  var row = $('#rreport thead tr').clone();
  $('#rreport ').append($('<tfoot/>').append(row));
  

  Kevin
• ankush02 Posts: 6Questions: 1Answers: 0

  February 2018 edited February 2018

  Hi Kevin ..Earlier I did that only but if I use these two line before initialization than search box at bottom wont appear, hence i added after initialization...

  i have following markup in html

   <table id="rreport " class="table table-striped table-bordered" cellspacing="0" width="100%">
  
          </table>
  
  
• kthorngren Posts: 21,343Questions: 26Answers: 4,954

  February 2018 edited February 2018 Answer ✓

  Take a look at this example:
  http://live.datatables.net/gojebeco/1/edit

  Currently its built with your code on a pre-existing table. Open the console and when you perform a column search you see the word "search" output 6 times; one for each column.

  If you comment the two lines in question and remove the comments from the first two lines and do the same test you will see the search works. Did this just to show you that the footer needs to be built before Datatables initialization.

  Now the question is how you can use the data in ColReport to build the header and footer before initializing Datatables. Can you loop through ColReport and pull you the column title or data values to build the thead?

  Kevin
• ankush02 Posts: 6Questions: 1Answers: 0

  February 2018

       ColReport.forEach( function (arrayItem)
              {
                 var x = arrayItem.data;
                  strth=strth+"<th>"+x+"</th>";
             });
              
              var myTable = $("#roomreport");
              $("<thead><tr>"+strth+"</tr></thead>").appendTo(myTable);
              
              var row = $('#roomreport thead tr').clone();
              $('#roomreport').append( $('<tfoot/>').append( row ) );
              
                      
              $('#roomreport tfoot th').each( function () {
          var title = $(this).text();
          $(this).html( '<input type="text" placeholder="Search '+title+'" />' );
      } );
              
              var roomreport = $("#roomreport").DataTable({
                  "data": RoomList,
                  "lengthMenu": [
                      [25, 50, -1],
                      [25, 50, "All"]
                  ],
                  "scrollY": "800px",
                  "scrollX": "900px",
                  "scrollCollapse": true,
                  "dom": '<"top"Bf>rt<"bottom"lip><"clear">',
                  "buttons": [{
                      "extend": "collection",
                      "text": "Export",
                      "buttons": ["excelHtml5"]
                  }],
                  "columns": ColReport
              });
               
       
              // Apply the search
      roomreport.columns().every( function () {
          var that = this;
   
          $( 'input', that.footer() ).on( 'keyup change', function () {
              if ( that.search() !== this.value ) {
                  that
                      .search( this.value )
                      .draw();
              }
          } );
      } );
              
  

  This worked .Thanks Guys!!