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
})

 第一页效果



第二页效果



最后一页效果