Bootstrap Table 定时刷新固定滚动条的位置

场景:一张内容很大的表格,每隔一段时间刷新数据,用户看数据的时候突然刷新了,由于刷新后滚动条弹到顶部,这时客户再找刚才看的内容,就比较困难了,如何解决了?

思路:首先获取滚动条的位置,然后定时向后台请求数据的时候,把获取的滚动条的位置设成滚动到的位置。

主要代码:

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

$('#tableTest1').bootstrapTable('scrollTo', scollPostion);  注意此代码要在setTimeout里面执行,原因是重新获取数据后还要生成dom节点,需要时间

完整的代码:

<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');
        });
    });

微信公众号:前端之攻略  ,定时更新前端有关知识。

猜你喜欢

转载自my.oschina.net/u/2612473/blog/2236776