Ajax 调用成功后，DataTables 搜索框不起作用

Question

I'm working on a project that php, js, jquery, datatables are included.

I'm sending post call to a PHP page to change my table data, it's running successfully as you see. After this call, I can't use my DataTable search feature strangely. May be the error is about $(".gunlukgelir").load(" .gunlukgelir"); when Ajax call is succeed, I reflesh the tables with the .gunlukgelir class name.

Libraries:

https://cdn.datatables.net/1.10.16/css/dataTables.bootstrap.min.css
https://cdn.datatables.net/1.10.16/js/jquery.dataTables.min.js
https://cdn.datatables.net/1.10.16/js/dataTables.bootstrap.min.js
https://code.jquery.com/jquery-3.3.1.min.js

my Ajax call:

$(function() {
  $("#gelirgetir").click(function() {
    var gelirtablosecimi = $("#select1").val();
    if (gelirtablosecimi) {
      $.ajax({
        type: "POST",
        url: "tabloyenile.php",
        data: {
          "gelirtablosecimi": gelirtablosecimi
        },
        success: function(result) {
          $(".gunlukgelir").load(" .gunlukgelir");
          //$(".gunlukgelir").load(window.location + " .gunlukgelir");
          notifyUser('success', 'Başarılı!', 'Tablo başarıyla güncellendi');
        },
        error: function(result) {
          notifyUser('error', 'Hata', 'error');
        }
      });
    } else {
      notifyUser('info', 'Dikkat', 'Tablo seçimi yapmadınız!');
    }

  });

HTML part:

<div class="form-group col-xs-6">

  <select id="select1" class="selectpicker" data-live-search="true" title="Gelirler">
    <?php echo $geliroptions;?>
  </select>
  <input type="submit" id="gelirgetir" value="Getir" class="btn btn-success" />

  <h1>Aylık Gelir Raporları</h1>
  <table id="" class="display table table-stripe table-hover table-row-border table-order-column table-nowrap gunlukgelir">
    <thead>
      <tr>
        <th>Tarih</th>
        <th>Günlük Toplam</th>
      </tr>
    </thead>
    <?php
    $gelirtabloadi = $_SESSION["gelirtabloadi"];
    $gelirgunluktoplam = $db->prepare("select tarih, hasilat + visa + butce_ici + hisse_satis + sosyal_konut + elektrik + haberlesme + iller_bank + diger AS Toplam from $gelirtabloadi");
    $gelirgunluktoplam->execute();
    while($row = $gelirgunluktoplam->fetch()){
     echo '
      <tr>
        <td>'.$row["tarih"].'</td>  
        <td>'.$row["Toplam"].'</td>                                    
      </tr>
     ';
    }
    ?>
  </table>
</div>

and PHP that Ajax calls:

<?php
  session_start();
  if($_POST['gelirtablosecimi'] && $_POST['gidertablosecimi']){
    $gidertabloadi = $_POST["gidertablosecimi"];
    $gelirtabloadi = $_POST["gelirtablosecimi"];
    $_SESSION["gelirtabloadi"] = $gelirtabloadi;
    $_SESSION["gidertabloadi"] = $gidertabloadi;
  }
  if($_POST["gelirtablosecimi"]){
    $gelirtabloadi = $_POST["gelirtablosecimi"];
    $_SESSION["gelirtabloadi"] = $gelirtabloadi;
  }
  if($_POST['gidertablosecimi']){
    $gidertabloadi = $_POST["gidertablosecimi"];
    $_SESSION["gidertabloadi"] = $gidertabloadi;
  }
?>

Any suggestion? Thanks in advance!

Answer 1

I also had such a problem. Just add .DataTable() in success function of ajax after assigning the data to data table.
It has been working for me.
Just write it as follows:

function TaxLoad() {
    $.ajax({
        url:"myCode.php",
        type:"POST",
        data:{functionName:"showTax"},
        success:function(data) {
            $("#tblTaxBody").html(data);
            var table= $("#dtTable").DataTable();
        }
    });
}`

Answer 2

Probably this issue related with my problem in the Docs. If It reinitialised, it would be searching: false Anyway, If one day anybody sees this problem, just change your table choice to Bootstrap-Table . It's much more stable.