jQuery实用的列表分页插件代码

来源:https://www.sucaihuo.com/js/2892.html 2017-09-01 22:26浏览(882) 收藏

一款jQuery实用的列表分页插件代码,可以设置总页数和总数据条数,点击不同的页码会有对应页码的文字弹窗,分页样式可以自由调整。
jQuery实用的列表分页插件代码
分类:其它特效 > jQuery插件 难易:初级
查看演示 下载资源 下载积分: 20 积分

页面的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>
标签: 分页分页插件
评论0
头像

系统已开启自动识别垃圾评论机制,识别到的自动封号,下载出错或者资源有问题请联系全栈客服QQ 1915635791

1 2