bootstrap-table 表格 翻页后上滑到顶部(scroll to the top)

bootstrap-table的表格翻页后,页面是不动的,当每一页的内容较多时浏览就比较麻烦,翻页后还要手动翻到顶部。也没有翻页后上滑到顶部的功能。搜了百度\github\stackoverflow都没有人讨论这个问题。

比较简单可行的办法:

改bootstrap-table源代码,打开bootstrap-table.min.js,找到

paginationItem:"<li class=\"page-item%s\"><a class=\"page-link\" aria-label=\"%s\" href=\"javascript:void(0)\" >

这里是添加翻页按键的代码,加上一个onclick属性,修改后:

paginationItem:"<li class=\"page-item%s\"><a class=\"page-link\" aria-label=\"%s\" href=\"javascript:void(0)\" onclick=\"scrollToTop()\">

可以直接加上翻页的函数,为了以后修改方便,也可以在js文件调用函数。添加onclick本身也可以在js中用函数完成,但是定位比较麻烦。

js文件加上:

function scrollToTop (){
    window.scrollTo(0,100);
}

这是最简单的方法了,试过用bootstrapTable('scrollTo', 0)不起作用,也可能是我代码有问题

这样翻页后页面基本回到了表格上方,效果还可以接受。

posted @ 2021-05-27 17:37  shang的学习园地  阅读(660)  评论(0)    收藏  举报