Loading table showing blank lines

I have created this bootstrap table that populates data from a .PHP file, but I cannot get the formatting to look correct, see below:

Extra spacing table

The table has added many extra rows at the bottom and says "No data available in the table" below them.

Can anyone please advise how I can fix this?

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;