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

【问题标题】：After Ajax call succeed, DataTables search box doesn't workAjax调用成功后，DataTables搜索框不起作用
【发布时间】：2018-09-25 09:17:13
【问题描述】：

我正在做一个包含 php、js、jquery、数据表的项目。

我正在向 PHP 页面发送 post 调用以更改我的表数据，如您所见，它运行成功。在这个电话之后，我不能奇怪地使用我的 DataTable 搜索功能。当Ajax调用成功时，错误可能与$(".gunlukgelir").load(" .gunlukgelir");有关，我用.gunlukgelir类名刷新表。

图书馆：

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

我的 Ajax 调用：

$(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 部分：

<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>

和 Ajax 调用的 PHP：

<?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;
  }
?>

有什么建议吗？提前致谢！

【问题讨论】：

你能在控制台中发布一个错误表单吗？如果有的话会发生什么错误
我一直在检查我的控制台，但这里是屏幕截图prntscr.com/j5khdp 有一个字体错误，但没什么，我想。
popup.js 行号有错误。 7
在success回调中，你甚至不使用result...而是使用.load()进行另一个Ajax请求，这很奇怪。
.load不把url作为第一个参数吗？你传入了一个选择器。

标签： javascript php jquery ajax datatables

【解决方案1】：

我也遇到过这样的问题。将数据分配到数据表后，只需在ajax的成功函数中添加.DataTable()即可。
它一直对我有用。
就这么写吧：

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

【讨论】：

【解决方案2】：

可能this issue 与我在文档中的问题有关。如果它重新初始化，它将是searching: false 无论如何，如果有一天有人看到这个问题，只需将您的表选择更改为Bootstrap-Table。它更稳定。

【讨论】：