title: Why is it that my input filter isnt working?
body: <p>I created some input filters with jQuery Datatables but isnt working. The fact is that i get no errors while inspecting the console and i have no clue what is happening.</p>
  <p>This is my view:</p>
  <pre><code>&lt;table id=&quot;example1&quot; class=&quot;table table-striped table-responsive&quot; width=&quot;100%&quot;&gt;
                          &lt;thead class=&quot;thead&quot;&gt;
                              &lt;tr&gt;
                                  &lt;th style=&quot;display: none&quot;&gt;Codigo&lt;/th&gt;
                                  &lt;th&gt;ID&lt;/th&gt;
                                  &lt;th&gt;Producto&lt;/th&gt;
                                  &lt;th&gt;Tipo de Producto&lt;/th&gt;
                                  &lt;th&gt;Marca&lt;/th&gt;
                                  &lt;th&gt;Modelo&lt;/th&gt;
                                  &lt;th&gt;Moneda&lt;/th&gt;
                                  &lt;th&gt;Descripcion&lt;/th&gt;
                                  
                                  &lt;th&gt;Costo&lt;/th&gt;
                                  
                                  &lt;th style=&quot;width: 12%&quot;&gt;Accion&lt;/th&gt;
                              &lt;/tr&gt;
                          &lt;/thead&gt;
                          &lt;tbody&gt;
                             
                              @foreach($file as $key =&gt; $product)
                              @if($product-&gt;status == 1)
                                  &lt;tr&gt;
                                      &lt;td style=&quot;display: none&quot;&gt;{{ $key+1 }}&lt;/td&gt;
                                      &lt;td&gt;{{ $product-&gt;id }}&lt;/td&gt;
                                      &lt;td&gt;{{$product-&gt;marca-&gt;brandName . &quot; &quot; . $product-&gt;modelo-&gt;modelName}}&lt;/td&gt;
                                      &lt;td&gt;{{ $product['ptype']['productType']}}&lt;/td&gt;
                                      &lt;td&gt;{{ $product-&gt;marca-&gt;brandName }}&lt;/td&gt;
                                      &lt;td&gt;{{ $product-&gt;modelo-&gt;modelName}}&lt;/td&gt;
                                      &lt;td&gt;{{ $product-&gt;coin }}&lt;/td&gt;
                                      &lt;td&gt;{{ $product-&gt;description }}&lt;/td&gt;
                                      
                                      &lt;td&gt;{{ $product-&gt;cost }}&lt;/td&gt;
                                      
                                      @php
                                      $count_product = App\Model\Purchase::where('product_id',$product-&gt;id)-&gt;count();
                                      @endphp
                                          &lt;td&gt;
  
  
                                          &lt;!--&lt;a title=&quot;Download&quot; id=&quot;download&quot; class=&quot;btn btn-sm btn-success&quot;
                                              href=&quot;/products/download/{{ $product-&gt;file }}&quot;&gt;&lt;i
                                                  class=&quot;fa fa-download&quot;&gt;&lt;/i&gt;&lt;/a&gt;--&gt;
                                          &lt;a title=&quot;Edit&quot; class=&quot;btn btn-sm text-white&quot;
                                              style=&quot;background-image: linear-gradient(200deg, #070525ce 1%, rgb(1, 0, 5)100%);&quot;
                                              href=&quot;{{ route('products.edit', $product-&gt;id) }}&quot;&gt;&lt;i
                                                  class=&quot;fa fa-edit&quot;&gt;&lt;/i&gt;&lt;/a&gt;
                                          &lt;a title=&quot;Delete&quot; id=&quot;delete&quot; class=&quot;btn btn-sm btn-danger&quot;
                                              href=&quot;{{ route('products.delete', $product-&gt;id) }}&quot;&gt;&lt;i
                                                  class=&quot;fa fa-trash&quot;&gt;&lt;/i&gt;&lt;/a&gt;
                                          &lt;a title=&quot;Info&quot; id=&quot;info&quot; class=&quot;btn btn-sm btn-info&quot; data-toggle=&quot;modal&quot; data-idUpdate=&quot;'.$product-&gt;id.'&quot; data-target=&quot;#ProductView&quot;&gt;&lt;i class=&quot;fa fa-eye&quot;&gt;&lt;/i&gt;&lt;/a&gt;
                                      &lt;/td&gt;
                                  &lt;/tr&gt;
                              @endif
  
                                  
                              @endforeach
                          &lt;/tbody&gt;
  
  &lt;tfoot&gt;
                              &lt;tr&gt;
                                  &lt;td&gt;
                                      &lt;input type=&quot;text&quot; class=&quot;form-control filter-input&quot; placeholder=&quot;Buscar por id...&quot; data-column=&quot;0&quot;&gt;
                                  &lt;/td&gt;
                                  &lt;td&gt;
                                      &lt;input type=&quot;text&quot; class=&quot;form-control filter-input&quot; placeholder=&quot;Buscar por marca...&quot; data-column=&quot;1&quot;&gt;
                                  &lt;/td&gt;
                                  &lt;td&gt;
                                      &lt;input type=&quot;text&quot; class=&quot;form-control filter-input&quot; placeholder=&quot;Buscar por modelo...&quot; data-column=&quot;2&quot;&gt;
                                  &lt;/td&gt;
                              &lt;/tr&gt;
                          &lt;/tfoot&gt;
  </code></pre>
  <p>And this is my script:</p>
  <pre><code>@section('javascripts')
  
  &lt;script type=&quot;text/javascript&quot; charset=&quot;utf8&quot; src=&quot;https://cdn.datatables.net/1.11.3/js/jquery.dataTables.min.js&quot;&gt;&lt;/script&gt;
  
  &lt;script&gt;
      $(document).ready(function () {
          var table = $('#example1').Datatable({
              'processing': true,
              'serverSide': true,
              'ajax': &quot;{{ route('products.view') }}&quot;,
              'columns': [
                  {'data': 'id'},
                  {'data': 'brandName'},
                  {'data': 'modelName'}
              ],
          });
  
          $('.filter-input').keyup(function() {
              table.column( $(this).data('column'))
                  .search( $(this).val())
                  .draw();
          });
  
          
      })
  &lt;/script&gt;
  
  @endsection
  </code></pre>
  <p>Does anybody knows what is happening? Because it is a simple input search and it seems as if it doesnt identifies my columns nor what im inputing.</p>
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>$(document).ready(function () {
          var table = $('#example1').Datatable({
              'processing': true,
              'serverSide': true,
              'ajax': "{{ route('products.view') }}",
              'columns': [
                  {'data': 'id'},
                  {'data': 'brandName'},
                  {'data': 'modelName'}
              ],
          });
  
          $('.filter-input').keyup(function() {
              table.column( $(this).data('column'))
                  .search( $(this).val())
                  .draw();
          });
  
          
      })</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.11.3/jquery.min.js"&gt;&lt;/script&gt;
  
  &lt;table id="example1" class="table table-striped table-responsive" width="100%"&gt;
                              &lt;thead class="thead"&gt;
                                  &lt;tr&gt;
                                      &lt;th style="display: none"&gt;Codigo&lt;/th&gt;
                                      &lt;th&gt;ID&lt;/th&gt;
                                      &lt;th&gt;Producto&lt;/th&gt;
                                      &lt;th&gt;Tipo de Producto&lt;/th&gt;
                                      &lt;th&gt;Marca&lt;/th&gt;
                                      &lt;th&gt;Modelo&lt;/th&gt;
                                      &lt;th&gt;Moneda&lt;/th&gt;
                                      &lt;th&gt;Descripcion&lt;/th&gt;
                                      
                                      &lt;th&gt;Costo&lt;/th&gt;
                                      
                                      &lt;th style="width: 12%"&gt;Accion&lt;/th&gt;
                                  &lt;/tr&gt;
                              &lt;/thead&gt;
                              &lt;tbody&gt;
                                 
                                  @foreach($file as $key =&gt; $product)
                                  @if($product-&gt;status == 1)
                                      &lt;tr&gt;
                                          &lt;td style="display: none"&gt;{{ $key+1 }}&lt;/td&gt;
                                          &lt;td&gt;{{ $product-&gt;id }}&lt;/td&gt;
                                          &lt;td&gt;{{$product-&gt;marca-&gt;brandName . " " . $product-&gt;modelo-&gt;modelName}}&lt;/td&gt;
                                          &lt;td&gt;{{ $product['ptype']['productType']}}&lt;/td&gt;
                                          &lt;td&gt;{{ $product-&gt;marca-&gt;brandName }}&lt;/td&gt;
                                          &lt;td&gt;{{ $product-&gt;modelo-&gt;modelName}}&lt;/td&gt;
                                          &lt;td&gt;{{ $product-&gt;coin }}&lt;/td&gt;
                                          &lt;td&gt;{{ $product-&gt;description }}&lt;/td&gt;
                                          
                                          &lt;td&gt;{{ $product-&gt;cost }}&lt;/td&gt;
                                          
                                          @php
                                          $count_product = App\Model\Purchase::where('product_id',$product-&gt;id)-&gt;count();
                                          @endphp
                                              &lt;td&gt;
  
  
                                              &lt;!--&lt;a title="Download" id="download" class="btn btn-sm btn-success"
                                                  href="/products/download/{{ $product-&gt;file }}"&gt;&lt;i
                                                      class="fa fa-download"&gt;&lt;/i&gt;&lt;/a&gt;--&gt;
                                              &lt;a title="Edit" class="btn btn-sm text-white"
                                                  style="background-image: linear-gradient(200deg, #070525ce 1%, rgb(1, 0, 5)100%);"
                                                  href="{{ route('products.edit', $product-&gt;id) }}"&gt;&lt;i
                                                      class="fa fa-edit"&gt;&lt;/i&gt;&lt;/a&gt;
                                              &lt;a title="Delete" id="delete" class="btn btn-sm btn-danger"
                                                  href="{{ route('products.delete', $product-&gt;id) }}"&gt;&lt;i
                                                      class="fa fa-trash"&gt;&lt;/i&gt;&lt;/a&gt;
                                              &lt;a title="Info" id="info" class="btn btn-sm btn-info" data-toggle="modal" data-idUpdate="'.$product-&gt;id.'" data-target="#ProductView"&gt;&lt;i class="fa fa-eye"&gt;&lt;/i&gt;&lt;/a&gt;
                                          &lt;/td&gt;
                                      &lt;/tr&gt;
                                  @endif
  
                                      
                                  @endforeach
                              &lt;/tbody&gt;
                              &lt;tfoot&gt;
                                  &lt;tr&gt;
                                      &lt;td&gt;
                                          &lt;input type="text" class="form-control filter-input" placeholder="Buscar por id..." data-column="0"&gt;
                                      &lt;/td&gt;
                                      &lt;td&gt;
                                          &lt;input type="text" class="form-control filter-input" placeholder="Buscar por marca..." data-column="1"&gt;
                                      &lt;/td&gt;
                                      &lt;td&gt;
                                          &lt;input type="text" class="form-control filter-input" placeholder="Buscar por modelo..." data-column="2"&gt;
                                      &lt;/td&gt;
                                  &lt;/tr&gt;
                              &lt;/tfoot&gt;
                          &lt;/table&gt;
                      &lt;/div&gt;&lt;!-- /.card-body --&gt;</code></pre>
  </div>
  </div>
  </p>