自定义jQuery分页导航插件

最新推荐文章于 2021-09-13 14:09:51 发布

LuckyRyan-2014

最新推荐文章于 2021-09-13 14:09:51 发布

阅读量650

点赞数 1

CC 4.0 BY-SA版权

分类专栏： Web前端 JAVA 综合文章标签： jquery html javascript 分页插件

本文链接：https://blog.youkuaiyun.com/u012429375/article/details/51534350

JAVA 同时被 3 个专栏收录

6 篇文章

订阅专栏

Web前端

2 篇文章

订阅专栏

综合

1 篇文章

订阅专栏

本文介绍如何利用jQuery创建一款自定义的分页导航插件，通过实例展示其最终效果，帮助开发者实现更灵活的页面内容切换功能。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

使用jQuery实现自定义的分页导航插件，效果如下图：

<span style="font-size:18px;"><!doctype html>
<html>
<head>
<title>MyWeb UI Examples</title>
    <meta charset="utf-8">
	<style type="text/css" rel="stylesheet">
	.page-nav {
	 	height: 45px;
	 	background-color: #efefef;
	 	border: 1px solid #ccc;
	 	margin-top: 50px;
	}
	</style>
</head>
  
<body>

	<!-- 分页导航区 -->
	<div id="page-nav" class="page-nav"></div>

	<link rel="stylesheet" type="text/css" href="css/ryan-pagination.css">
	<script type="text/javascript" src="scripts/jquery-1.12.3.js"></script>
	<script type="text/javascript" src="scripts/ryan-pagination-1.0.0.js"></script>
	<script type="text/javascript"> 
	$(function(){
		var settings = {
				totalSize: 143  // 记录总条数
			};
		$("div#page-nav").ryanPagination(settings);
	}); 
</script> 
</body>
</html> </span>

$.fn.ryanPagination = function(settings){
	var opts = $.extend({}, {
		showPageNum: 9,
		pageSize: 10,      // 默认每页展示10条记录
		showTitle: false   // 是否展示导航按钮的title信息
	}, settings);
	// 计算数据总页数
	opts.totalPage = Math.ceil(settings.totalSize / opts.pageSize);

	var beginPage = opts.totalPage > 0 ? 1 : 0,
		navObj = this;

	$(navObj).empty().append(
		$("<div/>").addClass("page-nav-left").attr("id", "page-nav-left")
	).append(
		$("<div/>").addClass("page-nav-right").attr("id", "page-nav-right")
	);

	var initPageRecord = function(beginPage, totalPage, showPageNum, totalSize){
		$("div#page-nav-left").append(
			$("<span/>").html("当前记录： 第 ")
		).append(
			$("<span/>").attr("id", "from-size").html("0")
		).append(
			$("<span/>").html(" - ")
		).append(
			$("<span/>").attr("id", "to-size").html("0")
		).append(
			$("<span/>").html(" 条 / 共 ")
		).append(
			$("<span/>").attr("id", "total-size").html(totalSize)
		).append(
			$("<span/>").html(" 条， 第 ")
		).append(
			$("<span/>").attr("id", "cur-page").html("0")
		).append(
			$("<span/>").html(" 页 / 共 ")
		).append(
			$("<span/>").attr("id", "total-page").html(totalPage)
		).append(
			$("<span/>").html(" 页 ")
		);
	};

	var initPageNav = function(beginPage, totalPage, showPageNum, totalSize){
		// 清空原有页标，重新设置
		$("div#page-nav-right").empty().append(
			$("<span/>").html("首页").attr({"type": "text", "index": "first", "title": "首页"})
		).append(
			$("<span/>").html("<<").attr({"type": "text", "index": "previous", "title": "上一页"})
		).append(
			function(){
				var _strHml_ = "";
				var _span_ = function(idx){
					return "<span type='number' index='"+idx+"' title='第"+idx+"页'>"+_subStr_(idx)+"</span>";
				};
				// 避免分页下标过大导致排版异常
				var _subStr_ = function(str){
					str += "";
					if(str.length > 3){
						str = str.substring(0, 3) + "..";
					}
					return str;
				}

				// 请求数据集为空
				if(beginPage === 0){  
					return _span_(beginPage);
				}

				// 返回数据集的页数在展示的范围内
				if(totalPage <= showPageNum){  
					for (var i = 1; i <= totalPage; i++) {
						_strHml_ = _strHml_ + _span_(i);
					}
					return _strHml_;
				}

				// 返回数据集的页数超出展示的范围，展示一半的页数
				var temp = totalPage + 1 - showPageNum;  // 临界值
				var _half_ = Math.floor((showPageNum - 1) / 2);
				var _p_ = beginPage >= temp ? temp : beginPage,   // 前一段的起始页标
					_k_ = totalPage - _half_ + 1;                 // 后一段的起始页标		

				if((totalPage - beginPage + 1) <= showPageNum){
					for (var i = _p_; i <= totalPage; i++) {
						_strHml_ = _strHml_ + _span_(i);
					}
				}else{
					if(beginPage >= _half_){
						for (var i = beginPage; i < beginPage + _half_; i++) {
							_strHml_ = _strHml_ + _span_(i);
						}
					}else{
						for (var i = 1; i <= _half_; i++) {
							_strHml_ = _strHml_ + _span_(i);
						}
					}
					// 无法显示的分页下标省略处理
					_strHml_ = _strHml_ + "<span>···</span>";
					for (var i = totalPage - _half_ + 1; i <= totalPage; i++) {
						_strHml_ = _strHml_ + _span_(i);
					}
				}
				return _strHml_;
			}
		).append(
			$("<span/>").html(">>").attr({"type": "text", "index": "next", "title": "下一页"})
		).append(
			$("<span/>").html("末页").attr({"type": "text", "index": "last", "title": "末页"})
		);
		// 数据集为空，不在对相关事件进行处理
		if(beginPage === 0){ return; }
		if(opts.showTitle == false){  // 移除导航按钮title属性
			$("span[index]", $("div#page-nav-right")).removeAttr("title");
		}

		var __navBtnClick__ = function(){
			var type = $(this).attr("type"),
				curPage = $(this).attr("index");
			if(type === 'number' && curPage > 0){
				$("span#cur-page").html(curPage);
				$("span#from-size").html((parseInt(curPage)-1)*opts.pageSize+1);
				$(this).addClass("active").siblings("span").removeClass("active");
				if($("span.active").attr("index")*1 == totalPage){
					$("span#to-size").html(totalSize);
				}else{
					var toSize = parseInt(curPage)*opts.pageSize;
					$("span#to-size").html(toSize > totalSize ? totalSize : toSize);
				}
			}else if(type === 'text'){
				var _tidx_ = 0;
				if(curPage === 'previous'){
					_tidx_ = $("span.active").attr("index")*1 - 1;
				}else if (curPage === 'next'){
					_tidx_ = $("span.active").attr("index")*1 + 1;
				}else if (curPage === 'first'){
					_tidx_ = 1;
				}else if (curPage === 'last'){
					_tidx_ = totalPage;
				}
				initPageNav(_tidx_, totalPage, showPageNum, totalSize);
			}
		};

		var __navBtnController__ = function(index, allowed, disabled){
			var spanObj = $("span[index='"+index+"']", $("div#page-nav-right"))
					.css("cursor", allowed ? "pointer" : "not-allowed")
					.prop("disabled", disabled);
			if(disabled == true){
				spanObj.unbind("click");
			}else{
				spanObj.unbind("click").bind("click", __navBtnClick__);
			}
		};

		// 分页区按钮点击事件
		$("div#page-nav-right > span").unbind("click").bind("click", __navBtnClick__);

		$("div#page-nav-right > span[type='text']").bind({
			"mouseover": function(){
				var curPage = $("span.active", $("div#page-nav-right")).attr("index")*1;
				if(curPage === 1){
					__navBtnController__("first", false, true);
					__navBtnController__("previous", false, true);
				}else if(curPage === opts.totalPage){
					__navBtnController__("last", false, true);
					__navBtnController__("next", false, true);
				}
			},
			"mouseout": function(){
				__navBtnController__("first", true, false);
				__navBtnController__("previous", true, false);
				__navBtnController__("last", true, false);
				__navBtnController__("next", true, false);
			}
		});

		$("span[index='"+beginPage+"']", $("div#page-nav-right")).click();
		
	};

	 // 设置当前页数据记录
    initPageRecord(beginPage, opts.totalPage, opts.showPageNum, opts.totalSize);

	// 设置导航页的展示
    initPageNav(beginPage, opts.totalPage, opts.showPageNum, opts.totalSize);

};

@charset "utf-8"

.page-nav {
 	height: 45px;
 	background-color: #efefef;
 	border: 1px solid #ccc;
 	margin-top: 100px;
}
.page-nav > div {
	height: inherit;
	line-height: 2em;
	padding-top: 5px;
}
.page-nav > div > span {
	font-size: 13px;
}
.page-nav .page-nav-left {
	float: left;
	padding-left: 20px;
}
.page-nav .page-nav-right {
	float: right;
	padding-right: 20px;
}
.page-nav .page-nav-right span {
	height: 28px;
	width: 34px;
	border: 1px solid #ccc;
	text-align: center;
	border-left-width: 0;
	padding: 2px 4px;
	cursor: pointer;
	display: inline-block;
}
.page-nav .page-nav-right span:first-child {
	border-left-width: 1px;
}
.active {
	background-color: #1E90FF;
	color: #FFFFFF;
}