Bootstrap-table Hidden Rows Bug
Sorting a bootstrap-table on any column reveals hidden rows
HTML
<link rel="stylesheet" href="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css">
<script src="https://rawgit.com/wenzhixin/bootstrap-table/master/src/bootstrap-table.js"></script>
<link rel="stylesheet" href="https://rawgit.com/wenzhixin/bootstrap-table/master/src/bootstrap-table.css">
<script src="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
<h4>Bootstrap-table Hidden Rows Bug</h4>
<table id="table" data-toggle="table" data-sort-name="name" data-sort-order="asc" data-unique-id="uniqueId">
<thead>
<tr>
<th data-field="uniqueId" data-visible="false"></th>
<th data-field="name" data-sortable="true">Name</th>
<th data-field="institution" data-sortable="true">City</th>
</tr>
</thead>
<tbody>
<tr> <td></td>
<td>1</td>
<td>Alex</td>
<td>Anaheim</td>
</tr>
<tr>
<td>2</td>
<td>Ben</td>
<td>Boston</td>
</tr>
<tr>
<td>3</td>
<td>Cathy</td>
<td>Chicago</td>
</tr>
</tbody>
</table>
<div class="checkbox">
</div>
<div class="checkbox">
<label>Ben
<input type="checkbox" data-bs-table-unique-id="2" checked>
</label>
</div>
<div class="checkbox">
<label>Cathy
<input type="checkbox" data-bs-table-unique-id="3" checked>
</label>
</div>
JavaScript
$('input[type=checkbox][data-bs-table-unique-id]').change(function() {
if ($(this).prop("checked")) {
$('#table').bootstrapTable('showRow', {
'uniqueId': $(this).data('bs-table-unique-id')
});
} else
$('#table').bootstrapTable('hideRow', {
'uniqueId': $(this).data('bs-table-unique-id')
});
});