javascript - 引导表显示空行

我已经创建了这个引导表，该引导表填充了.PHP文件中的数据，但是我无法使格式看起来正确，请参见下文:

Table with extra spacing

该表在底部添加了额外的行，并在其下方显示“表中没有数据”。

有人可以建议我如何解决这个问题吗？

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;

最佳答案

将表结构更改为

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

然后输入您的结果，

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


    }
});