Using datatable for existing html table (using database connection) in wordpress

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

Answer

You need to define jquery to use $ when using wordpress, try this:

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

There are multiple ways you can do this, another is:

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

Advertisement

Answer