用面向对象实现的纯js分页

最新推荐文章于 2024-07-01 11:34:43 发布

置顶

xiaobaoxiaodun

最新推荐文章于 2024-07-01 11:34:43 发布

阅读量3.1k

点赞数 2

分类专栏： javascript 文章标签： function class null javascript div 脚本

本文链接：https://blog.csdn.net/xiaobaoxiaodun/article/details/6781922

版权

本文介绍了一个纯JavaScript实现的面向对象分页组件，具有参数对象化、支持异步/同步分页和CSS接口自定义样式等特点。代码经过重构，适用于各种平台，提供百度风格的显示效果。

摘要由CSDN通过智能技术生成

纯的javascript实现的面向对象的分页脚本，万能的分页脚本，跨平台的分页脚本

最近因为项目的原因，把此前写的分页组件重构了下，现在的显示风格是类似百度的那种，对整个代码的结构也优化了，增加了几个亮点：
1、将参数对象化，这也是“javascript语言精粹”中提倡的，这样可以方便的处理默认参数。
2、通过传入参数显示的支持了分页是异步还是同步的，默认是同步的，即刷新的。
3、添加了和CSS的接口，组件本身已经完全实现了功能，并有基本的样式，但是通过CSS的接口，可以使得通过附加的外部样式来改变或者美化分页的显示效果。

欢迎大家指正，在项目中使用后，同事都说不错，呵呵。

/**
  * 带页码的分页
* new PagerB({
recordCount:36, 
pageContainer:"page",
funPageSearch:function(currentPage){
location="testPage.html?currentPage="+currentPage;
},
currentPage:1,
pageSize:10,
pageNum=12,
sync:false
});<br/>
* recordCount 总的记录数<br/>   
* pageContainer容纳分页元素的id<br/>
* funPageSearch 回调的查询方法<br/>
* currentPage 当前页,默认为1<br/>
* pageSize 每页的记录数，默认10条<br/>  
* pageNum 每页显示的页码数量，默认值=10，最小值亦为10<br/>
* sync 同步还是异步，默认为同步<br/>
* @author:yxd<br/>
* email:yxd_yxd2008@163.com

* 附加的样式代码
  <style type="text/css">
       #pager{text-align:center;margin:30px auto;padding:3px}
       #pager>span{font-weight:700;}
       #pager>div span{margin:2px;padding:3px 5px;}
       #pager span.use{border:#dbdbdb 1px solid;color:#666;text-decoration:none; cursor:pointer;}
       #pager>div span.cur{background:#fb4e0b;border:1px solid #f03b00;color:#fff}
       #pager>div span.use:hover{background:#fb4e0b;border:1px solid #f03b00;color:#fff}
       #pager .unUse{display:none}
   </style>
     
*/
 function PagerB(pageInfo){
  this.recordCount=pageInfo.recor