jquery ajax php mysql 无刷新分页 demo

最新推荐文章于 2021-01-27 11:46:33 发布

sakulaza

最新推荐文章于 2021-01-27 11:46:33 发布

阅读量1.7k

点赞数

CC 4.0 BY-SA版权

分类专栏： web前端文章标签： jquery ajax php 分页

本文链接：https://blog.youkuaiyun.com/sakulaza/article/details/13624479

web前端专栏收录该内容

3 篇文章

订阅专栏

本文介绍了一个基于HTML、CSS和JavaScript的分页效果实现方案。通过AJAX从PHP后端获取数据，前端展示商品列表，并实现了分页导航。该方案考虑了不同页面数量时的分页显示逻辑。

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

效果：

Html部分

<div class="index_goods index_goods_a index_goods_h">
      		<div class="clearfix"> 
        		<!--大图-->
        		<div class="goods_list goods_lista" id="list">
        			<img alt="loading" src="images/loading.gif">
			        <!--/列表--> 
        		</div>
      		</div>
    	</div>
		<div class="page clearfix">
        	<div class="right">
        	</div>
		</div>

css部分

.page {
color: #3A3A3A;
text-align: right;
}
.page span {
display: inline-block;
line-height: 19px;
vertical-align: middle;
}
.page a:hover, .page a.cur {
background: none repeat scroll 0 0 #505050;
border: 1px solid #505050;
color: #FFFFFF;
text-decoration: none;
}
.page a {
background: url("../images/t0159ba5f517058f9de.png") repeat-x scroll 0 0 rgba(0, 0, 0, 0);
border: 1px solid #B0B0B0;
border-radius: 2px 2px 2px 2px;
color: #3A3A3A;
display: inline-block;
line-height: 17px;
margin: 0 0 0 8px;
padding: 0 7px;
vertical-align: middle;
}

Javascript部分

<script type="text/javascript">
var curPage = 1; //当前页码
var total,pageSize,totalPage;
//获取数据
function getData(page){ 
	$.ajax({
		type:'POST',
		url:'pages.php',
		data:{'pageNum':page},
		dataType:'json',
		beforeSend:function(){
		           
		},
		success:function(json){
			$("#list").empty();
			total = json.total; //总记录数
			pageSize = json.pageSize; //每页显示条数
			curPage = page; //当前页
			totalPage = json.totalPage; //总页数
			var li = "";
			var list = json.list;
			$.each(list,function(index,p){ //遍历json数据列
				li += "<div class='goods_item'><div class='goods_img'><a href='#' target='_blank'><img src='upload/"
					+p['img']+"' width='156' height='99'/></a></div><div class='goods_info'> <strong class='c_texta'><a href='#' target='_blank'>"
					+p['name']+"</a></strong><div class='goods_price'><img src='images/point.png' class='ico_jf'>"
					+p['point']+"</div><p class='c_textf'>剩余:<span>"
					+p['qty']+"个</span></p><a href='javascript:;' target='_blank' class='btn_btn btn_buy' title='购买'>购买</a></div></div>";
			});
			$("#list").append(li);
		},
		complete:function(){ //生成分页条
			getPageBar();
		},
		error:function(){
			alert("数据加载失败");
		}
	});
}

//获取分页条
function getPageBar(){
	//页码大于最大页数
	if(curPage>totalPage) curPage=totalPage;
	//页码小于1
	if(curPage<1) curPage=1;
	pageStr = "<span class='count'>共"+total+"条结果，"+curPage+"/"+totalPage+"页</span><span class='gopage'>";
   
	//如果是第一页
	if(totalPage<=4){
		if(curPage==1){
			pageStr += "<a href='javascript:void(0)' class='cur'>1</a>";
			for(var i=2;i<=totalPage;i++){
				pageStr += "<a href='javascript:void(0)' rel='"+i+"'>"+i+"</a>";
			}
		}else{
			pageStr += "<a href='javascript:void(0)' class='page_c_prew' rel='"+(curPage-1)+"'><i class='l'></i>上一页</a>";
			for(var i=1;i<=totalPage;i++){
				if(i==curPage){
					pageStr += "<a href='javascript:void(0)' class='cur'>"+i+"</a>"
				}else{
					pageStr += "<a href='javascript:void(0)' rel='"+i+"'>"+i+"</a>";
				}
			}    
		}
	}else{//当页数大于5的时候就要这样显示1 2 3 4 ...
		if(curPage<=3){
			if(curPage==1){
				pageStr += "<a href='javascript:void(0)' class='cur'>1</a>";
			}else{
				pageStr += "<a href='javascript:void(0)' class='page_c_prew' rel='"+(curPage-1)+"'><i class='l'></i>上一页</a>";
				pageStr += "<a href='javascript:void(0)' class='cur' rel='1'>1</a>";
			}
			
			for(var i=2;i<=4;i++){
				if(i==curPage){
					pageStr += "<a href='javascript:void(0)' class='cur'>"+i+"</a>"
				}else{
					pageStr += "<a href='javascript:void(0)' rel='"+i+"'>"+i+"</a>";
				}
			}
			pageStr += "<span>...</span>";
		}else{
			pageStr += "<a href='javascript:void(0)' class='page_c_prew' rel='"+(curPage-1)+"'><i class='l'></i>上一页</a>";
			pageStr += "<span>...</span>";
			if(curPage>totalPage-2){
				for(var i=totalPage-2;i<=totalPage;i++){
					if(i==curPage){
						pageStr += "<a href='javascript:void(0)' class='cur'>"+i+"</a>";
					}else{
						pageStr += "<a href='javascript:void(0)' rel='"+i+"'>"+i+"</a>";
					}
				}
			}else{
				pageStr += "<a href='javascript:void(0)' rel='"+(curPage-1)+"'>"+(curPage-1)+"</a>";
				pageStr += "<a href='javascript:void(0)' class='cur'>"+curPage+"</a>";
				pageStr += "<a href='javascript:void(0)' rel='"+(parseInt(curPage)+1)+"'>"+(parseInt(curPage)+1)+"</a>";
				pageStr += "<span>...</span>";
			}
		}
	}
	//如果是最后页
	if(curPage>=totalPage){
		//pageStr += "<span>></span>   <span>>></span>";
	}else{
		pageStr += "<a href='javascript:void(0)' class='page_c_next' rel='"+(parseInt(curPage)+1)+"'>下一页<i class='r'></i></a>";
	}
	      
	$(".right").html(pageStr);
}

$(function(){
	getData(1);
	$(".right a").live('click',function(){
		var rel = $(this).attr("rel");
		if(rel){
			getData(rel);
		}
	});
});
</script>

PHP部分

require_once(dirname(dirname(__FILE__)).'/config.inc.php');

//分页
$page = intval($_POST['pageNum']);
$obj_mall_product = new class_mall_product();
$total = $obj_mall_product->select('count');//总记录数

$pageSize = 12;//每页显示数
$totalPage = ceil($total/$pageSize);//总页数

$products = $obj_mall_product->select('*',$page,$pageSize);

$arr['total'] = $total;
$arr['pageSize'] = $pageSize;
$arr['totalPage'] =$totalPage;
foreach ($products as $p){
	$arr['list'][] = array(
		'name' 	=> $p['name'],
		'qty' 	=> $p['quantity'],
		'point' => $p['point'],
		'img' 	=> $p['img'],
	); 
}

echo json_encode($arr);

参考博客：

http://www.cnblogs.com/leijie/p/3239291.html