title: Jquery Datatables Individual column searching
body: <p>I am trying to apply <a href="https://datatables.net/examples/api/multi_filter_select.html" rel="nofollow noreferrer">Individual column searching (select inputs)</a> for Datatables plugin in Jquery. I am using serverside processing, the data is loaded correctly from SQL Server into my table but when I want to select an input to filter a column based on that value, the filter is not working as you see <a href="https://i.stack.imgur.com/IrmtO.png" rel="nofollow noreferrer">here</a>. 
  When I select a country for example Austria, the data is not filtered to Austria.
  Here is my index page </p>
  
  <pre><code>&lt;html&gt;
   &lt;head&gt;
    &lt;meta http-equiv="Content-Type" content="text/html" charset=utf-8" /&gt;
    &lt;title&gt; Datatables Individual column searching using PHP Ajax Jquery &lt;/title&gt;
  
  &lt;link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"&gt;
  &lt;link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.16/css/dataTables.bootstrap.min.css"&gt;
  
  &lt;script src="https://code.jquery.com/jquery-1.12.4.js"&gt;&lt;/script&gt;
  &lt;script src="https://cdn.datatables.net/1.10.16/js/jquery.dataTables.min.js"&gt;&lt;/script&gt;
  &lt;script src="https://cdn.datatables.net/1.10.16/js/dataTables.bootstrap.min.js"&gt;&lt;/script&gt;
  
  
   &lt;/head&gt;
   &lt;body&gt;
    &lt;div class="container"&gt;
     &lt;h1 align="center"&gt;Datatables&lt;/h1&gt;    
     &lt;div class="table-responsive"&gt;
  &lt;table id="example" class="table table-striped table-bordered" style="width:100%"&gt;
          &lt;thead&gt;
              &lt;tr&gt;
                  &lt;th&gt;Country&lt;/th&gt;
                  &lt;th&gt;Territory&lt;/th&gt;
                  &lt;th&gt;Market&lt;/th&gt;
                  &lt;th&gt;Entname&lt;/th&gt;
                  &lt;th&gt;MTM&lt;/th&gt;
                  &lt;th&gt;Qty&lt;/th&gt;
              &lt;/tr&gt;
          &lt;/thead&gt;
  
          &lt;tfoot&gt;
              &lt;tr&gt;
                  &lt;th&gt;Country&lt;/th&gt;
                  &lt;th&gt;Territory&lt;/th&gt;
                  &lt;th&gt;Market&lt;/th&gt;
                  &lt;th&gt;Entname&lt;/th&gt;
                  &lt;th&gt;MTM&lt;/th&gt;
                  &lt;th&gt;Qty&lt;/th&gt;
              &lt;/tr&gt;
          &lt;/tfoot&gt;
      &lt;/table&gt;
     &lt;/div&gt;
    &lt;/div&gt;
   &lt;/body&gt;
  &lt;/html&gt;
  
  &lt;script type="text/javascript" language="javascript" &gt;
  $(document).ready(function() {
  
        var dtable = $('#example').DataTable({  
              "processing": true,
              "serverSide": true,
              "deferRender": true,
              "lengthMenu": [ [25, 50, 100, -1], [25, 50, 100, "All"] ],
              "pageLength": -1,
              "lengthChange": true,
              "pagingType": "full_numbers",
              "columns": [
                  {"data": "Country"},
                  {"data": "Territory"},
                  {"data": "Market"},
                  {"data": "Entname"},
                  {"data": "MTM"},
                  {"data": "Qty"}
              ],
              "ajax": {
                  url: 'fetch.php',
                  type: 'POST'
              },   
              initComplete: function () {
              this.api().columns().every( function () {
              var column = this;
              var select = $('&lt;select&gt;&lt;option value=""&gt;&lt;/option&gt;&lt;/select&gt;')
                      .appendTo( $(column.footer()).empty() )
                      .on( 'change', function () {
                          var val = $.fn.dataTable.util.escapeRegex(
                              $(this).val()
                          );
  
                          column
                              .search( val ? '^'+val+'$' : '', true, false )
                              .draw();
                      } );
  
                  column.data().unique().sort().each( function ( d, j ) {
                      select.append( '&lt;option value="'+d+'"&gt;'+d+'&lt;/option&gt;' )
                  } );
              } );
          }
  
          });
  
        $(".dataTables_filter input")
      .unbind() 
      .bind("keyup change", function(e) { 
          if(this.value.length &gt;= 1 &amp;&amp; e.keyCode == 13) { dtable.search(this.value).draw(); }
          if(this.value == "") { dtable.search("").draw(); }
          return;
      });
  
  } );
  &lt;/script&gt;
  </code></pre>
  
  <p>and here is my fetch.php </p>
  
  <pre><code>&lt;?php 
  ini_set('display_errors', 1);
  ini_set('display_startup_errors', 1);
  error_reporting(E_ALL);
  
  
  if (!empty($_POST) ) {
  
  $ser="*****";
  $db="*****";
  $user="*****"; 
  $pass="*****";
  $dbDB = new PDO("odbc:Driver=ODBC Driver 13 for SQL Server;Server=*****;Database=*****;Port=1456", $user, $pass);
  $MyTable="*****";
  
      function getData($sql){
          global $dbDB ;
          global $MyTable ;
          $result = $dbDB-&gt;query($sql);       
          $data= $result-&gt;fetchAll(PDO::FETCH_ASSOC);
          return $data; }
  
          $res = $dbDB-&gt;query("SELECT COUNT(*) FROM ".$MyTable);
          $recordsTotal = $res-&gt;fetchColumn();
  
      $draw = $_POST["draw"];
      $orderByColumnIndex  = $_POST['order'][0]['column'];
      $orderBy = $_POST['columns'][$orderByColumnIndex]['data'];
      $orderType = $_POST['order'][0]['dir']; 
      $start  = $_POST["start"];
  
      if ($_POST['length'] == -1) {$length = $recordsTotal;} 
      else {$length = $_POST['length'];}    
  
  
      if(!empty($_POST['search']['value'])){
  
          for($i=0 ; $i&lt;count($_POST['columns']);$i++){
              $column = $_POST['columns'][$i]['data'];
              $where[]="$column like '%".$_POST['search']['value']."%'";
          }
          $where = "WHERE ".implode(" OR " , $where);
  
  
  $sql = sprintf("SELECT COUNT(*) FROM %s %s", $MyTable , $where);
  $r = $dbDB-&gt;query($sql);
  $recordsFiltered = $r-&gt;fetchColumn();
  
           $sql = sprintf("SELECT Country,Territory,Market,Entname,MTM,Qty FROM %s %s ORDER BY %s %s OFFSET %d ROWS FETCH NEXT %d ROWS ONLY", $MyTable , $where ,$orderBy, $orderType ,$start,$length);
          $data = getData($sql);
      }
  
      else {
  
          $sql = sprintf("SELECT Country,Territory,Market,Entname,MTM,Qty FROM %s ORDER BY %s %s OFFSET %d ROWS FETCH NEXT %d ROWS ONLY", $MyTable ,$orderBy, $orderType ,$start,$length);
            $data = getData($sql);
          $recordsFiltered = $recordsTotal;
      }
  
          $response = array(
          "draw" =&gt; intval($draw),
          "recordsTotal" =&gt; $recordsTotal,
          "recordsFiltered" =&gt; $recordsFiltered,
          "data" =&gt; $data );
  
      echo json_encode($response);
  } 
  
  else {
      echo "NO POST Query from DataTable";
  }
  
  ?&gt;
  </code></pre>
  
  <p>I believe that the issue is somewhere in the javascript part not the php file but just to show an overview how the data is populated into the table. </p>
  
  <p>Any idea please where is the issue?</p>