你的位置:首页 > Java教程

[Java教程]基于jQuery的分页功能实现


第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