Я получаю данные таблицы из базы данных и отображаю их в таблице, но поиск данных по данным не работает

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 in. т.е. назовите эту строку $("#datatable").DataTable() после того, как вы закончили вставку HTML на странице.

В отдельной заметке не используйте append для добавления HTML. Это плохая практика. Вместо этого возьмите переменную и добавьте в нее все HTML. Когда вы закончите, сделайте один звонок, например $("#allPrograms").html(yourVariableHere), чтобы вставить HTML на странице.