Question

I am trying create a search box which will search datatables.

The search box will be in the header for all pages for the site. When the user types in to the search box and then submits it will query the datatables.

I did find this:

<input type="text" id="myInputTextField">

oTable = $('#myTable').dataTable();
$('#myInpuTextField').keypress(function(){
      oTable.fnFilter( $(this).val() );
})

But I was unsure how to implement this as the search box will be in the header.

Any help advice would be appreciated.

Answer 1

That code is correct. But everything depends on your setup. fnFilter takes only one required parameter which is the text to search. If you specify a second parameter you will filter only one column, otherwise it will search the textin all the table. You can of course filter more than one table at once

//initialize table 1
var oTable = $('#myTable').dataTable();
//initialize table 2
var oTable2 = $('#myTable2').dataTable();
$('#myInpuTextField').keypress(function(){
      //filter table one
      oTable.fnFilter( $(this).val() );
      //filter table two
      oTable2.fnFilter( $(this).val() );
})

EDIT – for your last comment. To do that you must post the value to the server with a form.
Then you “preload” the posted value in the input field and call fnFilter. Something like (in PHP)

<?php
$postedSearch = $_POST['posted'];
?>
<script type="text/javascript">
$(function(){
  var oTable = $('#idOfTable').dataTable();
  if($('#myInputTextField').val() !== ''){
     oTable.fnFilter($('#myInputTextField').val());
  }
}())
</script>
<input type="text" id="myInputTextField" value="<?php echo $postedSearch ?>" />