专栏首页前端之攻略Bootstrap Table 定时刷新固定滚动条的位置

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

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

(adsbygoogle = window.adsbygoogle || []).push({});

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • 包含合并单元格的固定表头 原

    $('#outtableDiv').scroll(function() {             var scrollTop=$('#outtableDiv...

    tianyawhl
  • BootstrapTable固定头和底部

    采用的bootstrapTable样式与js的版本是1.15.4,采用比较低的版本会在有滚动条的情况下,表格不对齐

    tianyawhl
  • Bootstrap Table 插件自定义排序使用方法

    Bootstrap Table 插件含有样式的数据如何排序,如下面的字段stargazers_count

    tianyawhl
  • DRF系列总结二:脚手架搭建

    本文会继续上一篇文章《DRF系列总结一:DRF是什么,要不要用?》,在Django基础工程的基础上,安装DRF并进行配置:比如统一接口返回格式、统一异常处理等,...

    高木工
  • SpringCloud之Gateway

    Spring Cloud Gateway旨在提供一种简单而有效的方法来路由到api,并为它们提供交叉关注点,例如:安全性、监视/度量和弹性。

    用户3467126
  • 自动化工具之Appium之报告自定义

    上面报告虽然麻雀虽小但五脏俱全,但是如果用这个发送报告不是很美观,如果错误没有截图与日志,通过观察testng有需要可以继承的监听,可以自定义报告;

    高楼Zee
  • 自定义你自己的Eureka管理界面

    Eureka服务端的界面是可以自定义的,而且方式比较简单,下面我们来看下修改方式。

    恒宇少年
  • 通过快递api获取物流信息示例-快递100

    ZhangXianSheng
  • Sublime Text插件的离线安装-使用htmlprettify美化您的HTML代码

    Sublime Text是广大程序员喜欢的文本编辑器,Jerry觉得它最强大之处在于开放的架构,有丰富的插件为其提供各种各样额外的功能。

    Jerry Wang
  • 「Mysql索引原理(十五)」维护索引和表-修复损坏的表

    即使用正确的类型创建了表并加上了合适的索引,工作也没有结束:还需要维护表和索引来确保它们都正常工作。维护表有三个主要的目的:找到并修复损坏的表,维...

    源码之路

扫码关注云+社区

领取腾讯云代金券