Bootstrap table showing empty rows

I've created this bootstrap table that is populating data from a .PHP file however I can't get the formatting to look correct, see below:

Table with extra spacing

The table has loads of extra rows added at the bottom and says "No data available in table" underneath them.

Could somebody advise how I can fix this please??

HTML:

<div class="row">
    <div class="col-md-12">
        <div class="box box-primary">
            <div class="box-header">
                <h3 class="box-title">Existing Log Entries</h3>
            </div>

            <form role="form">
                <div class="box-body">
                    <div class="col-md-12" id="div-log-list">
                    </div>
                </div>
                <div class="box-footer">
                </div>
            </form>


            <table id="entrieslist" class="table table-bordered table-striped dataTable">
                <thead>
                    <tr>
                        <th>Date/Time</th>
                        <th>Server Name</th>
                        <th>Carried Out By</th>
                        <th>Verified By</th>
                        <th>Authorised By</th>
                        <th>Work Carried Out</th>
                        <th>Work Verification</th>
                        <th>Change Reason</th>
                        <th>Perceived Impact</th>
                        <th>Rollback Process</th>
                    </tr>
                </thead>
                <tfoot>
                    <tr>
                        <th>Date/Time</th>
                        <th>Server Name</th>
                        <th>Carried Out By</th>
                        <th>Verified By</th>
                        <th>Authorised By</th>
                        <th>Work Carried Out</th>
                        <th>Work Verification</th>
                        <th>Change Reason</th>
                        <th>Perceived Impact</th>
                        <th>Rollback Process</th>
                    </tr>
                </tfoot>
            </table>



        <div class="overlay" id="box-loading">
          <i class="fa fa-refresh fa-spin"></i>
        </div>




        </div>
    </div>
</div>

Javascript:

// Cell spacing for log entry table
document.getElementById("entrieslist").style.borderSpacing = "10px";

// Populates log entry table
$.ajax({
    type: "post",
    url: "ajax/ajax-process-log-entry.php", 
    success: function(result){
        $('#entrieslist tfoot:last').after(result);
        $('#box-loading').hide();
        $("#entrieslist").dataTable();


    }
});

PHP:

// List existing server log entries
$stmt = $db->prepare("SELECT * FROM [ralanet].[dbo].[server_log_entries] (nolock)");

$stmt->execute();
$lines = $stmt->fetchAll(PDO::FETCH_ASSOC);



$counter = 0;
foreach( $lines as $row) {
echo '<tr>';
echo        '               
        <td>'.$row['date_time'].'</td>
        <td>'.$row['server_name'].'</td>
        <td>'.$row['carried_out_by'].'</td>
        <td>'.$row['verified_by'].'</td>
        <td>'.$row['authorised_by'].'</td> 
        <td>'.$row['work_carried_out'].'</td>
        <td>'.$row['work_verified'].'</td>
        <td>'.$row['change_reason'].'</td>
        <td>'.$row['perceived_impact'].'</td>
        <td>'.$row['rollback_process'].'</td>
            ';
echo '</tr>';}
$counter++;

$db = null;

Solution

Change the table structure into

<table>
    <thead></thead>
    <tbody></tbody>
    <tfoot></tfoot>
</table>

And put in your result like,

$.ajax({
    type: "post",
    url: "ajax/ajax-process-log-entry.php", 
    success: function(result){
        $('#entrieslist tbody').html(result);
        $('#box-loading').hide();
        $("#entrieslist").dataTable();


    }
});