I am attempting to populate a jQuery DataTable with information from a MySQL database without using AJAX. I would prefer to just use simpler code because this project is meant to be as minimal as possible. The following code is before the start of my HTML markup:
<?php
//Connect to the MySQL database
$usernameMain = "username";
$passwordMain = "password";
$hostMain = "host";
$dbnameMain = "database";
$optionsMain = array(PDO::MYSQL_ATTR_INIT_COMMAND => 'SET NAMES utf8');
$dbMain = new PDO("mysql:host={$hostMain};dbname={$dbnameMain};charset=utf8", $usernameMain, $passwordMain, $optionsMain);
$sql = 'SELECT name,date,location,entity,type FROM `events`';
$result = $dbMain->query($sql);
?>
I have generated a connection to my database (I removed my details), and also ensured to import the script files for jQuery DataTables as well.
Lower down in my HTML document, I created a table and attempted to echo out this database information with a while loop:
<table class="table table-hover table-nomargin table-bordered usertable"
id="datatables">
<thead>
<tr class='thefilter'>
<th class='with-checkbox'></th>
<th>Name</th>
<th>Location</th>
<th>Type</th>
<th>Date</th>
<th>Entity</th>
<th>Options</th>
</tr>
<tr>
<th class='with-checkbox'><input id="check_all" name=
"check_all" type="checkbox"></th>
<th>Name</th>
<th>Location</th>
<th>Date</th>
<th>Type</th>
<th>Sponsoring Entity</th>
<th>Options</th>
</tr>
</thead>
<tbody>
<!--Gather Rows from Database-->
<?php
$row = mysqli_fetch_array($result);
while ($row) {
?>
<tr>
<td class="with-checkbox"><input name="check" type="checkbox"
value="1"></td>
<td><?php echo $row['name']; ?></td>
<td><?php echo $row['date']; ?></td>
<td><?php echo $row['location']; ?></td>
<td><?php echo $row['entity']; ?></td>
<td><?php echo $row['type']; ?></td>
<td>
<a class="btn icon-pencil" href="#" rel="tooltip" style=
"font-style: italic" title="Edit"></a> <a class=
"btn icon-plus-sign" href="#" rel="tooltip" style=
"font-style: italic" title="Enter Attendance"></a>
</td>
</tr>
<?php
}
?>
</tbody>
</table>
Then after this table was created, I inserted the following Javascript code to initialize the table as a DataTable with jQuery:
<script type="text/javascript">
(document).ready(function() {
$('#datatables').dataTable( {
} );
);
</script>
I do not have appropriate reputation to upload images, so I have created an Imgur album with the database setup of my website and the error I get with the HTML page here: https://imgur.com/a/vacA4
I am not sure if the issue is database connection, DataTables, or something else. I have spent a lot of time on this issue and keep hitting roadblocks. Any help would be greatly appreciated.
Thank you in advance for your assistance.