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

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

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

HTML结构

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后台

 总共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('
上一页
');
	for (var i=0;i'
		$(".pagebar").append(str1)
		}
		$(".pagebar").find("li").eq(1).addClass("active");
		$(".pagebar").append('
下一页
');
		}
	})
			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'][i].shop_title + '
' + a['data'][i].shop_introduce + '元666人已买
'
						$(".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
			})

 第一页效果

第二页效果

最后一页效果