问题
I am using bootstrap table with filter control. I want to be able to add a button(icon) on each of my th's to hide and show the filter control.
Is there a way to do that?
This is an example on bootstrap table: https://live.bootstrap-table.com/example/extensions/filter-control.html
As you can see the filter control takes up a lot of place on the header. I just wanted to see if it was possible to only add the filter control by adding an icon on the header that adds the filter control on click of that icon.
My code:
<table
id="table"
data-url="json/data1.json"
data-filter-control="true"
data-show-search-clear-button="true">
<thead>
<tr>
<th data-field="id">ID</th>
<th data-field="name" data-filter-control="input" data-sortable="true">Item Name</th>
<th data-field="price" data-filter-control="select" data-sortable="true">Item Price</th>
</tr>
</thead>
</table>
JS
$(function() {
$('#table').bootstrapTable()
})
When I try and add the append for the icon:
$('#table thead th').each(function() {
s = $('<span style="position: absolute; left: 4px; top: 8px; cursor: pointer;">?</span>')
s.click(function(e) {
e.stopPropagation();
alert('Question mark clicked')
});
$(this).append(s)
})
For starters, it only adds the icon on the first th
and the second problem is that on click it, it sorts the data instead of giving me the dummy alert I set up to see if the click is working.
How do I add a clickable icon on the left without affecting the sorting?
回答1:
You can append span
which you have created inside each
loop under th-inner
so that it will appear side by side of the header .Also , you can hide filter-control
div this contains the filter which you need to use either input
or select
.So , whenever ?
is clicked just get reference of this div to show/hide same.
Demo Code :
$(function() {
$('#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();
//get closest filter control div hide/show same
$(this).closest("th").find(".filter-control").toggle();
});
//append span inside th-inner class
$(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" data-filter-control="true" data-show-search-clear-button="true">
<thead>
<tr>
<th data-field="id">ID</th>
<th data-field="name" data-filter-control="input">Item Name</th>
<th data-field="price" data-filter-control="select">Item Price</th>
</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>
</tbody>
</table>
来源:https://stackoverflow.com/questions/64720472/add-button-on-header-th-to-hide-and-show-filter-control-in-bootstrap-table