JQuery DataTables not displaying properly when populating table from MySql Table - php

Question

The problem is all in my PHP WHILE Loop somehow, I know this for sure. It turns off all the DataTables features when I use this PHP script inside a table. All the sorts and pagination features are not present when I use "PHP WHILE" in conjuction with DataTables.
But if I type direct text in the "Example_Value" between TD tags it works fine.
It is pulling data from MySql Table and displaying correct value. Somehow the PHP script is turning off all the DataTables features.
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap#4.0.0/dist/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<link href="http://fonts.cdnfonts.com/css/lato" rel="stylesheet">
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/5.0.1/css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.11.5/css/dataTables.bootstrap5.min.css">
<?php
$dir = '../customer/demo/';
$company_name_array = scandir($dir);
$company_count = count($company_name_array);
$i = 1;
// Loop through array
foreach($company_name_array as $stores){
$storesdisplay[$i] = $stores;
$i=$i+1;
}
require 'dbConfig2.php';
?>
<div class="container-fluid">
<table id="example" class="display" style="width:100%">
<thead>
<tr>
<th>Company</th>
<th>Phone</th>
<th>Contact</th>
<th>Email</th>
<th>Last Contact</th>
<th>Send</th>
</tr>
</thead>
<tbody>
<?php
$company_name = $company_name_array;
$i=1;
// Loop through array
while($i <= $company_count ){
$i=$i+1;
$company_name = $storesdisplay[$i];
$stmt = $conn->prepare("SELECT * FROM $company_name WHERE record_id =:record_id");
$stmt->bindValue(':record_id',1, PDO::PARAM_INT);
$stmt->execute();
while($row = $stmt->fetch(PDO::FETCH_ASSOC)) {
?>
<tr>
<td><a href="<?php echo $dir.$company_name ?>/index.php?company_logo=<?php echo $row['company_logo'] ?>"><?php echo str_replace("_"," ",$company_name) ?></td>
<td><?php echo $row['phone'] ?></td>
<td><?php echo $row['contact'] ?></td>
<td><?php echo $row['email'] ?></td>
<td><?php echo $row['last_contact'] ?></td>
<td><button class="btn">Send</button></td>
</tr>
<?php
}
}
?>
</tbody>
<tfoot>
<tr>
<th>Company</th>
<th>Phone</th>
<th>Contact</th>
<th>Email</th>
<th>last_contact</th>
<th>Send</th>
</tr>
</tfoot>
</table>
</div>
<script src="https://code.jquery.com/jquery-3.5.1.js" ></script>
<script src="https://cdn.datatables.net/1.11.5/js/jquery.dataTables.min.js"></script>
<script src="https://cdn.datatables.net/1.11.5/js/dataTables.bootstrap5.min.js"></script>
<script>
$(document).ready(function() {
$('#example').DataTable();
} );
</script>

Answer 1

Thank you KIKO Software for leading me down the right path. In-fact you were correct, PHP was throwing an error. As I was loading $company_name into array, the first file read was "..". I corrected this problem with one simple correction. I initialized $i = 1; , rather than $i = 0;