dongpaocuan7498
2017-05-18 15:49
浏览 78
已采纳

在wordpress中使用数据表用于现有的html表(使用数据库连接)

I currently have a wordpress site with a section that has a main html table which has a basic header of 7 columns and the rows are all filled from database variable. It works perfectly now, where if I add 8 more records to the database, it pulls those and displays them in the table with no problem.

I've just been asked to make this full table sortable, filterable and searchable. I figured datatables would be the best and simplest way, but I've never used it in a wordpress site so I don't know where I've misstepped. After adding the code for the datatable, the page loads without errors but it's the same html table and none of the datatable functions are taking place.

Here's the full code:

$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>

I'm not very familiar with the datatables plugin but I feel like the code is correct there, I'm just wondering if the wordpress factor is the issue. Is there a reason the code isn't breaking my page but it's not displaying the datatable?

UPDATE:

Photo of sidescroll issue with more columns

enter image description here

  • 写回答
  • 好问题 提建议
  • 追加酬金
  • 关注问题
  • 邀请回答

1条回答 默认 最新