Scenario: a table with a large content refreshes the data every other period of time. The user suddenly refreshes when viewing the data. As the scroll bar pops to the top after refreshing, it is difficult for the customer to find the content they just saw. How to solve this problem?

Idea: first obtain the position of the scroll bar, and then set the position of the acquired scroll bar to the position to scroll to when requesting data from the background regularly.

Main code:

var scollPostion = $('#tableTest1').bootstrapTable('getScrollPosition');

$('#tabletest1'). Bootstrap table ('scrollto ', scollposition);; note that this code needs to be executed in setTimeout, because it needs time to generate dom nodes after getting data again

Complete code:

<table class="table-striped table-hasthead" id="tableTest1" data-search="true">
    <thead>
        <tr>
            <th data-sortable="true" data-field="id">Id</th>
            <th data-field="name">Name</th>
            <th data-sortable="true" data-field="url">Website</th>
            <th data-field="alex">Texa</th>
            <th data-field="country">Country</th>
        </tr>
    </thead>
</table>

    $(function() {
        var url = "selectBtTable.php?action=init_data_list";
        $('#tableTest1').bootstrapTable({
            height: $(window).height() - 460,
            url: url
        });
        setInterval(refreshData, 3000)
        function refreshData() {
            var scollPostion = $('#tableTest1').bootstrapTable('getScrollPosition');
            $('#tableTest1').bootstrapTable('refresh', { silent: true, url: "selectBtTable.php?action=init_data_list" });
            setTimeout(function() {
                $('#tableTest1').bootstrapTable('scrollTo', scollPostion);
            }, 60);
        }
        $(window).resize(function() {
            $('#tableTest1').bootstrapTable('resetView');
        });
    });

WeChat public: front-end strategy, updating the front-end knowledge regularly.