分享编程~
 
logo×

jQuery异步加载Ajax简单分页插件示例

2020-07-07 08:52:49 588 原创

jQuery异步加载Ajax简单分页插件示例。

天天特卖抢好货

通过ajax异步加载请求后台数据，实现局部分页数据刷新，样式自控，页面数据渲染简单，当前分页数值可以保存session或者cookie，跳到其他页面回来的时候还是用户访问的页面数据。

简单源码示例

demo.html

<html>
<head>
<meta charset="utf-8">
<script type="text/javascript" src="http://apps.bdimg.com/libs/jquery/1.8.3/jquery.js"></script>
<title>jQuery异步加载Ajax简单分页插件示例</title>
<style>
.pagedate{width:800px;height:400px;border:1px solid #ccc;margin:20px;}
.pagedate table{width:100%;}

/*分页样式*/
.zhlajax1_pages{margin:20px;}
.zhlajax1_pages span{border:1px solid #ccc;padding:5px;cursor:pointer;}
.zhlajax1_pages span.defaults{border:1px solid red;color:red;}
.zhlajax1_pages .pageid{margin:0 5px;}
.zhlajax1_pages .pageNo{border:none;}
.zhlajax1_pages .changeId{width:50px;border:1px solid #ddd;padding:9px;}
</style>
</head>
<body >
	<div class="pagedate">
		
	</div>
	<div class="zhlajax1_pages">
		<span>总共<b class="nums">0</b>条</span>
		<span>总共<b class="pageNum">0</b>页</span>
		<input type="text" class="changeId" value="1" onkeyup="value=value.replace(/[^\d]/g,'') " ng-pattern="/[^a-zA-Z]/" />
		<span page-id="F" class="pageBtn">首页</span>
		<span page-id="P" class="pageBtn">上一页</span>
		<span class="pageNo"></span>
		<span page-id="N" class="pageBtn">下一页</span>
		<span page-id="L" class="pageBtn">尾页</span>
	</div>
</body>
<script type="text/javascript">
	var adjoin = 2; //左右相邻按钮显示的个数
	var page = 1; //默认第一页(当前值可以保存session或者cookie,跳页时刷新，跳转到其他页面回来的时候还是用户访问的页面数据)
	var pageNum = ''; //总页数
	var nowPage = ''; //当前页数
	var dateHtml = ''; //分页数据
	var pageBtnHtml = ''; //分页按钮
	var p_page = ''; //当前页左边按钮数
	var n_page = ''; //当前页右边按钮数
	zhlajax1_pagedate(page); //首次加载数据
	//点击按钮
	$(".zhlajax1_pages").delegate(".pageBtn","click",function(){ //点击按钮时触发
		page = $(this).attr('page-id');
		if(page){
			if(page == 'F'){ //获取首页值
				page = 1;
			}else if(page == 'L'){ //获取尾页值
				page = pageNum;
			}else if(page == 'P'){ //获取上一页值
				page = nowPage-1;
			}else if(page == 'N'){ //获取下一页值
				page = parseInt(nowPage) 1;
			}
			if(page <= 1){ //最小页数为1
				page = 1;
			}
			if(pageNum <= page){ //最大页数
				page = pageNum;
			}
			zhlajax1_pagedate(page); //调取分页方法
		}
	});
	//输入框
	$('.changeId').blur(function(){
		page = parseInt($(this).val());
		if(!isNaN(page)){
			if(pageNum < page){
				page = 1;
				$(this).val(1);
			}
			zhlajax1_pagedate(page);
		}else{
			$(this).val(1);
			zhlajax1_pagedate(1,limit);
		}
	});
	//分页方法
	function zhlajax1_pagedate(page){
		$.post('./page.json',{page:page},function(data){
			//////////////////////////////////////(((
			//*/模拟选取获得页面数据，实际项目中请求服务后台返回当前页json数据当前代码去掉即可
			if(typeof(data[page-1]) == "undefined" ){
				$('.pagedate').html('没有获取到分页数据');
				return false;
			}
			var data = data[page-1];
			//////////////////////////////////////)))*/
			console.log(data);
			//result = JSON.parse(data);
			//分页按钮信息
			pageNum = data.pages; //获取总页数
			nowPage = page; //重置当前页数
			pageBtnHtml = ''; //分页按钮重置
			p_page = parseInt(parseInt(page) - parseInt(adjoin));
			n_page = parseInt(parseInt(page)   parseInt(adjoin));
			if(p_page <= 0){
				p_page = 1;
			}
			for(var i=1;i<=data.pages;i  ){ //数字按钮
				if(p_page <= i && i <= n_page){ //控制数字按钮左右个数
					if(i == page){ //当前页数
						pageBtnHtml  = '<span page-id="' i '" class="pageid pageBtn defaults">' i '</span>';
					}else{ //其他页数
						pageBtnHtml  = '<span page-id="' i '" class="pageid pageBtn">' i '</span>';
					}
					
				}
			}
			$('.zhlajax1_pages .pageNo').html(pageBtnHtml); //分页数字按钮
			$('.zhlajax1_pages .nums').html(data.counts);	//总条数
			$('.zhlajax1_pages .pageNum').html(data.pages); //总页数
			//分页表格数据，内容循环逐条赋值拼接显示到指定页面容器内
			dateHtml = '<table>';
			for(var i in data.products){
				dateHtml  = '<tr>';
				dateHtml  = '<td>' data.products[i].id '</td>';
				dateHtml  = '<td>' data.products[i].name '</td>';
				dateHtml  = '<td>' data.products[i].price '</td>';
				dateHtml  = '<td>' data.products[i].imgUrl '</td>';
				dateHtml  = '</tr>';
			}
			dateHtml  = '</table>';
			$('.pagedate').html(dateHtml);
		},'json').error(function(){
			$('.pagedate').html('网络异常');
		});
	}
</script>
</html>

page.json

[
    {
        "counts": "36",
        "pages": "9",
        "page": "1",
        "products": [
            {
                "name": "iPhone 4",
                "price": "1000",
                "id": "104",
                "imgUrl": "/images/iphone4.jpg"
            },
            {
                "name": "iPhone 5",
                "price": "2000",
                "id": "105",
                "imgUrl": "/images/iphone5.jpg"
            },
            {
                "name": "iPhone 6",
                "price": "3000",
                "id": "106",
                "imgUrl": "/images/iphone6.jpg"
            },
            {
                "name": "iPhone 7",
                "price": "4000",
                "id": "107",
                "imgUrl": "/images/iphone7.jpg"
            }
        ]
    },
    {
        "counts": "36",
        "pages": "9",
        "page": "2",
        "products": [
            {
                "name": "huawei p6",
                "price": "1000",
                "id": "108",
                "imgUrl": "/images/p6.jpg"
            },
            {
                "name": "huawei p7",
                "price": "2000",
                "id": "109",
                "imgUrl": "/images/p7.jpg"
            },
            {
                "name": "huawei p8",
                "price": "3000",
                "id": "110",
                "imgUrl": "/images/p8.jpg"
            },
            {
                "name": "huawei p9",
                "price": "4000",
                "id": "111",
                "imgUrl": "/images/p9.jpg"
            }
        ]
    },
    {
        "counts": "36",
        "pages": "9",
        "page": "3",
        "products": [
            {
                "name": "MI 2",
                "price": "1000",
                "id": "112",
                "imgUrl": "/images/mi2.jpg"
            },
            {
                "name": "mi 3",
                "price": "2000",
                "id": "113",
                "imgUrl": "/images/mi3.jpg"
            },
            {
                "name": "mi 4",
                "price": "3000",
                "id": "114",
                "imgUrl": "/images/mi4.jpg"
            },
            {
                "name": "mi 5",
                "price": "4000",
                "id": "115",
                "imgUrl": "/images/mi5.jpg"
            }
        ]
    },
    {
        "counts": "36",
        "pages": "9",
        "page": "4",
        "products": [
            {
                "name": "iPhone 4",
                "price": "1000",
                "id": "116",
                "imgUrl": "/images/iphone4.jpg"
            },
            {
                "name": "iPhone 5",
                "price": "2000",
                "id": "117",
                "imgUrl": "/images/iphone5.jpg"
            },
            {
                "name": "iPhone 6",
                "price": "3000",
                "id": "118",
                "imgUrl": "/images/iphone6.jpg"
            },
            {
                "name": "iPhone 7",
                "price": "4000",
                "id": "119",
                "imgUrl": "/images/iphone7.jpg"
            }
        ]
    },
    {
        "counts": "36",
        "pages": "9",
        "page": "5",
        "products": [
            {
                "name": "huawei p6",
                "price": "1000",
                "id": "120",
                "imgUrl": "/images/p6.jpg"
            },
            {
                "name": "huawei p7",
                "price": "2000",
                "id": "121",
                "imgUrl": "/images/p7.jpg"
            },
            {
                "name": "huawei p8",
                "price": "3000",
                "id": "122",
                "imgUrl": "/images/p8.jpg"
            },
            {
                "name": "huawei p9",
                "price": "4000",
                "id": "123",
                "imgUrl": "/images/p9.jpg"
            }
        ]
    },
    {
        "counts": "36",
        "pages": "9",
        "page": "6",
        "products": [
            {
                "name": "MI 2",
                "price": "1000",
                "id": "124",
                "imgUrl": "/images/mi2.jpg"
            },
            {
                "name": "mi 3",
                "price": "2000",
                "id": "125",
                "imgUrl": "/images/mi3.jpg"
            },
            {
                "name": "mi 4",
                "price": "3000",
                "id": "126",
                "imgUrl": "/images/mi4.jpg"
            },
            {
                "name": "mi 5",
                "price": "4000",
                "id": "127",
                "imgUrl": "/images/mi5.jpg"
            }
        ]
    },
    {
        "counts": "36",
        "pages": "9",
        "page": "7",
        "products": [
            {
                "name": "iPhone 4",
                "price": "1000",
                "id": "128",
                "imgUrl": "/images/iphone4.jpg"
            },
            {
                "name": "iPhone 5",
                "price": "2000",
                "id": "129",
                "imgUrl": "/images/iphone5.jpg"
            },
            {
                "name": "iPhone 6",
                "price": "3000",
                "id": "130",
                "imgUrl": "/images/iphone6.jpg"
            },
            {
                "name": "iPhone 7",
                "price": "4000",
                "id": "131",
                "imgUrl": "/images/iphone7.jpg"
            }
        ]
    },
    {
        "counts": "36",
        "pages": "9",
        "page": "8",
        "products": [
            {
                "name": "huawei p6",
                "price": "1000",
                "id": "132",
                "imgUrl": "/images/p6.jpg"
            },
            {
                "name": "huawei p7",
                "price": "2000",
                "id": "133",
                "imgUrl": "/images/p7.jpg"
            },
            {
                "name": "huawei p8",
                "price": "3000",
                "id": "134",
                "imgUrl": "/images/p8.jpg"
            },
            {
                "name": "huawei p9",
                "price": "4000",
                "id": "135",
                "imgUrl": "/images/p9.jpg"
            }
        ]
    },
    {
        "counts": "36",
        "pages": "9",
        "page": "9",
        "products": [
            {
                "name": "MI 2",
                "price": "1000",
                "id": "136",
                "imgUrl": "/images/mi2.jpg"
            },
            {
                "name": "mi 3",
                "price": "2000",
                "id": "137",
                "imgUrl": "/images/mi3.jpg"
            },
            {
                "name": "mi 4",
                "price": "3000",
                "id": "138",
                "imgUrl": "/images/mi4.jpg"
            },
            {
                "name": "mi 5",
                "price": "4000",
                "id": "139",
                "imgUrl": "/images/mi5.jpg"
            }
        ]
    }
]


上一篇：等距离同心圆，用Photoshop制作等距离的同心圆下一篇：数据传输POST 提交数据常用几种方式
赞(2) 踩(0)
赏
您说多少就多少，您的支持是我最大的动力
赏金
微 信
赏金
支付宝
本文连接： https://www.yj521.com/article/99.html
版权声明： 本文为原创文章，版权归《越加网》所有，分享转载请注明出处！
首页 创意设计 软件开发 系统&运维 软件应用 关于博主 有情连接
越加网 Copyright © 2021 鲁ICP备17021179号-1