removing and re-populating boostrapTable

Question

I want basically to refresh the data held in a table. First instantiation works just fine, but no luck after removing and re-fetching of the data.

html

<table id="tablePendByOrg" class="table table-bordered table-hover table-condensed table-striped">
                        <thead>
                            <tr>
                                <th data-field="Date">Time</th>
                                <th data-field="Organization">Org</th>
                                <th data-field="f24hs"><24Hs</th>
                                <th data-field="f48Hs"><48Hs</th>
                                <th data-field="f48Hs">>48Hs</th>
                                <th data-field="fTotal">Total</th>
                            </tr>
                        </thead>
                    </table>

js to populate after ajax call.

$('#tablePendByOrg').bootstrapTable({        
    data: d.Table
});

js to remove data

$("#tablePendByOrg tbody tr").remove();

And after a new call to the ajax code, I get the proper data in d.Table but no tbody are showing on the page, just the framed th that I set from the get go.

Answer 1

As they describe:

$table = $('#tablePendByOrg');
$table.bootstrapTable('load', data); // removes old data, no need to remove it by yourself

also the removal o all items is not to be done as you did:

$("#tablePendByOrg tbody tr").remove();

use:

$table.bootstrapTable('removeAll');