CODEWITHSUNDEEP
jquerycsstwitter-bootstraptwitter-bootstrap-3
Allfarid Morales García
Allfarid Morales García

Reputation: 1547

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>

Upvotes: 0

Views: 1463

Answers (2)

haxxxton
haxxxton

Reputation: 6442

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

Upvotes: 2

Allfarid Morales Garc&#237;a
Allfarid Morales Garc&#237;a

Reputation: 1547

I could figure it up. When the table is loaded, bootstrap adds the 

<tbody>

container. If you modify the table later, you must not overwrite that element.

I changed my ajax response from

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

to

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

Upvotes: 0

Related Questions