问题
A follow up on the question I asked earlier.
While Swati's solution works perfectly, I am having 2 problems with it.
- When I add
data-height=450
. It breaks how the header and body UI. It is adding the?
twice when I adddata-height=450
. - I have multiple tables on my page and they are created dynamically. Is there a way for me to implement
filter-control
only on the column when I click on the button on the header. Right now when I try and do that, it does nothing.
I have many many tables and when I use data-filter-control='select'
to load on a page with many many tables. It really slows the page down.
Is there a way for me to only add filter-control on the button on the header click.
THis is my code:
$(function() {
$('#ths').append(`
<th data-field="id">ID</th>
<th data-field="name" data-sortable="true">Item Name</th>
<th data-field="price" data-sortable="true">Item Price</th>
`);
$('#table').bootstrapTable()
// $(".filter-control").hide() //hide filter control
$('#table thead th').each(function() {
s = $('<span style="position: absolute;margin-left:10px">?</span>')
s.click(function(e) {
e.stopPropagation();
$('#table').attr('data-filter-control', 'true');
$(this).closest("th").attr('data-filter-control', 'input');
$(`#table`).bootstrapTable('refresh');
// $(this).closest("th").find(".filter-control").toggle();
});
$(this).find(".th-inner").append(s)
})
})
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.6.3/css/all.css" integrity="sha384-UHRtZLI+pbxtHCWp1t77Bi1L4ZtiqrqD80Kn4Z8NTSRyMA2Fd33n5dQ8lWUE00s/" crossorigin="anonymous">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-table/1.8.1/bootstrap-table.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js" integrity="sha512-bLT0Qm9VnAYZDflyKcBaQ2gg0hSYNQrJ8RilYldYQ1FxQYoCLtUjuuRuZo+fjqhx/qtq/1itJ0C2ejDxltZVFg==" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
<script src="https://unpkg.com/bootstrap-table@1.18.0/dist/bootstrap-table.min.js"></script>
<script src="https://rawgit.com/wenzhixin/bootstrap-table/master/dist/extensions/filter-control/bootstrap-table-filter-control.js"></script>
<table id="table" class='w-100 table table-bordered table-striped' data-search='true'
data-show-columns='true' data-pagination='true' data-buttons-align='left' data-buttons-class='light text-dark btn-sm' data-filter-control='false' data-height='460'>
<thead>
<tr id='ths'></tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>Item 1</td>
<td>$1</td>
</tr>
<tr>
<td>2</td>
<td>Item 2</td>
<td>$2</td>
</tr>
<tr>
<td>1</td>
<td>Item 1</td>
<td>$1</td>
</tr>
<tr>
<td>2</td>
<td>Item 2</td>
<td>$2</td>
</tr>
<tr>
<td>1</td>
<td>Item 1</td>
<td>$1</td>
</tr>
<tr>
<td>2</td>
<td>Item 2</td>
<td>$2</td>
</tr>
<tr>
<td>1</td>
<td>Item 1</td>
<td>$1</td>
</tr>
<tr>
<td>2</td>
<td>Item 2</td>
<td>$2</td>
</tr>
<tr>
<td>1</td>
<td>Item 1</td>
<td>$1</td>
</tr>
<tr>
<td>2</td>
<td>Item 2</td>
<td>$2</td>
</tr>
<tr>
<td>1</td>
<td>Item 1</td>
<td>$1</td>
</tr>
<tr>
<td>2</td>
<td>Item 2</td>
<td>$2</td>
</tr>
<tr>
<td>1</td>
<td>Item 1</td>
<td>$1</td>
</tr>
<tr>
<td>2</td>
<td>Item 2</td>
<td>$2</td>
</tr>
<tr>
<td>1</td>
<td>Item 1</td>
<td>$1</td>
</tr>
<tr>
<td>2</td>
<td>Item 2</td>
<td>$2</td>
</tr>
</tbody>
</table>
来源:https://stackoverflow.com/questions/64761436/do-not-implement-filter-control-on-bootstrap-table-till-button-is-clicked