分页插件（可配置）

其他 2018-08-18 00:39:22 阅读次数: 0

呈现

html文件 

<html>
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
		<title>Insert title here</title>
		<script src="引入一个jquery文件，这里就不提供了"></script>
		<link rel="stylesheet" href="引入下边提供的css文件">
	</head>
	<body>
		<div id="pages" class="devidePage" ></div>
	</body>
		<script>
			var pages=10;  //计算出总页数(一定要是5的倍数)
			
			function getData(num){
				/*当前页数*/
				var currentPageNum = num;	
				/*取数据*/
				$.ajax({
			        type: "post",
			        url: url, /*请求的servlet的地址*/
			        data: {"currentPageNum":currentPageNum},
			        cache: false,
			        async : false,
			        dataType: "json",
			        success: function (data ,textStatus, jqXHR)
			        {
			            if("true"==data.flag){
			            	setData(data.data);
			            }else{
			                console.log("不合法！错误信息如下："+data.errorMsg);
			            }
			        },
			        error:function (XMLHttpRequest, textStatus, errorThrown) {      
			            console.log("请求失败！");
			        }
				});
			}
			function setData(data){	
				/*放数据*/
				
			}
		</script>
		<script src="引入下边提供的js文件"></script>
</html>

css文件

@charset "UTF-8";
/*分页所在的div*/
.devidePage{
	margin-top:300px;
	margin-left: 400px;
	height: 50px;
	width: 800px;
	/* background: gray; */
}
/*显示页数的div*/
.pages{
	float:left;
	margin-left:2px;
	height:50px;
	width:50px;
	background: #EEEEEE;
	text-align:center;
	line-height:50px;
	cursor:pointer;
}
/*首页*/
.theFirstPage{
	float:left;
	margin-left:2px;
	height:50px;
	width:50px;
	background: #EEEEEE;
	text-align:center;
	line-height:50px;
	cursor:pointer;
}
/*末页*/
.theLastPage{
	float:left;
	margin-left:2px;
	height:50px;
	width:50px;
	background: #EEEEEE;
	text-align:center;
	line-height:50px;
	cursor:pointer;
}
/*上一页*/
.prePage{
	float:left;
	margin-left:2px;
	height:50px;
	width:50px;
	background: #EEEEEE;
	text-align:center;
	line-height:50px;
	cursor:pointer;
}
/*下一页*/
.nextPage{
	float:left;
	margin-left:2px;
	height:50px;
	width:50px;
	background: #EEEEEE;
	text-align:center;
	line-height:50px;
	cursor:pointer;
}
/*当前页数*/
.currentPage{
	float:left;
	margin-left:2px;
	height:50px;
	width:100px;
	background: #EEEEEE;
	text-align:center;
	line-height:50px;
}
/*总页数*/
.pageNums{
	float:left;
	margin-left:2px;
	height:50px;
	width:100px;
	background: #EEEEEE;
	text-align:center;
	line-height:50px;
}
/*输入页数*/
.jump{
	float:left;
	margin-left:2px;
	height:48px;
	width:50px;
	border:0.5px solid #EEEEEE;
}
/*跳转*/
.jumpClick{
	float:left;
	margin-left:2px;
	height:50px;
	width:50px;
	background: #EEEEEE;
	text-align:center;
	line-height:50px;
	cursor:pointer;
}

js文件

/**
 * 侠 2018-8-15
 */

function loadAll() {
	var theFirstPage = "<div class=\"theFirstPage\"  onclick=\"theFirstPage()\">首页</div>";
	var prePage = "<div class=\"prePage\"  onclick=\"prePage()\">上一页</div>";
	var pagess = "<div id=\"page_1\" class=\"pages\"  onclick=\"changePage(this.id)\">1</div>"
			+ "<div id=\"page_2\" class=\"pages\"  onclick=\"changePage(this.id)\">2</div>"
			+ "<div id=\"page_3\" class=\"pages\"  onclick=\"changePage(this.id)\">3</div>"
			+ "<div id=\"page_4\" class=\"pages\"  onclick=\"changePage(this.id)\">4</div>"
			+ "<div id=\"page_5\" class=\"pages\"  onclick=\"changePage(this.id)\">5</div>";
	var nextPage = "<div class=\"nextPage\"  onclick=\"nextPage()\">下一页</div>";
	var theLastPage = "<div class=\"theLastPage\"  onclick=\"theLastPage()\">末页</div>";
	var currentPages = "<div id=\"currentPage\" class=\"currentPage\">第1页</div>";
	var pageNums = "<div id=\"pageNums\" class=\"pageNums\">共" + pages
			+ "页</div>";
	var jump = "<input id=\"jump\" type=\"text\" class=\"jump\" "
			+"onkeyup=\"(this.v=function(){this.value=this.value.replace(/[^0-9-]+/,'');}).call(this)\""
			+" onblur=\"this.v();\">";
	var jumpClick = "<div class=\"jumpClick\" onclick=\"jump()\">跳转</div>";
	$("#pages").html(theFirstPage +
			prePage + pagess + nextPage + theLastPage + currentPages + pageNums + jump
					+ jumpClick);
}
loadAll();
function defultBackground() {
	$("#page_1").css("background", "#66b2ff");  //配置选中颜色
}
defultBackground();
function changeBackground() {
	$(".pages").css("background", "#EEEEEE");   //配置默认颜色
	for (var i = 0; i < 5; i++) {
		if ($("#page_" + (i + 1)).text() == $("#currentPage").text().split("第")[1]
				.split("页")[0]) {
			$("#page_" + (i + 1)).css("background", "#66b2ff");  //配置选中颜色
			break;
		}
	}
}
function theFirstPage(){
	$('#currentPage').html("第" + 1 + "页");
	$("#page_1").html(1);
	$("#page_2").html(2);
	$("#page_3").html(3);
	$("#page_4").html(4);
	$("#page_5").html(5);
	changeBackground();
	getData(getCurrentPageNum());
}
function theLastPage(){
	$('#currentPage').html("第" + pages + "页");	
	$("#page_1").html(pages-4);
	$("#page_2").html(pages-3);
	$("#page_3").html(pages-2);
	$("#page_4").html(pages-1);
	$("#page_5").html(pages);	
	changeBackground();	
	getData(getCurrentPageNum());
}
function changePage(id) {
	var pagenum = parseInt($("#" + id).text()) - 1;
	$('#currentPage').html("第" + $("#" + id).text() + "页");
	if ((id.split("_")[1] == 1) && (parseInt($("#" + id).text()) > 1)) {
		$("#page_1").html(parseInt($("#page_1").text()) - 1);
		$("#page_2").html(parseInt($("#page_2").text()) - 1);
		$("#page_3").html(parseInt($("#page_3").text()) - 1);
		$("#page_4").html(parseInt($("#page_4").text()) - 1);
		$("#page_5").html(parseInt($("#page_5").text()) - 1);
	}
	if ((id.split("_")[1] == 5) && (parseInt($("#" + id).text()) < pages)) {
		$("#page_1").html(parseInt($("#page_1").text()) + 1);
		$("#page_2").html(parseInt($("#page_2").text()) + 1);
		$("#page_3").html(parseInt($("#page_3").text()) + 1);
		$("#page_4").html(parseInt($("#page_4").text()) + 1);
		$("#page_5").html(parseInt($("#page_5").text()) + 1);
	}
	changeBackground();	
	getData(getCurrentPageNum());
}
function prePage() {
	var currentPageNumStr = $("#currentPage").text().split("第")[1].split("页")[0];
	var currentPageNum = parseInt(currentPageNumStr);
	if (currentPageNum > 1) {
		var toPageNum = currentPageNum - 1;
		$("#currentPage").html("第" + toPageNum + "页");
		if ((currentPageNum > 1) && ($("#page_1").text() != 1)) {
			$("#page_1").html(parseInt($("#page_1").text()) - 1);
			$("#page_2").html(parseInt($("#page_2").text()) - 1);
			$("#page_3").html(parseInt($("#page_3").text()) - 1);
			$("#page_4").html(parseInt($("#page_4").text()) - 1);
			$("#page_5").html(parseInt($("#page_5").text()) - 1);
		}
		changeBackground();	
		getData(getCurrentPageNum());
	} else {
	}
}
function nextPage() {
	var currentPageNumStr = $("#currentPage").text().split("第")[1].split("页")[0];
	var currentPageNum = parseInt(currentPageNumStr);
	if (currentPageNum < pages) {
		var toPageNum = currentPageNum + 1;
		$("#currentPage").html("第" + toPageNum + "页");
		if (currentPageNum >= 5 && ($("#page_5").text() != pages)) {
			$("#page_1").html(parseInt($("#page_1").text()) + 1);
			$("#page_2").html(parseInt($("#page_2").text()) + 1);
			$("#page_3").html(parseInt($("#page_3").text()) + 1);
			$("#page_4").html(parseInt($("#page_4").text()) + 1);
			$("#page_5").html(parseInt($("#page_5").text()) + 1);
		}
		changeBackground();		
		getData(getCurrentPageNum());
	} else {
	}
}
function jump() {
	var numstr = $("#jump").val();
	var num = parseInt(numstr);
	if ((num < 1) || (num > pages)) {
		alert("输入不合法");
		$("#jump").val(1);
	} else {
		$("#currentPage").html("第" + num + "页");
		if (num >= 5) {
			$("#page_5").html(num);
			$("#page_4").html(num - 1);
			$("#page_3").html(num - 2);
			$("#page_2").html(num - 3);
			$("#page_1").html(num - 4);
		} else {
			if (num = 4) {
				$("#page_5").html(num + 1);
				$("#page_4").html(num);
				$("#page_3").html(num - 1);
				$("#page_2").html(num - 2);
				$("#page_1").html(num - 3);
			}
			if (num = 3) {
				$("#page_5").html(num + 2);
				$("#page_4").html(num + 1);
				$("#page_3").html(num);
				$("#page_2").html(num - 1);
				$("#page_1").html(num - 2);
			}
			if (num = 2) {
				$("#page_5").html(num + 3);
				$("#page_4").html(num + 2);
				$("#page_3").html(num + 1);
				$("#page_2").html(num);
				$("#page_1").html(num - 1);
			}
			if (num = 1) {
				$("#page_5").html(num + 4);
				$("#page_4").html(num + 3);
				$("#page_3").html(num + 2);
				$("#page_2").html(num + 1);
				$("#page_1").html(num);
			}
		}
		changeBackground();	
		getData(getCurrentPageNum());
	}
}
function getCurrentPageNum(){
	return parseInt( $("#currentPage").text().split("第")[1].split("页")[0] );
}

猜你喜欢

转载自blog.csdn.net/qq_38006520/article/details/81707745
今日推荐
美国拟限制 AI 大模型出口中国和俄罗斯
苹果将与 OpenAI 达成协议，将 ChatGPT 应用于 iPhone
openKylin 社区生态委员会第六次会议圆满召开
阿里云正式发布通义千问 2.5
Python 3.13 发布首个 Beta：实验性自由线程模式和 JIT、改进交互式解释器
Stack Overflow 拿我的代码去训练 AI 大模型，还封了我的账号
Pop!_OS 的 COSMIC 桌面完成 App Store 上架工作
报告：Django 仍然是 74% 开发者的首选
《2024 年一季度互联网投融资运行情况》研究报告
15 年前上了“FFmpeg 耻辱柱”，今天他还得谢谢咱——腾讯QQPlayer一雪前耻？
TIOBE 5 月榜单：Fortran “复活”进入 Top 10
GCC 14.1 发布
周排行
NEFU 117 素数个数的位数
Closest Common Ancestors (Lca,tarjan)
ELK部署
【转载】Hive笔记整理（三）
SQL语句（一）基本表的定义
关于Java web开发中的MySQL的事务语句
MFC创建自定义窗体
如何用一句话激怒程序员？
《逆袭大学》文摘——9.4 基础和应用的平衡中找到大学的节奏
【spring源码分析】@Value注解原理
每日归档
更多
2024-05-11(38)
2024-05-10(38)
2024-05-09(35)
2024-05-08(42)
2024-05-07(14)
2024-05-06(40)
2024-05-05(0)
2024-05-04(7)
2024-05-03(19)
2024-05-02(0)

代码天地 © 2018 codetd.com

境外服务器   最新电视剧2022