#1.需求
先说下工作中遇到的实际情况。有这么个需求,前台有可能会接收几千,几万条数据,需要使用table展示,而需求中又不能使用分页功能。试想一下,一行数据展示十几列,再展示几千,几万行,浏览器得渲染多少个dom元素,结果自然就是boom!!!
#2.思路(重点)
这里说下我当时思考的全过程,既然table根本无法渲染那么多数据,那么我们能不能固定渲染几十个行row,这里我暂定为50行,动态的给这些row填充需要的数据,那么什么时候动态填充呢。答案就是滚轴,当滚轴滑动到底部的时候,需要再次赋值新的50条数据,替换掉当前渲染的50条数据,而当滚轴滑动到顶部的时候,则需要重新赋值之前的50条数据。那么这样就结束了吗?当然不,我们还需要把滚动条设置到相应的位置上面,这样用户的体验才会更好。这个时候我们继续思考,如果我们50条的50条的直接替换数据,对于用户而言似乎体验并不怎么好,数据切换显得非常突兀。如果我们渲染50条数据,当重新赋值,如果只赋值50条的一半呢,然后把滚动轴设置到table的中间,数据有个承上启下的过程,用户是不是体验会更好。
#3.代码
图中的rownum这一列是我为了测试数据刷新的准确性,而在mysql中写的从1开始的自增列(又可以水一篇文章了)

我们真正需要展示的数据,并不是从后台拿到的原始数据(list),而是我们处理过后的数据(showList),同时,我们需要两个变量,showBegIndex和shoEndIndex,从list中取我们需要的数据。

这里则是获取到table的dom,并且注册滚轴的监听事件,滚轴滑动到顶部,底部则需要自己判断,并执行相应的的方法

这里需要做的,只是数据的初始化,我这里暂定展示50条,写死的,真正开发中,定义一个全局变量即可

下滑加载更多的方法,只要判断好下标,可以看到,我这里的操作为,将需要截取的下标起点和终点各增加25,这样,实际只是展示了新的25条数据,同时滚轴设置到table中间,对于用户而言,体验较好,不会显得很突兀

上滑加载之前数据,套路当然和下滑加载更多一样了

需要说下,slice()方法是深拷贝,所以不会影响原始数据(list),只是返回新的数据。
以上!!!