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

时间:2018-04-15 15:32:01

标签: javascript php jquery ajax datatables

我正在开发一个包含php,js,jquery,datatables的项目。

gif

我正在向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;
  }
?>

有什么建议吗?提前谢谢!

2 个答案:

答案 0 :(得分:0)

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

答案 1 :(得分:0)

我也遇到过这样的问题。将数据分配到数据表后,只需在ajax的成功函数中添加.DataTable()即可。
它一直在为我工作。
就这样写:

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