Question

我目前有一个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'];?>&nbsp;</td>
    <td style="border-collapse: collapse; padding-left: 10px; padding-right:10px;"><? echo $row['workOrderNum'];?>&nbsp;</td>
    <td style="border-collapse: collapse; padding-left: 10px; padding-right:10px;"><? echo $row['date'];?>&nbsp;</td>
    <td style="border-collapse: collapse; padding-left: 10px; padding-right:10px;"><? echo $row['utility'];?>&nbsp;</td>
    <td style="border-collapse: collapse; padding-left: 10px; padding-right:10px;"><? echo $row['serviceName'];?>&nbsp;</td>
    <td style="border-collapse: collapse; padding-left: 10px; padding-right:10px;"><? echo $row['address'];?>&nbsp;</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>

我对datatables插件不是很熟悉，但我觉得那里的代码是正确的，我只是想知道wordpress因素是否是问题。有没有理由代码没有破坏我的页面，但它没有显示数据表？

更新：

带有更多列的sidescroll问题的照片

Answer 1

使用jquery时，您需要定义$以使用wordpress，请尝试以下操作：

(function($) {
  $(document).ready(function(){
    $('#mytable').DataTable();
 });
}(jQuery));

有多种方法可以做到这一点，另一种方法是：

jQuery(document).ready(function($){
    $('#mytable').DataTable();
});

在wordpress

1 个答案: