作者:水急送_113 | 来源:互联网 | 2023-10-14 17:35
前台分页控件有很多,这里分享我的分页控件 pagination.js 1.0版本,该控件基于jquery。
先来看一下预览效果:
默认情况下,点击页码会像博客园一样,在url后面加上"#p页码"。
控件有2个参数需要注意:
1. beforeRender: 在每个页码项呈现前会被调用,参数为页码的jQuery对象。这个时候我们可以在呈现前做一些处理,例如增加自己的属性等。默认情况下,点击页码,会在url后面加上“#p页码”,这样的url并不会刷新页面。如果我们需要刷新页面,例如url为,"default.aspx?index=页码",就可以在这个回调函数里处理。
2. callback: 点击页码触发,参数为整个options。点击页码并不会发起ajax请求,需要自己处理,options.index 就是本次点击的页码。有时候我们的总数可能会变化,callback 可以将 options 参数回传,这里只要重新设置总数,然后 return 即可。
具体看调用例子就明白了。
源代码:
样式:
样式很简单,可以自己调。
.pager{height:30px;line-height:30px;font-size: 12px;margin: 25px 0px;text-align: center;color: #2E6AB1;overflow: hidden;}
.pager a{border:1px solid #9AAFE5;color:#2E6AB1;margin:0px 5px;padding:5px 8px;text-decoration: none;}
.pager a.hover,.pager a.active{background-color:#2E6AB1;border-color:#000080;color:#FFF;}
.pager a.disabled{color:#C8CDD2;cursor:auto;}
使用例子:
pagination.js 1.0 还有可能还有一些不足和bug,我会及时修正。
以上就是本文的全部内容,希望对大家的学习有所帮助。