jQuery实现一个简单的分页_jq实现列表分页-优快云博客

本文链接：https://blog.youkuaiyun.com/u013199013/article/details/88643866

approveRole.html

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title></title>

<link rel="stylesheet" href="../../css/oaBtn.css">

<script type="text/javascript">

$(function(){
	var datalen=0;	// data数据总条数
	var dataNum = 5; // 每页展示的数据条数
	$.ajax({
		url: "/approverRole/getList",	
		type: "POST",
		//data: {"id": assetId},
		//dataType: "JSON",
		success: function (data) {
			datalen=data;
			
			var temp = " ";
			
			// 总条数
			$("#total").html(data.length);
			// 总页数  向上取整
			var pageSize = Math.ceil(data.length/dataNum);
			$("#pageSize").html(pageSize);
			// 当前第N页
			$("#page").html(1);
			
			
			for(var i=0;i<data.length;i++){
				
				$("#table1 tbody").append("<tr style='display:none;'><td>"+data[i].c77+"</td> <td>"+data[i].gross+"</td> <td><a href='#'>编辑</a></td></tr>");
				
			}
			
			// 默认第一页展示的数据
			for (var i = 0; i < data.length; i++) {
				if(i < dataNum){
					$("#table1 tbody tr").eq(i).show();
				}
			}
		},
		error: function() {
			var error = "查询数据失败！";
			console.log(error);
			alert(error);
		} 
	});
	/* 上一页 */
	$("#bt1").click(function(){
		var page = $("#page").html();
		if (parseInt(page) > 1) {
			// 先隐藏所有的行（数据）
			$("#table1 tbody tr").hide();
			// 点击上一页时当前页数发生变化
			$("#page").html(parseInt(page)-1);
			var count = 0;
			// 定位到上一页
			var beforePage = parseInt(page)-1; // 假设是2
			// 显示的数据则是上上一页的后一页，即：
			var nextData = parseInt(beforePage-1)*dataNum;
			for (var i02 = parseInt(nextData); i02 <= datalen.length; i02++) {
				count += 1;
				if (count <= dataNum) {
					$("#table1 tbody tr").eq(i02).show();
				}
			}
		}
		
		//$("#table1 tbody tr").eq(datalen-5).show();
	});
	/* 下一页 */
	$("#bt2").click(function(){
		var page = $("#page").html();
		var pageSize = $("#pageSize").html();
		// 当前页码小于总页码时
		if (parseInt(page) < parseInt(pageSize)) {
			// 先隐藏所有的行（数据）
			$("#table1 tbody tr").hide();
			// 点击下一页时当前页数发生变化
			$("#page").html(parseInt(page)+1);
			// 展示的数据也定位到下一页（nextData~datalen.length）
			var nextData = parseInt(page)*dataNum;
			var count = 0;
			for (var i02 = parseInt(nextData); i02 <= datalen.length; i02++) {
				count += 1;
				if (count <= dataNum) {
					$("#table1 tbody tr").eq(i02).show();
				}
			}
		}
		
		//$("#table1 tbody tr").eq(datalen+5).show();
	});
	/* 首页 */
	$("#bt0").click(function(){
		var page = $("#page").html();
		var pageSize = $("#pageSize").html();
		// 当前页码大1时
		if (parseInt(page) > 1) {
			// 先隐藏所有的行（数据）
			$("#table1 tbody tr").hide();
			// 点击首页时当前页码定位到第一页
			$("#page").html(1);
			// 展示的数据也定位到第一页（1~dataNum条）
			for (var i0 = 0; i0 < dataNum; i0++) {
				$("#table1 tbody tr").eq(i0).show();
			}
		}
	});
	/* 尾页 */
	$("#bt3").click(function(){
		var page = $("#page").html();
		var pageSize = $("#pageSize").html();
		if (parseInt(page) < parseInt(pageSize)) {
			// 先隐藏所有的行（数据）
			$("#table1 tbody tr").hide();
			// 点击尾页时页码变为最大码
			$("#page").html(pageSize);
			// 展示的数据也定位到最后一页
			var nextData = parseInt(pageSize-1)*dataNum;
			// 从倒数第二页的最后一条往后的数据展示出来
			for (var i03 = parseInt(nextData); i03 <= datalen.length; i03++) {
				$("#table1 tbody tr").eq(i03).show();
			}
		}
	});
});

</script>


</head>
<body  >

<div class="buy-wrap">
  <!--当前页面刷新按钮-->
    <div class="rightKey"></div>
    
	<div class="buy-box show">
	   <!--导航-->
        <div class="buy-page">
            <div class="buy-top"  style="{{myStyle}}">
                <a ng-repeat="v in navdata" href="{{v.link}}" class="btns {{v.class}}" >{{v.text}}<i ng-click="removeNav($event);$event.stopPropagation()">x</i></a>
            </div>
        </div>

	   	<h2 style="font-weight:bold">审批角色统计</h2>
		<hr>
		<table  id="table1"  border=1 style="width:100%;">
			<thead><tr><th>角色名称</th><th>角色人数</th><th>操作</th></tr></thead> 
			<tbody></tbody>
		</table>
		<hr>
		
		<button id="bt0" class="oaBtn">首页</button>
		<button id="bt1" class="oaBtn">上一页</button>
		<button id="bt2" class="oaBtn">下一页</button>
		<button id="bt3" class="oaBtn">尾页</button>
		当前第<span id="page" class="pageNum"></span>页
		共<span id="pageSize" class="pageNum"></span>页
        共<span id="total" class="pageNum"></span>条数据
		
		到第<input type="text" id="" style="width: 40px;padding: 0px;text-align: center;" />页
		<button id="" class="oaBtn">确定</button>
		
		<select id="selData">
		    <option value="" >5条/页</option>
		    <option value="0" >15条/页</option>
		    <option value="1" >30条/页</option>
		    <option value="2" >45条/页</option>
		</select>
	</div>
</div>

</body>
	
	
</html>

oaBtn.css

body{
  background: #e9ecf3;
}
.aBtn{
  line-height:21px;
  padding: 0 10px;
  background:#00B38A;
  border-radius:3px;
  display:inline-block;
  font-size:12px;
  text-decoration:none;
  color:white;
}
.oaBtn { /* 按钮美化 */
	line-height:24px;
	border-width: 0px; /* 边框宽度 */
	border-radius: 3px; /* 边框半径 */
	background: #00B38A; /* 背景颜色 *//* #1E90FF */
	cursor: pointer; /* 鼠标移入按钮范围时出现手势 */
	outline: none; /* 不显示轮廓线 */
	font-family: Microsoft YaHei; /* 设置字体 */
	color: white; /* 字体颜色 */
	font-size: 13px; /* 字体大小 */
}
.oaBtn:hover { /* 鼠标移入按钮范围时改变颜色 */
	background: #5599FF;
}
.pageNum {
	color:#0078D7
}


/** 下拉选择每页展示多少条数据 */
#selData{
    color: #afbac0;
    font-size: 1.6rem;
    border: none;
    outline: none;
    padding: 0px;
}

如图：