Question

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

该表在底部添加了额外的行，表示＆＃34;表格中没有可用的数据＆＃34;在他们下面。

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

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;

Answer 1

尝试将<tbody></tbody>放在 thead 和 tfoot 之间，然后将结果放在 tbody 中$('#entrieslist tfoot:last').after(result);与$('#entrieslist tbody').html(result);。

Answer 2

将表格结构更改为

<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();


    }
});

显示空行的Bootstrap表

2 个答案: