如何让 dataTable 与 PHP 一起工作

Posted 2023-05-09

技术标签:

【中文标题】如何让 dataTable 与 PHP 一起工作【英文标题】：How to get dataTable working with PHP 【发布时间】：2017-06-25 08:32:39 【问题描述】：

我希望通过排序选项精美地展示我的表格。我正在使用 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

【问题讨论】：

并不是说这回答了您的问题，但您应该将您的逻辑与您的演示分开。把你所有的逻辑放在文件的顶部，然后在你的 HTML 中做一个基本的循环。尝试将所有内容与您的代码结合起来很快就会变得一团糟。你检查过你的 JS 控制台是否有错误吗？这个问题真的和 PHP 或者 MySQL 无关。 @Mike 你让我如何将逻辑与演示分开？你能给我一个关于如何做到这一点的例子吗？我更新了我的帖子以显示我收到的 JS 控制台错误。基本上将您的 mysql 内容移动到 HTML 之前并将结果保存为数组。然后在您的 HTML 中执行 foreach ($result_array as $result). 谢谢@Mike 会看看那个。 【参考方案1】：

每次迭代都在重复 tbody。您应该只回显行而不是 tbody。将其移出 while 循环。您在 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 也可以派上用场。

【讨论】：

我已将放在循环之外，但这似乎不是问题。 th != to td 这很聪明。问题在于我在最右边发布的表格图片中的三个操作列。您对我如何使所有内容协同工作有什么想法吗？像宾果游戏一样工作！！！！！！！非常感谢，但有没有办法可以删除操作列上的排序？是的，看看：***.com/questions/16335928/… 【参考方案2】：

您在循环的每次迭代中重复您的<tbody> 标签。把它移到你的循环之外（连同关闭的</tbody>），这样你的表中就只有一个实例了。

【讨论】：

@Acy C 谢谢。这让条纹出现在桌子上，但并没有解决问题。【参考方案3】：

您的 td 和 th 标签数必须相同才能使 dataTables 正常工作。所以只需添加一些空的 th 标签.. 并且在使用数据表时不要使用 COLSPAN

在您的情况下，您需要添加 2 个额外的标签...

     `<!-- 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>Operations</th> // DONT USE COLSPAN WHILE USING DATATABLES
            <th></th>
            <th></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> `

【讨论】：

请提供示例代码来修复提问者提供的示例，而不仅仅是文本。您的标题与添加的 colspan 不匹配

以上是关于如何让 dataTable 与 PHP 一起工作的主要内容，如果未能解决你的问题，请参考以下文章

让 jQuery 自动完成功能与 PHP 源一起工作

DataTables localeCompare 排序，不能让它工作

如何将数据库索引与 Datatables 和 yajra/laravel-datatables 一起使用

带有 JSON、AJAX 和 PHP 的数据表不显示任何数据

PHP：如何让我的 IF 语句与 PDO 选择一起使用？

如何将两个 DataTable 与内部连接连接在一起