一款jQuery实用的列表分页插件代码,可以设置总页数和总数据条数,点击不同的页码会有对应页码的文字弹窗,分页样式可以自由调整。
页面的head部分,简单设置好页面的分页样式,带如下:
* {
padding: 0;
margin: 0;
}
/*
* 外面盒子样式---自己定义
*/
.page_div {
margin-top: 20px;
margin-bottom: 20px;
font-size: 15px;
font-family: 'Microsoft YaHei','Lantinghei SC','Open Sans',Arial,'Hiragino Sans GB','STHeiti','WenQuanYi Micro Hei','SimSun',sans-serif;
color: #666666;
margin-right: 10px;
padding-left: 20px;
box-sizing: border-box;
}
/*
* 页数按钮样式
*/
.page_div a {
min-width: 30px;
height: 28px;
border: 1px solid #dce0e0!important;
text-align: center;
margin: 0 4px;
cursor: pointer;
line-height: 28px;
color: #666666;
font-size: 13px;
display: inline-block;
}
#firstPage,
#lastPage {
width: 50px;
color: #0073A9;
border: 1px solid #0073A9!important;
}
#prePage,
#nextPage {
width: 70px;
color: #0073A9;
border: 1px solid #0073A9!important;
}
.page_div .current {
background-color: #0073A9;
border-color: #0073A9;
color: #FFFFFF;
}
.totalPages {
margin: 0 10px;
}
.totalPages span,
.totalSize span {
color: #0073A9;
margin: 0 5px;
}
页面的body部分,需设置好分页显示的div容器,代码如下:
<div id="page" class="page_div"></div>
页面的底部,需引入jQuery库和分页插件,并设置好分页的参数,代码如下:
<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src="js/paging.js"></script>
<script type="text/javascript">
//分页
$("#page").paging({
totalPage: 10,
totalSize: 300,
callback: function(num) {
alert("第 "+ num +" 页");
}
})
</script>
系统已开启自动识别垃圾评论机制,识别到的自动封号,下载出错或者资源有问题请联系全栈客服QQ 1915635791