我正在从数据库中获取表数据并显示在表中，但datatables搜索不能对数据执行操作

Question

我正在使用数据表和搜索字段不是通过ajax POST方法从数据库检索的数据。请帮帮我

我无法理解数据表的服务器处理文档。

我只是简单地从数据库中获取数据，并将其添加到标签中。我知道我做错了。我需要帮助！

​

<?php
$result=mysqli_query($conn,"select * from program");
while ($row = mysqli_fetch_assoc($result)) {
    $pid=(int)$row['ID'];
    $title=$row['TITLE'];
    $total=0;
    $result1=mysqli_query($conn,"select SUM(DISTINCT(TOTAL)) AS TOTAL from teams GROUP BY TEAM,PID having PID = $pid");
    while($row1=mysqli_fetch_assoc($result1))
    { 
        $total=$total+(int)$row1['TOTAL'];
    }
    $result2=mysqli_query($conn,"select * from shows where PID = $pid");
    $start="";
    $end="";
    $i=0;
    while($row2=mysqli_fetch_assoc($result2))
    {
        if($i==0){
            $start=$row2['START'];
            $i++;
        }
       $end=$row2['END'];
        $city=$row2['CITY'];
       }
    $arr[] = array("title" => $title,
                    "total" => $total,
                    "start" => $start,
                    "end" => $end,
                    "city" => $city,
                "pid"=>$pid);
}
echo json_encode($arr);
?>

​

​

$(document).ready(function() {
  $("#datatable").DataTable()
})

$(document).ready(function() {
  $.ajax({
    type: 'POST',
    url: 'getPrograms.php',
    dataType: 'json'
  }).done(function(res) {

    $("#allPrograms").html("");
    for (var i = 0; i < res.length; i++) {
      $("#allPrograms").append('<tr><td>' + res[i].title + '</td><td>' + res[i].total + '</td><td>' + res[i].start + '</td><td>' + res[i].end + '</td> <td>' + res[i].city + '</td> <td><span class="badge badge-secondary font-10">Active</span></td>' +
        '<td><a type="button" class="btn btn-primary btnAction" value="' + res[i].pid + '"><i class="mdi mdi-eye-outline" style="color:white"></i></button></td></tr>')
    }
  }).fail(function(err) {
    console.log(err);
  })
})

<table id="datatable" class="table table-bordered dt-responsive nowrap">
  <thead class="thead-light">
    <tr>
      <th>Program Name</th>
      <th>Consultants</th>
      <th>Start Date</th>
      <th>End Date</th>
      <th>Location</th>
      <th>Status</th>
      <th>Action</th>
    </tr>
  </thead>
  <tbody id="allPrograms"></tbody>
</table>

​

Answer 1

在页面中填充完html后，初始化datatable。例如，在页面上插入超文本标记语言后，将这一行称为$("#datatable").DataTable()。

另外，不要使用append来添加HTML。这是一种糟糕的做法。取而代之的是，获取一个变量并将所有HTML附加到其中。完成后，只需像$("#allPrograms").html(yourVariableHere)这样调用一次即可在页面上插入HTML。