Fixed Column can not work with Filter Control,

fangmanlu commented 3 years ago

Hi, When I click the select filter, data will not be filtered, and the selected text will disappear. Besides, 'div.fixed-table-border' will exceed the device width. Please check it, thank you so much.

<html lang="en">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <title>Bootstrap Table fixed column & filter control</title>

    <link rel="stylesheet" href="https://kit-free.fontawesome.com/releases/latest/css/free.min.css">
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/css/bootstrap.min.css" integrity="sha384-TX8t27EcRE3e/ihU7zmQxVncDAy5uIKz4rEkgIXeMed4M0jlfIDPvg6uqKI2xXr2" crossorigin="anonymous">
    <link rel="stylesheet" href="https://unpkg.com/bootstrap-table@1.18.2/dist/bootstrap-table.min.css">
    <link rel="stylesheet" href="https://unpkg.com/bootstrap-table@1.18.2/dist/extensions/filter-control/bootstrap-table-filter-control.min.css">
    <link href="https://unpkg.com/bootstrap-table@1.18.2/dist/extensions/fixed-columns/bootstrap-table-fixed-columns.min.css" rel="stylesheet">

    <script src="https://cdn.jsdelivr.net/npm/jquery@3.5.1/dist/jquery.min.js"></script>
</head>

<body>
    <table
        id="table"
        data-toggle="table"
        data-filter-control="true"
        data-fixed-columns="true"
        data-show-search-clear-button="true">
        <thead>
            <tr>
                <th data-field="campaign" data-filter-control="select">campaign name</th>
                <th data-field="ad_group">AD group</th>
                <th data-field="targeting">targeting</th>
                <th data-field="match_type">match type</th>
                <th data-field="search_term">search term</th>
                <th data-field="impressions7">7I</th>
                <th data-field="clicks7">7C</th>
                <th data-field="spend7">7S</th>
                <th data-field="sales7">7_</th>
                <th data-field="impressions15">15I</th>
                <th data-field="clicks15">15C</th>
                <th data-field="spend15">15S</th>
                <th data-field="sales15">15_</th>
                <th data-field="impressions30">30I</th>
                <th data-field="clicks30">30C</th>
                <th data-field="spend30">30S</th>
                <th data-field="sales30">30_</th>
                <th data-field="impressionsAll">AllI</th>
                <th data-field="clicksAll">AllC</th>
                <th data-field="spendAll" data-sortable="true">AllS</th>
                <th data-field="salesAll">All_</th>
                <th data-field="acos7" data-sortable="true" data-sorter="acosSorter">7A</th>
                <th data-field="acos15" data-sortable="true" data-sorter="acosSorter">15A</th>
                <th data-field="acos30" data-sortable="true" data-sorter="acosSorter">30A</th>
                <th data-field="acosAll" data-sortable="true" data-sorter="acosSorter">AllA</th>
            </tr>
        </thead>
    </table>

<script>
    function getData() {
        res = [
            {"acosAll":"","ad_group":"ED MANU","campaign":"ED MAN","clicksAll":1,"impressionsAll":1,  "match_type":"BROAD","salesAll":0,"search_term":"eulb","spendAll":0.8,"targeting":"e2"},
            {"acos15":"","acos30":"","acos7":"","acosAll":"","ad_group":"Ad group 1","campaign":"ed blb-auto","clicks15":1,"clicks30":1,"clicks7":1,"clicksAll":2,"impressions15":9,"impressions30":9,"impressions7":9,"impressionsAll":12,"match_type":"-","sales15":0,"sales30":0,"sales7":0,"salesAll":0,"search_term":"b002e3","spend15":0.76,"spend30":0.76,"spend7":0.76,"spendAll":1.49,"targeting":"*"},
            {"acos30":"","acosAll":"","ad_group":"borad","campaign":"td lb-auto","clicks30":1,"clicksAll":1,"impressions30":1,"impressionsAll":1,"match_type":"-","sales30":0,"salesAll":0,"search_term":"ligb","spend30":1.19,"spendAll":1.19,"targeting":"*"}
        ]
        return res
    }
    $(function() {
        $('#table').bootstrapTable({
            data: getData(),
            height: 600,
            //fixedColumns: true,
            fixedNumber: 1,
            fixedRightNumber: 1,
        })
    })
</script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ho+j7jyWK8fNQe+A12Hb8AhRq26LrZ/JpcUGGOn+Y7RsweNrtN/tE3MoK7ZeZDyx" crossorigin="anonymous"></script>
<script src="https://unpkg.com/bootstrap-table@1.18.2/dist/bootstrap-table.min.js"></script>
<script src="https://unpkg.com/bootstrap-table@1.18.2/dist/extensions/fixed-columns/bootstrap-table-fixed-columns.min.js"></script>
<script src="https://unpkg.com/bootstrap-table@1.18.2/dist/extensions/filter-control/bootstrap-table-filter-control.min.js"></script>
<script src="https://unpkg.com/bootstrap-table@1.18.2/dist/extensions/filter-control/utils.min.js"></script>
</body></html>

wenzhixin commented 3 years ago

It seems that the current version does not support the height option. Working example without height: https://live.bootstrap-table.com/code/wenzhixin/6731

djhvscf commented 3 years ago

Correct. at this moment the height option is not supported.

wenzhixin / bootstrap-table

Fixed Column can not work with Filter Control, #5595