php+mysql+jqueryAjax实现商品分页加载

公司放假了,在家无聊.自己就捣鼓着一些小东西.

商城的图片分页加载,应该是比较常见的.之前都是直接用插件来完成的,所以这次就是试一下用原生的方式来实现.

HTML结构

 <div class="wrap">
	<div class="shop_list">
  <ul></ul>		
 </div>
	<ul class="pagebar">			
	</ul>
	</div>

html的结构是非常简单的,.shop_list>ul 下面是用来存放图片加载列表的..pagebar是用来放置页码。

CSS结构。

*{margin: 0;padding: 0;}
body{font-size: 12px;font-family: "微软雅黑";}
a{text-decoration: none;color: #333;}
em{font-style: normal;}
ul li{list-style: none;}
.wrap{width: 960px;margin: 20px auto;}
.shop_list{height: 300px;}
.shop_list ul li a{display: block;float: left;width: 230px;height: 310px;margin: 0 10px 10px 0;}
.shop_list ul li a img{width: 100%;height: 230px;vertical-align: middle;border: none;}
.shop_list ul li a .des{height: 36px;overflow: hidden;padding: 12px 9px 0;}
.shop_list ul li a .other{padding: 0 9px;}
.shop_list ul li a .other .price{float: left;color: #DD2727;}
.shop_list ul li a .other .num{float: right;color: #999;}
.pagebar{width: 500px;margin: 20px auto;height: 40px;}
.pagebar li{float: left;padding: 6px 12px;cursor: pointer;border: 1px solid #999999;margin-left: 10px;}
.pagebar li.active{background: #DD2727;border: 1px solid #DD2727;color: #fff;}

mysql

CREATE TABLE `add_shop` (
  `id` int(11) NOT NULL,
  `shop_title` varchar(32) NOT NULL,
  `shop_img` varchar(32) NOT NULL,
  `shop_introduce` varchar(32) NOT NULL
) ENGINE=InnoDB DEFAULT CHARSET=utf32;

INSERT INTO `add_shop` (`id`, `shop_title`, `shop_img`, `shop_introduce`) VALUES
(1, '口水娃年货大礼包1300g坚果炒货兰花豆青豆瓜子仁花生蚕豆小吃', 'img/2.jpg', '50'),
(3, '口水娃年货大礼包1300g坚果炒货兰花豆青豆瓜子仁花生蚕豆小吃1', 'img/1.jpg', '50'),
(4, '口水娃年货大礼包1300g坚果炒货兰花豆青豆瓜子仁花生蚕豆小吃2', 'img/2.jpg', '50'),
(5, '口水娃年货大礼包1300g坚果炒货兰花豆青豆瓜子仁花生蚕豆小吃3', 'img/3.jpg', '50'),
(6, '口水娃年货大礼包1300g坚果炒货兰花豆青豆瓜子仁花生蚕豆小吃4', 'img/4.jpg', '50'),
(7, '口水娃年货大礼包1300g坚果炒货兰花豆青豆瓜子仁花生蚕豆小吃5', 'img/5.jpg', '50'),
(8, '口水娃年货大礼包1300g坚果炒货兰花豆青豆瓜子仁花生蚕豆小吃6', 'img/6.jpg', '50'),
(9, '口水娃年货大礼包1300g坚果炒货兰花豆青豆瓜子仁花生蚕豆小吃7', 'img/7.jpg', '50'),
(10, '口水娃年货大礼包1300g坚果炒货兰花豆青豆瓜子仁花生蚕豆小吃8', 'img/8.jpg', '50'),
(11, '口水娃年货大礼包1300g坚果炒货兰花豆青豆瓜子仁花生蚕豆小吃9', 'img/9.jpg', '50'),
(12, '口水娃年货大礼包1300g坚果炒货兰花豆青豆瓜子仁花生蚕豆小吃1', 'img/10.jpg', '50'),
(13, '口水娃年货大礼包1300g坚果炒货兰花豆青豆瓜子仁花生蚕豆小吃1', 'img/11.jpg', '50'),
(14, '口水娃年货大礼包1300g坚果炒货兰花豆青豆瓜子仁花生蚕豆小吃1', 'img/12.jpg', '50'),
(15, '口水娃年货大礼包1300g坚果炒货兰花豆青豆瓜子仁花生蚕豆小吃1', 'img/13.jpg', '50'),
(16, '口水娃年货大礼包1300g坚果炒货兰花豆青豆瓜子仁花生蚕豆小吃1', 'img/14.jpg', '50'),
(17, '口水娃年货大礼包1300g坚果炒货兰花豆青豆瓜子仁花生蚕豆小吃1', 'img/15.jpg', '50'),
(18, '口水娃年货大礼包1300g坚果炒货兰花豆青豆瓜子仁花生蚕豆小吃1', 'img/16.jpg', '50'),
(19, '口水娃年货大礼包1300g坚果炒货兰花豆青豆瓜子仁花生蚕豆小吃1', 'img/17.jpg', '50'),
(20, '口水娃年货大礼包1300g坚果炒货兰花豆青豆瓜子仁花生蚕豆小吃1', 'img/12.jpg', '50'),
(21, '口水娃年货大礼包1300g坚果炒货兰花豆青豆瓜子仁花生蚕豆小吃1', 'img/14.jpg', '50'),
(22, '口水娃年货大礼包1300g坚果炒货兰花豆青豆瓜子仁花生蚕豆小吃2', 'img/11.jpg', '50'),
(23, '我是一张很好看的图片', 'img/3.jpg', '75'),
(24, '我是一张很好看的图片1111', 'img/7.jpg', '85'),
(25, '我是一张很好看的图片', 'img/3.jpg', '75'),
(26, '我是一张很好看的图片1111', 'img/7.jpg', '85');

php后台

<?php
	function db_connect() {
		$conn = mysql_connect("localhost", "root", "");
		mysql_select_db("shop", $conn);
		return mysql_query("SET NAMES UTF8", $conn);		
	}
	//遍历所有的数据出来,并用return出来让外面的可以用
	function db_getAll($sql) {
		$result = array();
		$res = mysql_query($sql);
		while(($row = mysql_fetch_assoc($res))) {
			$result[] = $row;
		}
		return $result;//所有的数据集合
	}
	
	db_connect();
//	print_r(db_getAll("SELECT COUNT(*) FROM add_shop"));
	
	//计算字段的个数 并用return出来让外面的可用
	function getRecordCount(){
		$sql = "SELECT COUNT(*) FROM add_shop";
		$data = db_getAll($sql);
		return (int)$data[0]["COUNT(*)"];
	}
	
	//总数据的数量
	$recordCount = getRecordCount();
//	echo $recordCount;

	//每页显示的记录数量
	$pageSize = 4;
	
	//总共有多少页 => 总共7页
	$pageCount = ceil($recordCount/$pageSize);
	
	//前台传递过来的参数是第几页 用get方法接受
	$page = (int)($_GET['page']);
	if($page<1){
		$page= 1;
	}else if($page>$pageCount){
		$page = $pageCount;
	}
	//每页第一条数据库索引 sql中limit是从0开始算的
	$firstIndex = ($page-1)*$pageSize;
	
	$data = db_getAll( "SELECT * FROM add_shop LIMIT {$firstIndex},{$pageSize}" );

	$arr = array(
		'page' => $page,
		'pagecount' => $pageCount,
		'recordcount' => $recordCount,
		'prev' => $page - 1,
		'next' => $page + 1,
		'data' => $data
	);
echo json_encode($arr);
	
?>

HTML前台


var curpage = 1;//当前的页码
var prevpage = 0;//上一张
var nextpage = 0;//下一张
var a = 0;
$.ajax({
	type:"GET",
	url:"action/test.php?page="+1,
	success:function(res){
	var a = jQuery.parseJSON(res) //转换成对象
	var str1 = "";
	$(".pagebar").append('<li class="prev">上一页</li>');
	for (var i=0;i<a.pagecount;i++) {
		str1 = '<li class="num">'+(i+1)+'</li>'
		$(".pagebar").append(str1)
		}
		$(".pagebar").find("li").eq(1).addClass("active");
		$(".pagebar").append('<li class="next">下一页</li>');
		}
	})
			function render(page){
				$.ajax({
				type:"GET",
				url:"action/test.php?page="+page,
				success:function(res){
					var str = "";
					var a = jQuery.parseJSON(res) //转换成对象
					for (var i=0;i<a["data"].length;i++) {
						str += '<li><a href="#"><img src="' + a['data'][i].shop_img + '" /><p class="des">' + a['data'][i].shop_title + '</p><div class="other"><em class="price">' + a['data'][i].shop_introduce + '元</em><em class="num"><span>666</span>人已买</em></div></a></li>'
						$(".shop_list ul").html(str)	
					}
					
						page = a['page'];
						prevpage = a['prev'];
						nextpage = a['next'];
					
				}
			})	
			}
			render(1)
			//点击下一页
			$(document).on("click",".next",function(){
				var len = $(".pagebar .num").length
				a++;
				$(".pagebar .num").eq(a).addClass("active").siblings(".num").removeClass("active")
				if(a>len-1){
					a = len-1
				}
				render(nextpage);
			})
			//点击上一页
			$(document).on("click",".prev",function(){
				a--;
				if(a<1){
					a = 0
				}
				$(".pagebar .num").eq(a).addClass("active").siblings(".num").removeClass("active")
				render(prevpage)
			})
			//点击切换
			$(document).on("click",".pagebar .num",function(){
				$(this).addClass("active").siblings(".num").removeClass("active")
				render($(this).text());
				a = $(this).index()-1
			})

第一页效果

第二页效果

最后一页效果

php+mysql+jqueryAjax实现商品分页加载

猜你喜欢