我正在从数据库中获取表数据并显示在表上，但数据表搜索无法处理数据

Question

I am using datatables and search field is not working on the data retrieved from database via ajax POST method. Kindly help me

I am unable to understand server processing documentation of datatables.

I am just simply taking data from database and appending it to tag. I know i am doing wrong. I need help!

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

Initialize your datatable after you have filled the html in page. ie Call this line $("#datatable").DataTable() after you re done inserting HTML on page.

On a separate note, dont use append to add HTML. This is a bad practice. Instead take a variable and append all the HTML in it. Once you are done, make a single call like $("#allPrograms").html(yourVariableHere) to insert the HTML on page.