码迷,mamicode.com
首页 > Web开发 > 详细

基于jQuery的分页功能实现

时间:2016-01-29 12:11:20      阅读:156      评论:0      收藏:0      [点我收藏+]

标签:

第1步:分析问题  我这边的处理方式是根据传入的数据条数,和需要显示的页码数,自动生成页码。举个例子,如果传入的参数为{pageSize:10,totalRow:200}  那么就一共有20页。

首次生成的页码样式截图:

技术分享

第2步:点击操作 点击 2 或者下一页按钮的样式截图:

技术分享

第3步:生成新页面 这里可视的页码数是10.代码的处理机制是,以6为median 也就是中间值,刷新页码 点击6的样式截图:

 技术分享

第4步:此时点击6之后的页码,或者下一页按钮,会刷新页面,样式截图:

技术分享

html 结构

<div id="pagination">         
</div>

js 调用 getDataFun为点击之后执行的操作,可以是ajax请求

$("#pagination").paging({pageSize:10,totalRow:200,getDataFun:getData})

缺点是每次刷新页面都需要重写dom。应该是再刷新页面的时候只更改页码数,有时间在优化 - - ,最近写的东西都是会经常用到的一些小功能,新手。有错误请指正  那个在线预览怎么搞啊。是需要自己站点还是博客园有这个功能,,我没有找到 

有需要的话 完整代码demo 下载  paging.zip

 

基于jQuery的分页功能实现

标签:

原文地址:http://www.cnblogs.com/enemy/p/5168342.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!