使用MySQL填充jQuery DataTable

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.

You could just use the data option for dataTable, and feed the php data structure through the json_encode

dataTable({
  ...
  data: <?phpecho json_encode($data_prepared_from_db); ?>
})