如何让 dataTable 与 PHP 一起工作

Question

我希望通过排序选项精美地展示我的表格。我正在使用 PHP 从 MySQL 数据库中检索记录。我了解了数据表，并发现它们对于此目的非常有用。

现在，问题是每当我使用 PHP 从数据库生成数据并在表中动态显示它们时，它都能与应用于表的所有数据表样式完美配合，但我无法获得排序和分页功能数据表工作。这是我的表格的显示方式：

如何启用 dataTables 提供的排序和分页功能？ 以下是 dataTables 的脚本和我编写的 php 代码：

<!-- DataTables CSS -->
<link href="vendor/datatables-plugins/dataTables.bootstrap.css" rel="stylesheet">

<!-- DataTables Responsive CSS -->
<link href="vendor/datatables-responsive/dataTables.responsive.css" rel="stylesheet">


<table class="table table-striped table-bordered table-hover" id="example">
    <thead>
        <tr>
            <th>First Name</th>
            <th>Surname</th>
            <th>Gender</th>
            <th>Birth Date</th>
            <th>Address</th>
            <th>Nationality</th>
            <th>County</th>
            <th>Student Type</th>
            <th>Class</th>
            <th colspan="3">Operations</th>
        </tr>
    </thead>
    <tbody>
    <?php 
       $query = "SELECT student_id, first_name, cell_number, middle_name,   surname, gender, date_of_birth, address, nationality, county, student_type, class_name 
            from students
            INNER JOIN classes
                ON students.class_id = classes.class_id";

       if($result = mysqli_query($connection, $query)){
          if(mysqli_num_rows($result) > 0){
            while ($row = mysqli_fetch_array($result)){
   ?>
    <tr>
        <td><?php echo htmlentities($row['first_name']) ?></td>
        <td><?php echo htmlentities($row['surname']) ?></td>
        <td><?php echo htmlentities($row['gender']) ?></td>
        <td><?php echo htmlentities($row['date_of_birth']) ?></td>
        <td><?php echo htmlentities($row['address']) ?></td>
        <td><?php echo htmlentities($row['nationality']) ?></td>
        <td><?php echo htmlentities($row['county'])?></td>
        <td><?php echo htmlentities($row['student_type'])?></td>
        <td><?php echo htmlentities($row['class_name'])?></td>

        <td align="center"><a class="page_anchor" href="edit_student.php?student=<?php echo urlencode($row['student_id']); ?>">Edit</a></td> 

        <td align="center"><a class="page_anchor" href="create_grades.php?student=<?php echo urlencode($row['student_id']); ?>">Grades</a></td> 

        <td align="center"><a class="page_anchor" href="student_details.php?student=<?php echo urlencode($row['student_id']); ?>">Details</a></td> 
    </tr>


            <!-- closing the while loop --> 
            <?php }?>
         </tbody>
        <!-- closing the if mysqli_num_rows if statement -->    
        <?php } else { echo "No record found"; }?>
    <!-- closing the if $result = mysqli_query($connection, sql) if statement -->   
    <?php } else {
        die("Database query failed. ". mysqli_error($connection));
    } ?>
</table>

<!-- jQuery -->
<script src="vendor/jquery/jquery.min.js"></script>

<!-- Bootstrap Core JavaScript -->
<script src="vendor/bootstrap/js/bootstrap.min.js"></script>

<script src="vendor/datatables/js/jquery.dataTables.min.js"></script>
 <script src="vendor/datatables-responsive/dataTables.responsive.js"></script>


<script>
$(document).ready(function() {
    $('#example').DataTable({
        responsive: true
    });
});
</script>

以下是我从 JS 控制台收到的错误：

Uncaught TypeError: Cannot read property 'mData' of undefined
 at HTMLTableCellElement.<anonymous> (jquery.dataTables.min.js:90)
 at Function.each (jquery.min.js:2)
 at r.fn.init.each (jquery.min.js:2)
 at HTMLTableElement.<anonymous> (jquery.dataTables.min.js:90)
 at Function.each (jquery.min.js:2)
 at r.fn.init.each (jquery.min.js:2)
 at r.fn.init.m [as dataTable] (jquery.dataTables.min.js:82)
 at r.fn.init.h.fn.DataTable (jquery.dataTables.min.js:166)
 at HTMLDocument.<anonymous> (index.php:429)
 at j (jquery.min.js:2)

Uncaught TypeError: Cannot read property 'defaults' of undefined
 at f (dataTables.bootstrap.min.js:5)
 at dataTables.bootstrap.min.js:8
 at dataTables.bootstrap.min.js:8

这是我在 JS 控制台中也看到的警告：

jQuery.Deferred exception: Cannot read property 'mData' of undefined TypeError: Cannot read property 'mData' of undefined
at HTMLTableCellElement.<anonymous> (http://localhost/SchoolMate/vendor/datatables/js/jquery.dataTables.min.js:90:236)
at Function.each (http://localhost/SchoolMate/vendor/jquery/jquery.min.js:2:2815)
at r.fn.init.each (http://localhost/SchoolMate/vendor/jquery/jquery.min.js:2:1003)
at HTMLTableElement.<anonymous> (http://localhost/SchoolMate/vendor/datatables/js/jquery.dataTables.min.js:90:192)
at Function.each (http://localhost/SchoolMate/vendor/jquery/jquery.min.js:2:2815)
at r.fn.init.each (http://localhost/SchoolMate/vendor/jquery/jquery.min.js:2:1003)
at r.fn.init.m [as dataTable] (http://localhost/SchoolMate/vendor/datatables/js/jquery.dataTables.min.js:82:388)
at r.fn.init.h.fn.DataTable (http://localhost/SchoolMate/vendor/datatables/js/jquery.dataTables.min.js:166:245)
at HTMLDocument.<anonymous> (http://localhost/SchoolMate/index.php:429:23)
at j (http://localhost/SchoolMate/vendor/jquery/jquery.min.js:2:29568) undefined

Answer 1

1. 每次迭代都在重复 tbody。您应该只回显行而不是 tbody。将其移出 while 循环。
2. 您在 tbody 中显示的数据列比在 thead 中显示的多，即 no of th != no of td

编辑：

好吧，您无法实现您所展示的内容，因为 DataTables 不能像您希望的那样使用 colspan 和 rowspan。但你可以这样做：

<table class="jTable">
    <thead>
        <tr>
            <th>Name</th>
            <th>Operations</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>Waleed</td>
            <td>
                <table>
                    <tr>
                        <td>View</td>
                        <td>Edit</td>
                        <td>Delete</td>
                    </tr>
                </table>
            </td>
        </tr>
    </tbody>
</table>

输出：

但是，由于性能缓慢，不建议渲染嵌套表。但这将完成这项工作。

This 也可以派上用场。