Answers

• mmcnair80 Posts: 83Questions: 21Answers: 7

  August 2017

  This is how I create a search box in the footer that has a place holder of the title from the header

          // Setup - add a text input to each footer cell
          // This is placed right be fore the *var table = $('DateTable').DataTable*
          $('#DataTable tfoot th').each(function ()           //creates the search bar as the footer
          {
              var title = $(this).text();
              $(this).html('<input type="text" placeholder="Search ' + title + '" />');
          });
              
              //This part is where I setup the search I have it after all the rest of the setting in the *var table = $('DateTable').DataTable*
              initComplete: function ()                       //sets the search
              {
                  var api = this.api();
  
                  // Apply the search
                  api.columns().every(function ()
                  {
                      var that = this;
  
                      $('input', this.footer()).on('keyup change', function (e)
                      {
                          if (that.search() !== this.value & e.keyCode == 13) //you have to hit enter for the search to start
                          {
                              that
                                .search(this.value)
                                .draw();
                          }
                      });
                  });
              }