基于jQuery的分页功能实现

Posted 2020-06-10

第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