title: jQuery Datatables - Multiple tables on single page with filtering
body: <p>i'm facing a problem with jQuery datatables. I have a page with 3 datatables, all getting data through ajax call and displying the data corectly. Sorting and paging are also working perfectly. Only the filtering is not wokring fine. Once i enter value in search field for the first table, i got the last tables filtered and not the first table.</p>
  
  <p>I also tried this:<a href="https://datatables.net/examples/basic_init/multiple_tables.html" rel="nofollow noreferrer">https://datatables.net/examples/basic_init/multiple_tables.html</a>
  but it didn't help</p>
  
  <p>My website is mvc 5 c#. I have read a lot of similar issues here, but i couldn't find any answer that workes for me.
  This is my code:</p>
  
  <pre><code>    &lt;div class="col-md-12"&gt;
      &lt;div class="card"&gt;
          &lt;h3 class="card-title"&gt;Table 1&lt;/h3&gt;
          &lt;div class="card-body"&gt;
              &lt;table class="table table-hover table-bordered" id="tableLow1"&gt;
                  &lt;thead&gt;
                      &lt;tr&gt;
                          &lt;th&gt;Col1&lt;/th&gt;
                          &lt;th&gt;Col2&lt;/th&gt;
                          &lt;th&gt;Col23&lt;/th&gt;
                      &lt;/tr&gt;
                  &lt;/thead&gt;
              &lt;/table&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  
      &lt;div class="col-md-12"&gt;
      &lt;div class="card"&gt;
          &lt;h3 class="card-title"&gt;Table 2&lt;/h3&gt;
          &lt;div class="card-body"&gt;
              &lt;table class="table table-hover table-bordered" id="tableLow2"&gt;
                  &lt;thead&gt;
                      &lt;tr&gt;
                          &lt;th&gt;Col1&lt;/th&gt;
                          &lt;th&gt;Col2&lt;/th&gt;
                          &lt;th&gt;Col23&lt;/th&gt;
                      &lt;/tr&gt;
                  &lt;/thead&gt;
              &lt;/table&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>and this is here my jquery code:</p>
  
  <pre><code>   function SetupTable1() {
                  var tableLow1 = $('#tableLow1').DataTable({
                      destroy: true,
                      "language": {
                          "url": "../Scripts/localization/datatables.de.json",
                          searchPlaceholder: "ID# Eingeben..."
                      },
                      "initComplete": function (settings, json) {
                          // filter only after RETURN or filter is deleted
                          $(".dataTables_filter input")
                              .unbind()
                              .bind('keyup change', function (e) {
                                  if (e.keyCode == 13 || this.value == "") {
                                      tableLow1
                                          .search(this.value)
                                          .draw();
                                  }
                              });
                      },
                      "autoWidth": false,
                      "autoHeight": true,
                      "processing": true,
                      "serverSide": true,
                      "ajax": {
                          "url": "/Home/GetDataTable1",
                          "type": "POST"
                      },
                      scrollX: true,
                      scrollY: true,
                      scrollCollapse: true,
                      "fixedColumns": {
                          leftColumns: 1
                      },
                      "order": [[1, "desc"]],
                      "columnDefs": [
                          {
                              "targets": 0,
                              "data": null,
                              render: function (data, type, row) {
                                  return "&lt;span class='smart_modal btn btn-primary'&gt; Accept &lt;/span&gt;"
                              }
                          },
                          {
                              "targets": [0],
                              "orderable": false
                          },
                          {
                              "targets": [1],
                              "orderable": true
                          },
                          {
                              "targets": [2],
                              "orderable": false
                          },
                          {
                              "targets": [3],
                              "orderable": false
                          }
                      ],
                      "columns": [
                          { "data": null },
                          { "data": "value1" },
                          { "data": "value2" },
                          { "data": "value3" }
                      ]
                  });
              };
  
      function SetupTable2() {
                  var tableLow2 = $('#tableLow2').DataTable({
                      destroy: true,
                      "language": {
                          "url": "../Scripts/localization/datatables.de.json",
                          searchPlaceholder: "ID# Eingeben..."
                      },
                      "initComplete": function (settings, json) {
                          // filter only after RETURN or filter is deleted
                          $(".dataTables_filter input")
                              .unbind()
                              .bind('keyup change', function (e) {
                                  if (e.keyCode == 13 || this.value == "") {
                                      tableLow2
                                          .search(this.value)
                                          .draw();
                                  }
                              });
                      },
                      "autoWidth": false,
                      "autoHeight": true,
                      "processing": true,
                      "serverSide": true,
                      "ajax": {
                          "url": "/Home/GetDataTable2",
                          "type": "POST"
                      },
                      scrollX: true,
                      scrollY: true,
                      scrollCollapse: true,
                      "fixedColumns": {
                          leftColumns: 1
                      },
                      "order": [[1, "desc"]],
                      "columnDefs": [
                          {
                              "targets": 0,
                              "data": null,
                              render: function (data, type, row) {
                                  return "&lt;span class='smart_modal btn btn-primary'&gt; Accept &lt;/span&gt;"
                              }
                          },
                          {
                              "targets": [0],
                              "orderable": false
                          },
                          {
                              "targets": [1],
                              "orderable": true
                          },
                          {
                              "targets": [2],
                              "orderable": false
                          },
                          {
                              "targets": [3],
                              "orderable": false
                          }
                      ],
                      "columns": [
                          { "data": null },
                          { "data": "value1" },
                          { "data": "value2" },
                          { "data": "value3" }
                      ]
                  });
              };
  </code></pre>