jqPageNavigater 正在参加 2021 年度 OSC 中国开源项目评选,请投票支持!
jqPageNavigater 在 2021 年度 OSC 中国开源项目评选 中已获得 {{ projectVoteCount }} 票,请投票支持!
2021 年度 OSC 中国开源项目评选 正在火热进行中,快来投票支持你喜欢的开源项目!
2021 年度 OSC 中国开源项目评选 >>> 中场回顾
jqPageNavigater 获得 2021 年度 OSC 中国开源项目评选「最佳人气项目」 !
授权协议 GPL
开发语言 JavaScript
操作系统 跨平台
软件类型 开源软件
开源组织
地区 国产
投 递 者 uncle_zhang
适用人群 未知
收录时间 2016-01-22

软件简介

jqPageNavigater

首先要说明的是,这插件本来是写给自己玩的,所以代码质量什么的是很渣的...各位大神别喷呀

这是一个简单的jQuery 分页栏,没有实现很多的功能,样式也很简单,实现自定义比较方便,默认给了几个例子。如果你只是想要一个简单的分页组件,那可能这个就适合你。

如果哪里写得不好,可以改进的地方,欢迎各位大神指导小弟改进

使用:

1. 导入相关文件

<script type="text/javascript" src="../JS/jquery-1.7.1.min.js"></script>
<script type="text/javascript" src="../JS/jqPageNavigater.js"></script>
<link rel="stylesheet" type="text/css" href="../CSS/jqPageNavigater.css" />
2.添加一个div作为分页栏容器
<div class="pageNavigater"></div>
3.实现分页
$(".pageNavigater").pageNavigater({
	pageNo:'15',//代表当前页码,可以自行更改测试效果
	pageSize:'5', //每页展示多少数据
	paginationSize:7,//分页导航栏的长度
	totalNum:'100', //总共有多少数据
	callback:function(pageNo) {	//回调函数
		alert("this is page"+pageNo);
	}
});


样式也很简单,想要什么就自定义。

@CHARSET "UTF-8";
.btn_page{
	/*页码样式*/
	text-decoration:none;
	margin-right: 8px;
}
.current_page{
	/*当前页码样式*/
	text-decoration:none;
	margin-right: 8px;
}
.prevPage{
	/*上一页样式*/
}
.lastPage{
	/*尾页样式*/
}
.firstPage {
	/*首页样式*/
}
.nextPage{
	/*下一页样式*/
}




展开阅读全文

代码

的 Gitee 指数为
超过 的项目

评论

点击引领话题📣
暂无内容
发表了博客
{{o.pubDate | formatDate}}

{{formatAllHtml(o.title)}}

{{parseInt(o.replyCount) | bigNumberTransform}}
{{parseInt(o.viewCount) | bigNumberTransform}}
没有更多内容
暂无内容
发表了问答
{{o.pubDate | formatDate}}

{{formatAllHtml(o.title)}}

{{parseInt(o.replyCount) | bigNumberTransform}}
{{parseInt(o.viewCount) | bigNumberTransform}}
没有更多内容
暂无内容
暂无内容
0 评论
5 收藏
分享
OSCHINA
登录后可查看更多优质内容
返回顶部
顶部