/jqueryxlpaging/zjdaima-bg-1530505473.png)
xlPaging
一个简单的分页插件,支持ajax,可以自定义展示数量
使用方法
- 下载并引入JQuery和xlPaging.js
- 在页面中增加一个盛放分页的DIV
<div id="page"></div>
- 在JS中对分页进行配置,其中pageNum为必写项。
简单模式
$("#page").paging({
pageNum: 7, //总页码
callback: function(num) { //回调函数,num为当前页码
console.log(num);
}
});
高级模式
$("#page").paging({
nowPage: 1, // 当前页码,默认为1
pageNum: 20, // 总页码
buttonNum: 7, //要展示的页码数量,默认为7,若小于5则为5
callback: function(num) { //回调函数,num为当前页码
console.log(num);
}
});
- 对分页进行个性化
<style>
//#page 的page是您自定义的id
#page {
margin: 20px auto;
color: #666;
display: block;
text-align: center;
}
//所有li的样式
#page li {
display: inline-block;
min-width: 30px;
height: 28px;
cursor: pointer;
color: #666;
font-size: 13px;
line-height: 28px;
background-color: #f9f9f9;
border: 1px solid #dce0e0;
text-align: center;
margin: 0 4px;
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
}
//上一页和下一页的样式
.xl-nextPage,.xl-prevPage {
width: 60px;
color: #0073A9;
height: 28px;
}
//失效状态样式
#page li.xl-disabled {
opacity: .5;
cursor: no-drop;
}
//当前页码显示状态
#page li.xl-active {
background-color: #0073A9;
border-color: #0073A9;
color: #FFF
}
</style>
分页结构
<div id="page">
<ul>
<li class="xl-prevPage">上一页</li>
<li>1</li>
<li class="xl-disabled">...</li>
<li>17</li>
<li>18</li>
<li>19</li>
<li class="xl-active">20</li>
<li class="xl-nextPage xl-disabled">下一页</li>
</ul>
</div>
搜索发现
-
1
-
2
-
3
- 4 jQuery nav导航(原创)
- 5 轮菜单
- 6 简易使用的导航栏
- 7 类似于Jquery的JS下拉菜单
- 8 jQuery树形组件(原创)
- 9 仿今日头条App顶部导航点击可居中(优化版)
- 10 jQuery仿flash导航代码
- 11 paging 分页插件
- 12 简易的动态生成表格和分页效果(原创)
- 13 jQuery分页插件jQuery.pager.js
- 14 css3回转菜单
- 15 jQuery水平方向菜单导航条 滑块伴随鼠标移动(原创)
-
1
仿浏览器主页搜索(原创)10550
-
2
angularjs日期选择插件10470
-
3
vue2.0实现全选,全不选。10462
- 4 jQuery QWERTY软键盘插件Virtual Keyboard
- 5 js汉字转拼音
- 6 jQuery环型进度倒计时
- 7 jquery表单验证插件form_validation.js
- 8 vue移动端优惠券模板
- 9 前端MD5加密插件md5.pro.js
- 10 jQuery多功能网页键盘插件
- 11 jQuery实现汉字转拼音的插件
- 12 jQuery拖拽插件Magnet.js
- 13 jQuery输入框数值加减调整插件
- 14 vue购物结算页面模板
- 15 jQuery倒计时插件countdown.js