将DataTables用于包含来自Ajax的内容的表中

Question

我正在研究这个程序。该程序将显示特定主题下的主题。

我的主要问题是，DataTable是否可以在这种设置下工作？

这是HTML中的代码。

<div class="table-responsive" id="subject_container">
                <table id="tbl_subject" class="table table-striped">
                    <thead>
                        <tr>
                            <th>Chapter</th>
                            <th>Topic</th>
                            <th>Content</th>
                        </tr>
                    </thead>
                    <tbody id="disp_topics"></tbody>
                </table>
            </div>

这是jquery中的代码片段：

$(function(){
  //this is only for simplification. Subjectid will be coming from a select input.
  let subjectid = 1;
  get_topics(subjectid);

  //this part right here. If this cannot work, is there a way to make it work?
  $('#tbl_subject).DataTable();
});

function get_topics(subjectid){
  $.ajax({
    url: 'includes/subject_handler.php',
    method: 'POST',
    data: {
      key: 'get_topics',
      subjectid: subjectid
    },
    success: function(data){
      $('#disp_topics).html(data);
    }
  });

这是include / subject_handler.php的代码：我正在使用键，因为此脚本文件还处理了其他任务。感谢您的理解。

if($_POST['key'] == 'get_topics'){
   $subjectid = $_POST['subjectid'];
   $data = '';

   if(!empty($subjectid)){
      $sql = "SELECT topic.subjectid, chapter, topic, content FROM topic INNER JOIN subject
             ON subject.subjectid=topic.subjectid WHERE topic.subjectid = ?";
      $stmt=$db->prepare($sql);
      $stmt->bindValue(1, $subjectid);
      $stmt->execute();

      if($stmt->rowCount() > 0){
         $rows = $stmt->fetchAll(PDO::FETCH_ASSOC);

         foreach($rows as $row){
            $data .= '<tr>
                        <td>'.$row['chapter'].'</td>
                        <td>'.$row['topic'].'</td>
                        <td>'.$row['content'].'</td>
                     </tr>';
         }

         exit($data);
      }
   }

}

Answer 1

您可以使用数据表的ajax属性。

$('#tbl_subject').DataTable( {
    "ajax": 'includes/subject_handler.php'
} );

在此tutorial中，有一个很好的示例，它如何在后端工作。