CSS Question

How can I reinitialize an already loaded bootstrap table?

I have a

table table-bordered table-hover table-stripped
table loaded with some data.
I reload the rows with ajax and the table becomes ugly, losing all the properties of the table-bordered, table-hover and table-stripped bootstrap classes.
How can I reload those properties? Does it come with the JS?

Edit:
Here's the code.

Table:

<table class="table table-bordered table-hover table-stripped" id="data_list">
<tr>
<th>Lot</th>
<th>size</th>
</tr>
<?php foreach ($lots as $lot): ?>
<tr>
<td><?php echo $lot['id']; ?></td>
<td><?php echo $lot['size']; ?></td>
</tr>
<?php endforeach ?>
</table>


JS:

...
$.ajax({type: "POST",cache: false,url: '?', dataType: "html", data: submitdata,
success: function(res) {
$('#data_list').html(res);
},
error: function(xhr, ajaxOptions, thrownError) {
bootbox.alert("There was an error, try again. "+thrownError);
},
async: true
});


AJAX response:

<tr>
<th>Lot</th>
<th>Size</th>
</tr>
<tr>
<td>38706000524</td>
<td>30</td>
</tr>

Answer Source

The table element requires a tbody wrapper for its internals. On most browsers, if you dont explicitly define one, it will automatically wrap one around the internals for you.

If you inspect your page's generated code, you'll notice there is a tbody present that you didnt specify in your original html.

When you're replacing the contents using .html() the browser doesnt perform the automatic wrapping, so you lose the tbody.

You should either return one as part of your server code AND update your original code.

<table class="table table-bordered table-hover table-stripped" id="data_list">
    <tbody>
        <tr>
            <th>Lot</th>
            <th>size</th>
        </tr>
        <?php foreach ($lots as $lot): ?>
            <tr>
                <td><?php echo $lot['id']; ?></td>
                <td><?php echo $lot['size']; ?></td>
            </tr>
        <?php endforeach ?>
    </tbody>
</table>

OR add one in your original code, and change the .html() replace code to be

 $('#data_list tbody').html(res);
Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download