列表页数据全加载 js分页处理

于 2019-09-03 10:13:35 发布
阅读量419 收藏
点赞数 1
分类专栏： javascript 文章标签： 无跳转分页 分页 无刷新
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/qq_28404381/article/details/100512347
版权
本文探讨了在JavaScript中处理无跳转分页和无刷新加载的问题。当使用`$("#page").children('ul').children('li').click()`实现点击分页时，发现该方法仅在首次点击有效。原因是页面的`ul`元素在后续操作中被重新渲染，导致点击事件失效。为解决这个问题，提出采用`$(document.body).on('click','#page>ul>li', function(){});`的方案，确保即使元素被动态创建，点击事件也能正确绑定并执行。" 78023343,4889583,社区发现算法与局部社团分析,"['社团网络', '局部社团网络', '图论', '网络分析', '数据挖掘']

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

出现问题：

$("#page").children(‘ul’).children(‘li’).click()

这个动作效果只能在第一次成功，第二次之后不能使用
原因：
页面中的ul元素被重新渲染一次，找不到改元素，无法执行click的动作
方案：
$(document.body).on(‘click’,"#page>ul>li",function(){})

<!DOCTYPE >
<html>
<head>
	<meta charset="utf-8" />
<style>
li{list-style: none;}
#mysite{height: 330px;}
#mysite .SiteMain{ width: 350px; padding: 5px; border: 1px solid gainsboro; border-radius: 5px; margin-bottom: 15px;}
/*我的站点列表 */
.page ul{float: left;}
.page ul li{float: left; width: 34px; height: 30px; line-height: 30px; text-align: center; border: 1px solid gainsboro; border-radius: 3px; margin: 0 3px; cursor: pointer;}
.page ul li:first-child{text-align: left; padding-left: 5px;}
.page ul li:last-child {text-align: right; padding-right: 5px;}
.page ul li:hover {background: rgba(1,1,1,0.8); color: white;}
.page ul li.active{ background: rgba(103,194,58,0.1); border: 1px solid rgba(103,194,58,0.1); color: #67c23a;}

</style>
</head>
<body>
	<div id="mysite">
		<div class="SiteMain">
			<div class="Site_WebName">
				<div class="WebName_Left">网站名称：1111111</div>
				<div style="clear: both;"></div>
			</div>
			<div class="Site_WebAttributes">
				<div class="DomainName">
					<div class="Unfont">网站域名：111111111111111111</div>
				</div>
				<div class="WebType">
					<div class="Unfont">网站类型：全球电商</div>
				</div>
				<!-- 套餐类型 定型DIV 开始-->
				<div class="PackageType_Choosing">
					<div class="Unfont">套餐类型：<span class="normal success">试用版</span>
					</div>
				</div>
				<!-- 套餐类型 修改DIV 结束-->
				<div class="WebStatus">
					<div class="WebStatus_Left Unfont">网站状态：<span class="normal success">正常</span></div>
					<div class="WebStatus_Right Unfont">
						<div>上次计费日期：<span>2019-08-10 18:19:24</span></div>
					</div>
					<div style="clear: both"></div>
				</div>
				<div style="clear: both;"></div>
			</div>
			<div style="clear: both;"></div>
		</div>
		<div class="SiteMain">
			<div class="Site_WebName">
				<div class="WebName_Left">网站名称：22222222</div>
				<div style="clear: both;"></div>
			</div>
			<div class="Site_WebAttributes">
				<div class="DomainName">
					<div class="Unfont">网站域名：22222222222222222222222222</div>
				</div>
				<div class="WebType">
					<div class="Unfont">网站类型：全球电商</div>
				</div>
				<!-- 套餐类型 定型DIV 开始-->
				<div class="PackageType_Choosing">
					<div class="Unfont">套餐类型：<span class="normal success">试用版</span>
					</div>
				</div>
				<!-- 套餐类型 修改DIV 结束-->
				<div class="WebStatus">
					<div class="WebStatus_Left Unfont">网站状态：<span class="normal success">正常</span></div>
					<div class="WebStatus_Right Unfont">
						<div>上次计费日期：<span>2019-08-10 18:19:24</span></div>
					</div>
					<div style="clear: both"></div>
				</div>
				<div style="clear: both;"></div>
			</div>
			<div style="clear: both;"></div>
		</div>
		<div class="SiteMain">
			<div class="Site_WebName">
				<div class="WebName_Left">网站名称：3333333</div>
				<div style="clear: both;"></div>
			</div>
			<div class="Site_WebAttributes">
				<div class="DomainName">
					<div class="Unfont">网站域名：333333333333333333</div>
				</div>
				<div class="WebType">
					<div class="Unfont">网站类型：全球电商</div>
				</div>
				<!-- 套餐类型 定型DIV 开始-->
				<div class="PackageType_Choosing">
					<div class="Unfont">套餐类型：<span class="normal success">试用版</span>
					</div>
				</div>
				<!-- 套餐类型 修改DIV 结束-->
				<div class="WebStatus">
					<div class="WebStatus_Left Unfont">网站状态：<span class="normal success">正常</span></div>
					<div class="WebStatus_Right Unfont">
						<div>上次计费日期：<span>2019-08-10 18:19:24</span></div>
					</div>
					<div style="clear: both"></div>
				</div>
				<div style="clear: both;"></div>
			</div>
			<div style="clear: both;"></div>
		</div>
		<div class="SiteMain">
			<div class="Site_WebName">
				<div class="WebName_Left">网站名称：444444</div>
				<div style="clear: both;"></div>
			</div>
			<div class="Site_WebAttributes">
				<div class="DomainName">
					<div class="Unfont">网站域名：44444444444444444</div>
				</div>
				<div class="WebType">
					<div class="Unfont">网站类型：全球电商</div>
				</div>
				<!-- 套餐类型 定型DIV 开始-->
				<div class="PackageType_Choosing">
					<div class="Unfont">套餐类型：<span class="normal success">试用版</span>
					</div>
				</div>
				<!-- 套餐类型 修改DIV 结束-->
				<div class="WebStatus">
					<div class="WebStatus_Left Unfont">网站状态：<span class="normal success">正常</span></div>
					<div class="WebStatus_Right Unfont">
						<div>上次计费日期：<span>2019-08-10 18:19:24</span></div>
					</div>
					<div style="clear: both"></div>
				</div>
				<div style="clear: both;"></div>
			</div>
			<div style="clear: both;"></div>
		</div>
		<div class="SiteMain">
			<div class="Site_WebName">
				<div class="WebName_Left">网站名称：55555</div>
				<div style="clear: both;"></div>
			</div>
			<div class="Site_WebAttributes">
				<div class="DomainName">
					<div class="Unfont">网站域名：555555555555555555555</div>
				</div>
				<div class="WebType">
					<div class="Unfont">网站类型：全球电商</div>
				</div>
				<!-- 套餐类型 定型DIV 开始-->
				<div class="PackageType_Choosing">
					<div class="Unfont">套餐类型：<span class="normal success">试用版</span>
					</div>
				</div>
				<!-- 套餐类型 修改DIV 结束-->
				<div class="WebStatus">
					<div class="WebStatus_Left Unfont">网站状态：<span class="normal success">正常</span></div>
					<div class="WebStatus_Right Unfont">
						<div>上次计费日期：<span>2019-08-10 18:19:24</span></div>
					</div>
					<div style="clear: both"></div>
				</div>
				<div style="clear: both;"></div>
			</div>
			<div style="clear: both;"></div>
		</div>
	</div>
	<div class="page" id="page">
		<ul>
			
		</ul>
	</div>
</body>
</html>
<script src="./jquery-3.3.1.js"></script>
<script>
	var site = new Array();
	var page = 1;
	var maxpage = 0;
	sitepage();
	function sitepage() {
		list = $('.SiteMain');
		if (list.length == 0) return false;
		for (var i=0; i<list.length; i++) {
			site[i] = list[i];
		}
		// 设置分页
		gopage(1);
	}
	
	function gopage(num) {
		$('#mysite').html('');
		// 每页包含数据的数量
		var pagenum = 2;	
		// 计算页数
		var allpage = site.length / pagenum;
		if (parseInt(allpage) != allpage) {
			allpage = parseInt(allpage) + 1;
		}
		maxpage = allpage;
		// 
		var min = (num - 1) * pagenum;
		var max = num * pagenum;
		// 判断当前页面的内容数量是否超过总数量
		max = max>site.length?site.length:max;
		var html = '';
		for (var i=min; i<max; i++) {
			html += site[i].outerHTML;
		}
		$('#mysite').html(html);
		//分页按钮
		var phtml = '<ul><li data-page = "-1">《</li>';
		for (var p=1; p<=allpage; p++) {
			if (p == num) {
				phtml += '<li class="active" data-page = "'+p+'">'+p+'</li>';
			} else {
				phtml += '<li data-page = "'+p+'">'+p+'</li>';
			}
		}
		phtml += '<li data-page = "+1">》</li></ul>';
		$("#page").html('');
		$("#page").html(phtml);
	}
	
	// $("#page").children('ul').children('li').click()
	$(document.body).on('click',"#page>ul>li",function(){
		var _this = $(this);
		if (_this.attr('class') == 'active') return false;
		pagedata = _this.attr('data-page');
		if (pagedata == '-1') {
			if (page == 1) return false;
			page = parseInt(page) - 1;
		} else if (pagedata == '+1') {
			if (page == maxpage) return false;
			page = parseInt(page) + 1;
		} else {
			page = pagedata;
		}
		gopage(page);
	});
	
</script>
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值