CSS.lists{width:740px; margin:30px auto 0; position:relative}
#ul_lists li{float:left;width:220px;height:240px;margin:0 6px 6px;border:1px solid #ddd;padding:5px;overflow:hidden}
#ul_lists li img{width:220px; height:220px;margin:0 0 6px}
.page{ margin:12px 0 20px; text-align:center}
.page span{margin:5px; font-size:14px}jQuery首先声明全局变量,后面分页用到。
var page_cur = 1; //当前页
var total_num, page_size, page_total_num;//总记录数,每页条数,总页数接着通过函数getData() 获取当前页数据。我们利用$.ajax GET方式把参数page以json格式传到ajax.php。
function getData(page) { //获取当前页数据
$.ajax({
type: 'GET',
url: 'ajax.php',
data: {
'page': page - 1
},
dataType: 'json',
success: function(json) {
$("#ul_lists").empty();
total_num = json.total_num; //总记录数
page_size = json.page_size; //每页数量
page_cur = page; //当前页
page_total_num = json.page_total_num; //总页数
var li = "";
var list = json.list;
$.each(list,
function(index, array) { //遍历返回json
li += "
" + array['title'] + "";});
$("#ul_lists").append(li);
},
complete: function() {
getPageBar(); //js生成分页,可用程序代替
},
error: function() {
alert("数据异常,请检查是否json格式");
}
});
}每次请求返回的商品放置在#ul_lists中。当数据完全加载完毕后,调用函数getPageBar()生成分页,也可用程序来实现分页。
function getPageBar() { //js生成分页
if (page_cur > page_total_num) page_cur = page_total_num; //当前页大于最大页数
if (page_cur < 1) page_cur = 1; //当前页小于1
page_str = "共" + total_num + "条" + page_cur + "/" + page_total_num + "";
if (page_cur == 1) { //若是第一页
page_str += "首页上一页";
} else {
page_str += "首页上一页";
}
if (page_cur >= page_total_num) { //若是最后页
page_str += "下一页尾页";
} else {
page_str += "下一页尾页";
}
$("#page").html(page_str);
}最后,当页面第一次加载时,我们加载第一页数据即getData(1),当点击分页条中的分页链接时,通过getData(page)加载对应页码的数据。页面page可在分页的属性data-page中获取。
$("#page a").live('click',function() { //live 向未来的元素添加事件处理器,不可用bind
var page = $(this).attr("data-page"); //获取当前页
getData(page)
});PHPajax.php接收每次前端页面的ajax请求,根据提交的页码page,计算总记录数和总页数,读取对应页码下的数据列表,并将结果以JSON格式返回给前端页面。
include_once('connect.php');
$page = intval($_GET['page']); //当前页
$total_num = mysql_num_rows(mysql_query("select id from goods")); //总记录数
$page_size = 6; //每页数量
$page_total = ceil($total_num / $page_size); //总页数
$page_start = $page * $page_size;
$arr = array("total_num" = >$total_num, "page_size" = >$page_size, "page_total_num" = >$page_total, );
$query = mysql_query("SELECT id,title,pic FROM goods ORDER BY ID ASC LIMIT $page_start,$page_size");
while ($row = mysql_fetch_array($query)) {
$arr['list'][] = array('id' = >$row['id'], 'title' = >$row['title'], 'pic' = >$row['pic'], );
}
echo json_encode($arr);最后附上goods表结构,下载压缩包里也有哦~。
CREATE TABLE IF NOT EXISTS `goods` (
`id` int(8) NOT NULL AUTO_INCREMENT,
`title` varchar(80) NOT NULL,
`pic` varchar(255) NOT NULL,
PRIMARY KEY (`id`)
) ENGINE=MyISAM DEFAULT CHARSET=utf8;
[1]: http://www.erdangjiade.com/js/2.html
[2]: /img/bVKyOj