Bootstrap table showing empty rows

Question

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;

score 1 · Answer 1 · answered Jul 14 '17 at 16:21

1

try to put <tbody></tbody> between the thead and the tfoot then put the result inside the tbody
replace $('#entrieslist tfoot:last').after(result); with $('#entrieslist tbody').html(result);.

answered Jul 14 '17 at 16:21

Mark Vincent Manjac

507
1
6
27

Hi Mark, thank you for your reply, for some reason the page now looks like this: [link](http://imgur.com/a/aYyme). The data shows but only on the last page of table results, also it's made the table look blocky, if you compare it to the original screenshot. Thanks for all your help so far! – Harry Jul 16 '17 at 08:39

score 1 · Accepted Answer · answered Jul 16 '17 at 07:46

1

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


    }
});

answered Jul 16 '17 at 07:46

Av Software Solutions

26
4

Hi Av, thanks for your reply, I tried your solution and it does the same thing that Mark's does, see comment below and screenshot: [link](http://imgur.com/a/aYyme). Data only shows on the last page. Thank you for your help so far! – Harry Jul 16 '17 at 08:41
1

first remove table content `$("#entrieslist tbody").html();` – Av Software Solutions Jul 16 '17 at 08:43
I replaced `$('#entrieslist tbody').html(result);` with `$("#entrieslist tbody").html();` which is what I'm assuming you're asking me to do, this returned a blank table with no results – Harry Jul 16 '17 at 08:51
sorry, `$("#entrieslist tbody").html('');` before sending ajax – Av Software Solutions Jul 16 '17 at 08:53
Thank you for your help! Your solution did work - there were a load of blank rows in my SQL table, another .php file was running every time the page loaded and was entering a blank row into it... – Harry Jul 17 '17 at 08:26

Bootstrap table showing empty rows

2 Answers2