html+js翻页实现「建议收藏」

html+js翻页实现「建议收藏」<!DOCTYPEhtmlPUBLIC”-//W3C//DTDHTML4.01Transitional//EN””http://www.w3.org/TR/html4/loose.dtd”><html><head><metahttp-equiv=”Content-Type”content=”text/html;chars…

大家好,欢迎来到IT知识分享网。

<!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>  
</head>

<body>	
	<div class="layui-box layui-laypage layui-laypage-molv" id="layui-laypage-1" style="margin-top: 10px;font-size: 14px">
		<span class="layui-laypage-limits">
			<select lay-ignore="" style="height: 25px" class="pageSizeSelect">
				<option value="10" selected >10 条/页</option>
				<option value="20">20 条/页</option>
				<option value="30">30 条/页</option>
				<option value="40">40 条/页</option>
				<option value="50">50 条/页</option>
			</select>
		</span>

		<a href="javascript:" class="layui-laypage-first" data-page="0">首页</a>
		<a href="javascript:" class="layui-laypage-pre" data-page="2">上一页</a>
		<a href="javascript:" class="layui-laypage-next" data-page="2">下一页</a>
		<a href="javascript:" class="layui-laypage-last" data-page="2">末页</a>
		<span class="layui-laypage-count">共 120 条</span>
	</div>
</body>


<script src="http://www.jq22.com/jquery/jquery-1.10.2.js"></script>
<script type="text/javascript">
$(document).ready(function() {
	var currentPage = 1;
	var pageSize = 10;
	var total = 118;
	var totalsize = 1;
    
	$(function() {
	   $(".layui-laypage-count").text("共"+ total+"条");
	   if(total > 0){
	   	sufa()
	   };
	})

	$(".layui-box").delegate(".pageNumber","click",function () {
		var no =  parseInt($(this).attr("data"));
		currentPage = no;
		sufa();
	})

    $(".pageSizeSelect").on('change',function(){
		pageSize = parseInt($(this).find("option:selected").val());
		currentPage = 1;
		sufa();
    })

	$(".layui-laypage-first").on('click',function(){
		if(currentPage != 1) {
			currentPage = 1;
		    sufa();
		}	
    })

	$(".layui-laypage-pre").on('click',function(){
		if(currentPage != 1) {
			currentPage = currentPage-1;
		    sufa();
		}
    })

	$(".layui-laypage-next").on('click',function(){
		if(currentPage != totalsize) {
			currentPage = currentPage+1;
		    sufa();
		}
    })

	$(".layui-laypage-last").on('click',function(){
		if(currentPage != totalsize) {
			currentPage = totalsize;
		    sufa();
		}
    })

	function sufa() {
		var aa = [];
		aa.push(currentPage);
		totalsize =  Math.ceil(total/pageSize);
		for(var i=1 ;i<5;i++) {
			var a= currentPage+i;
			var b= currentPage-i;
			if(aa.length < 5) {
				if(a<=totalsize) aa.push(a);
				if(b>0) aa.push(b);
			}
		}
		aa.sort(function compare(val1,val2){return val1-val2;});
     
		var content = "";
		for(var i=0 ;i<aa.length;i++) {
			if(aa[i] == currentPage) { 
				content += "<a class=\"pageNumber aaa\" href='#' data='"+aa[i]+"'>"+aa[i]+"</a>"; 
			}else { 
				content += "<a class=\"pageNumber\" href='#' data='"+aa[i]+"'>"+aa[i]+"</a>"; 
			}			
		}
        $(".pageNumber").remove();
		$(".layui-laypage-pre").after(content);
	}
})
</script>

<style>   
	.layui-box a {
		padding: 5px 10px;
		text-decoration-line:none;
		background-color: #f4f4f5;
		margin-left: 5px;
		color: #606266;
		border-radius: 2px;
	}

	.layui-box  .aaa {
		background-color: #58C7C7;
		color: #fff;
	}
</style>
</body>
</html>

免责声明:本站所有文章内容,图片,视频等均是来源于用户投稿和互联网及文摘转载整编而成,不代表本站观点,不承担相关法律责任。其著作权各归其原作者或其出版社所有。如发现本站有涉嫌抄袭侵权/违法违规的内容,侵犯到您的权益,请在线联系站长,一经查实,本站将立刻删除。 本文来自网络,若有侵权,请联系删除,如若转载,请注明出处:https://yundeesoft.com/25802.html

(0)
上一篇 2023-06-29 16:00
下一篇 2023-07-11 10:00

相关推荐

发表回复

您的电子邮箱地址不会被公开。 必填项已用 * 标注

关注微信