分页的两种实现方法

在网页制作中,内容的显示通常有两种方式,一种是分页的。



这种显示方式一般用在PC上的新闻,或者信息的显示。

还有一种方式是随着我们不断的下拉,内容不断的出现的瀑布流方式。

比如简书就是这种方式。(只要内容没显示完,右边的滚动条是怎么都拉不到底的)

今天先来聊聊分页功能。(瀑布流下次再聊)

1.Jquery

我以前做分页功能的时候,一般使用jquery来实现,实现代码如下。

实现的过程也很简单,想要实现分页,我们需要知道两个参数,一个是一共有多少页,另一个是当前页应该显示那几个数据。

总页数比较简单,我们只要知道表格一共有多少行就行。($("#tablelist").rows.length)

另一个是当前应该显示哪几个数据。

假设每页显示10个数据,那么我们只需要知道当前是第几页,数据是否结束就可以了。

如果我们知道是第一页,最后一个数据是8,小于10,那么就显示18。如果最后一个数是12,大于10,那就显示110。

所以在代码中,结束行=当前页数*每页的显示数量。

但是拿到结束行之后还要跟行数做对比,结束行如果大于行数,则显示行数,否则显示结束行。

但是这样实现之后是计算一次的,那我们点击按钮需要动态实现,所以让分页的按钮重新调用goPage函数。

这是比较传统的办法,但是还有一种异步刷新的办法也可以实现。

2.Ajax

用Ajax实现的思想是一样的,也是先计算总页数,然后计算当前应该显示哪几个数据,但是Ajax有一点不一样的地方是,它是通过数据库实现计算的。

我建了个简单的数据库做测试。

先获得数据的总数(select count(username) from user)


然后获得特定的数据并显示。(比如显示第2跟第5之间的数据)


我们只要把开始和结束两个参数传入数据库,就可以显示出特定的数据。这里为了方便,这里直接将数据库绑定到DataSet上。

然后只要在前台将数据反序列化显示出来就行。

Paste_Image.png
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • Android 自定义View的各种姿势1 Activity的显示之ViewRootImpl详解 Activity...
    passiontim阅读 173,559评论 25 708
  • 发现 关注 消息 iOS 第三方库、插件、知名博客总结 作者大灰狼的小绵羊哥哥关注 2017.06.26 09:4...
    肇东周阅读 12,257评论 4 61
  • 主题:应对批评 本片段来自《谈话的力量》 图书介绍: 《谈话的力量》已经成为全世界最受欢迎的教授谈话技巧的图书。多...
    当梦醒来以后阅读 329评论 1 0
  • 案例名称:新区凝结水串油事故。 案例时间:2015.4.7. 案例经过:当时生产状态是原水罐液位8.9米,净水罐液...
    春色满园_61e5阅读 499评论 0 0