求大神帮忙看看这段代码逻辑哪里出了问题，小白提问分页逻辑

小_孔 2017-08-17 08:00:41
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<style type="text/css">
table{
border:solid #aaa 2px;
border-collapse: collapse;
width:300px;
margin:0 auto;
}
tr td{
border:solid #aaa 1px;
text-align: center;
}
*{padding: 0;margin: 0;}
ul li{list-style: none;}
/*分页*/
#pageGro{ width:460px; height:25px; margin:0px auto; padding-top:15px;}
#pageGro div,#pageGro div ul li{ font-size:12px; color:#999; line-height:23px; float:left; margin-left:5px;cursor:pointer;text-align: center;}
#pageGro div ul li{ width:22px; text-align:center; border:1px solid #999; cursor:pointer;}
#pageGro div ul li.on{ color:#fff; background:#3c90d9; border:1px solid #3c90d9;}
#pageGro .pageUp,#pageGro .pageDown,#pageGro .pageFirst,#pageGro .pageEnd{ width:43px; border:1px solid #999;}
#pageGro .pageSum{ width:85px; border:1px solid #999;}
</style>
<script type="text/javascript" src="jQuery/jquery-1.11.1.js"></script>
<script type="text/javascript">
$(function(){

loadData(1);
});
function loadData(event){
$.ajax({
url:"emp/findPage.do",
dataType:"json",
data:{"pageNum":event == 1 ? 1:event.data.pageNum},
success:function(result){
console.log(result); //输出返回值
//清空数据列表
$("#td").empty();
if(result.state == 0){
var page = result.data;
//打印数据列表
emplistLoad(page.list);
//分页处理程序
pageHandler(page);
}else{
$("#pageGro").empty();
alert(result.message);
}

},
error:function(){
alert("系统错误，请稍后重试...");
}
});
}

function pageHandler(page){
$("#span_pageNum").html(page.pageNum);
$("#span_countPage").html(page.countPage);
if(page.pageNum == 1){
$(".pageUp").hide();
}else{
$(".pageUp").show();
}
if(page.pageNum == page.countPage){
$(".pageDown").hide();
}else{
$(".pageDown").show();
}
$(".pageFirst").on("click",{pageNum:1},loadData);
$(".pageEnd").on("click",{pageNum:page.countPage},loadData);
$(".pageUp").on("click",{pageNum:page.pageNum - 1},loadData);
$(".pageDown").on("click",{pageNum:page.pageNum + 1},loadData);
}

function emplistLoad(ary){
for(var i = 0; i < ary.length; i++){
console.log(i);
$("#td").append("<tr>"
+"<td>"+ary[i].id+"</td><td>"+ary[i].name+"</td><td>"+ary[i].age+"</td>"
+"</tr>"
);
}
}



</script>
</head>
<body>
<table>
<thead id="th">
<tr>
<td colspan="3">员工信息</td>
</tr>
<tr>
<td>id</td><td>姓名</td><td>年龄</td>
</tr>
</thead>
<tbody id="td">
<tr>
<td>id</td><td>姓名</td><td>年龄</td>
</tr>
</tbody>
</table>

<div id="pageGro" class="cb">
<div class="pageFirst">首页</div>
<div class="pageUp">上一页</div>
<div class="pageList">
<ul>
<li class="on">1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
</ul>
</div>
<div class="pageDown">下一页</div>
<div class="pageEnd">末页</div>
<div class="pageSum">第<span id="span_pageNum"></span>页/ 共<span id="span_countPage"></span>页</div>
</div>
</body>
</html>
...全文
257 6 打赏 收藏 转发到动态 举报
写回复
用AI写文章
6 条回复
切换为时间正序
请发表友善的回复…
发表回复
小_孔 2017-08-21
  • 打赏
  • 举报
 回复
已经解决了，谢谢了， 是我在调用自己方法时，重复执行了绑定函数，导致点击事件多次执行，所以会有重复查询。 $(".pageDown").off("click").on("click",{pageNum:page.pageDown},loadData); 加上off函数就好了
小_孔 2017-08-21
  • 打赏
  • 举报
 回复
我是想复用加载首页那个请求，不想每个按钮都写一个请求
小_孔 2017-08-21
  • 打赏
  • 举报
 回复
我写的代码可以实现分页功能，但是看控制台会有很多重复查询，按钮点击越多次，越慢，不知道哪里出的问题，可以帮我看下吗
小_孔 2017-08-18
  • 打赏
  • 举报
 回复
咋还沉了呢···
DenggLin 2017-08-18
  • 打赏
  • 举报
 回复
没看你的， 我自己简单的写了一个，代码没整合 

$(function(){
	$('.pageList ul li').click(function(){
		$('.pageList ul li').removeClass('on');
		$(this).addClass('on');
		//加上请求数据地址
		var pageNum=$(this).html();
		console.log(pageNum);
	});
	//下一页
	$('.pageDown').click(function(){
		console.log("下一页");
		$('.pageList ul li').each(function(index,ele){
			$(ele).html(parseInt($(ele).html())+1);
		})
		var pageNum=$('.pageList ul li.on').html();
		console.log(pageNum);
		//加上请求数据地址
	});
	//上一页
	$('.pageUp').click(function(){
		console.log("上一页");
		$('.pageList ul li').each(function(index,ele){
			var curPage=parseInt($(ele).html())-1;
			if(curPage<1){
				 return false
			}
			else{
				$(ele).html(curPage);
			}
			
		})
		var pageNum=$('.pageList ul li.on').html();
		console.log(pageNum);
		//加上请求数据地址

	});
	//首页
		$('.pageFirst').click(function(){
		console.log("首页");
		$('.pageList ul li').each(function(index,ele){
			var curPage=index+1;
			if(curPage<1){
				 return false
			}
			else{
				$(ele).html(curPage);
			}
			
		});
		$('.pageList ul li').removeClass('on');
		$('.pageList ul li').eq(0).addClass('on');
		var pageNum=$('.pageList ul li.on').html();
		// debugger
		console.log(pageNum);
		//加上请求数据地址
	});
	//末页   有多少页后端会告诉你  假如有100页
		$('.pageEnd').click(function(){
		console.log("末页");
		$('.pageList ul li').each(function(index,ele){
			var curPage=100-(4-index);
			if(curPage<1){
				 return false
			}
			else{
				$(ele).html(curPage);
			}
			
		});
		$('.pageList ul li').removeClass('on');
		$('.pageList ul li').eq(4).addClass('on');
		var pageNum=$('.pageList ul li.on').html();
		// debugger
		console.log(pageNum);
		//加上请求数据地址

	});
})
小_孔 2017-08-17
  • 打赏
  • 举报
 回复
求大神帮忙！
mybatis分页插件实现原理，Java开发三年月薪才12K
前言 从接触编程就开始使用 Git 进行代码管理，先是自己玩 Github，又在工作中使用 Gitlab，虽然使用时间挺长，可是也只进行一些常用操作，如推拉代码、提交、合并等，更复杂的操作没有使用过，看过的教程也逐渐淡忘了，有些对不起 Linus 大神。 出来混总是要还的，前些天就遇到了 Git 里一种十分糟心的场景，并为之前没有深入理解 Git 命令付出了一下午时间的代价。 先介绍一下这种场景，我们一个项目从 N 版本升到 A 版本时引入了另一项目的 jar 包，又陆续发布了 B、C 版本，但在 C 版
Composer 零基础小白光速入门教程通俗易懂,免费依赖代码插件库随便你使用,一个字《爽!》
我万万没有想到居然有人连Composer都不会用,那你基本上可以说被市场淘汰了!
mysql数据库的sql语句的入门与提高-完整篇
进入10月,学校里每年一度的秋招又要开始了，正在准备找实习单位的我又把之前学过的sql回顾了一下，收获颇丰，这次我把之前跟着数据库老师学习的笔记和习题一同整理了一下，供大家一起学习，这里面有很多知识点的总结，也有配合的练习题，所以不管是小白还是有一定sql基础的朋友来说都可以看一看，当然，如果是大神的话肯定会觉得这些很简单，哈哈哈哈。废话不多说了，整理的东西比较多，如果大家发现错误欢迎大家指正，一...
苦战金三银四：580道最全面的BATJ大厂Java面试真题分享(1)
我们总是喜欢瞻仰大厂的大神们，但实际上大神也不过凡人，与菜鸟程序员相比，也就多花了几分心思，如果你再不努力，差距也只会越来越大。实际上，作为程序员，丰富自己的知识储备，提升自己的知识深度和广度是很有必要的。我们总是喜欢瞻仰大厂的大神们，但实际上大神也不过凡人，与菜鸟程序员相比，也就多花了几分心思，如果你再不努力，差距也只会越来越大。实际上，作为程序员，丰富自己的知识储备，提升自己的知识深度和广度是很有必要的。
springboot最全，最完整，最适合小白教程（原理篇）
原理篇
JavaScript

87,922

社区成员

224,618

社区内容

发帖
与我相关
我的任务
社区描述
Web 开发 JavaScript
社区管理员
  • JavaScript
  • 无·法
加入社区
  • 近7日
  • 近30日
  • 至今

加载中

查看更多榜单
社区公告
暂无公告

试试用AI创作助手写篇文章吧

+ 用AI写文章