Do not implement filter control on bootstrap-table till button is clicked

问题

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 add data-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

标签

javascript

jquery

filter

bootstrap-4

bootstrap-table