在 wordpress 中为现有的 html 表（使用数据库连接）使用数据表
Posted
技术标签:
【中文标题】在 wordpress 中为现有的 html 表（使用数据库连接）使用数据表【英文标题】：Using datatable for existing html table (using database connection) in wordpress 【发布时间】：2017-10-18 13:03:46 【问题描述】：我目前有一个 WordPress 站点，其中的一个部分包含一个主 html 表，该表具有 7 列的基本标题，并且所有行都从数据库变量中填充。现在它工作得很好，如果我在数据库中再添加 8 条记录，它会毫无问题地提取这些记录并将它们显示在表中。
我刚刚被要求让这个完整的表格可排序、可过滤和可搜索。我认为数据表将是最好和最简单的方法，但我从未在 WordPress 网站中使用过它，所以我不知道我在哪里走错了。添加数据表的代码后，页面加载没有错误，但它是同一个 HTML 表，并且没有任何数据表功能发生。
这是完整的代码：
$server = "localhost";
$user = "//omitted";
$pw = "//omitted";
$db = "//omitted";
$connect = mysqli_connect($server, $user, $pw, $db);
if ($connect->connect_error)
die("Connection failed: " . $conn->connect_error);
else
//echo'success!';
$query1 = "SELECT * FROM staging;";
$result1 = mysqli_query($connect,$query1);
?>
<html>
<head>
<title>Dashboard</title>
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.15/css/jquery.dataTables.min.css" />
</head>
<body>
<div class="dashboardTable" style="overflow-x:auto; width:900px;">
<table id="mytable" style="border: 1px solid #468BBD; border-collapse: collapse; width:100%; margin:0 auto;">
<thead>
<tr style="border: 1px solid #468BBD;">
<th style="padding-left: 10px; padding-right:10px; border: 1px solid #468BBD;">Service Preformed</th>
<th style="padding-left: 10px; padding-right:10px; border: 1px solid #468BBD;">Work Order Number</th>
<th style="padding-left: 10px; padding-right:10px; border: 1px solid #468BBD;">Date</th>
<th style="padding-left: 10px; padding-right:10px; border: 1px solid #468BBD;">Utility</th>
<th style="padding-left: 10px; padding-right:10px; border: 1px solid #468BBD;">Service Name</th>
<th style="padding-left: 10px; padding-right:10px; border: 1px solid #468BBD;">Address</th>
<th style="padding-left: 10px; padding-right:10px; border: 1px solid #468BBD;">Serial No.</th>
</tr>
</thead>
<tbody>
<?php
while($row = mysqli_fetch_array($result1))
?>
<tr>
<td style="border-collapse: collapse; padding-left: 10px; padding-right:10px;"><? echo $row['workOrderType2'];?> </td>
<td style="border-collapse: collapse; padding-left: 10px; padding-right:10px;"><? echo $row['workOrderNum'];?> </td>
<td style="border-collapse: collapse; padding-left: 10px; padding-right:10px;"><? echo $row['date'];?> </td>
<td style="border-collapse: collapse; padding-left: 10px; padding-right:10px;"><? echo $row['utility'];?> </td>
<td style="border-collapse: collapse; padding-left: 10px; padding-right:10px;"><? echo $row['serviceName'];?> </td>
<td style="border-collapse: collapse; padding-left: 10px; padding-right:10px;"><? echo $row['address'];?> </td>
<td style="border-collapse: collapse; padding-left: 10px; padding-right:10px;"><?php echo '<a href="/dashboard-display?id='.$row['serialNumber'].'">'.$row['serialNumber'].'</a>'; ?> </td>
</tr>
<??>
</tbody>
</table>
</div>
<script type="text/javascript" src="https://cdn.datatables.net/1.10.15/js/jquery.dataTables.min.js">
</script>
<script type="text/javascript">
$(document).ready( function ()
$('#mytable').DataTable();
);
</script>
我对数据表插件不是很熟悉，但我觉得那里的代码是正确的，我只是想知道 wordpress 因素是否是问题所在。代码没有破坏我的页面但没有显示数据表是有原因的吗？
更新：
更多列的横向滚动问题的照片
【问题讨论】：
您在重复<tbody>，这会导致格式错误的标记。 lioop 应该只重复<tr>...</tr> ...
等等，只是为了确保我明白：我应该在 while 循环上方开始 吗？
不，之前 - 因为你在循环之后有</tbody>。
好的，我进行了更改并更新了上面的代码，但它仍然只显示普通的 html 表
【参考方案1】：
使用wordpress时需要定义jquery才能使用$，试试这个：
(function($)
$(document).ready(function()
$('#mytable').DataTable();
);
(jQuery));
有多种方法可以做到这一点，另一种是：
jQuery(document).ready(function($)
$('#mytable').DataTable();
);
【讨论】：
天哪，我早该知道的！我什至没有想过这个。非常感谢，它现在运行良好！ 嘿@Darren，快速提问。有没有办法将它包含在更多的 Iframe 样式中？它有效，但有人要求我尝试使用大约 20 列，而不是原来的 7 列，所以现在列的侧滚动也滚动远离搜索框、分页和要显示的条目数。当我开始横向滚动时，我更新了一张问题的照片。 你的意思是这样？$('#mytable').DataTable( "scrollX": true );
是的，先生，就这样。我尝试将它包装在多个 DIV 中，但没有任何效果。再次感谢！
可以，搜索数据表重绘以上是关于在 wordpress 中为现有的 html 表（使用数据库连接）使用数据表的主要内容，如果未能解决你的问题，请参考以下文章
为现有的 Jersey 项目从 Netbeans JPA 添加休眠