jquery tmpl 确实挺好的。方便数据的展示。上代码。。。
//服务器端
<?php
mysql_connect("localhost", "root", "");
mysql_select_db("user");
if ($_GET['type'] == 'count') {
$sql = "select count(*) num from user";
$count = mysql_fetch_assoc(mysql_query($sql));
echo ceil($count['num']/5);
} else {
$page=$_GET['page']?$_GET['page']:0;
$sql = "select * from user limit $page, 5";
$query = mysql_query($sql);
while ($res = mysql_fetch_assoc($query)) {
$outs[] = $res;
}
echo json_encode($outs);
}
//html
//============================================================================
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>data list</title>
<style type="text/css">
tr td{ border-bottom:#CCCCCC 1px solid; border-left:#CCCCCC 1px solid}
table{ border-right:#CCCCCC 1px solid; border-top:#CCCCCC 1px solid}
</style>
<link href="css.css" rel="stylesheet" type="text/css" />
</head>
<body>
<table width="600" border="0" cellpadding="0" cellspacing="0">
<tr>
<td> 编号</td>
<td> 姓名</td>
<td> 年龄</td>
<td> 创建时间</td>
</tr>
</table>
<div id="pager" ></div>
<script type="text/x-jquery-tmp" id="list">
<tr>
<td> ${id}</td>
<td> ${name}</td>
<td> ${age}</td>
<td> ${createtime}</td>
</tr>
</script>
</body>
</html>
<script type="text/javascript" src="js/jquery-1.8.3.js"></script>
<script type="text/javascript" src="js/jquery.tmpl.js"></script>
<script type="text/javascript" src="js/jquery.pager.js"></script>
<script type="text/javascript">
var npage=0;
$(document).ready(function(){
function showdata(npage){
$.getJSON("data.php",{page:npage},function(data,res){
if($.trim(res)=='success'){
//清出以前的
$("table tr:not(:first)").remove();
$("#list").tmpl(data).appendTo("table");
}else{
alert("request failed");
}
});
}
function pages(pages){
PageClick = function(pageclickednumber) {
$("#pager").pager({ pagenumber: pageclickednumber, pagecount: 15, buttonClickCallback: PageClick});
showdata(pageclickednumber);
$(".pages li:eq(0)").html('首页');
}
$("#pager").pager({ pagenumber: 1, pagecount:pages, buttonClickCallback: PageClick });
$(".pages li").eq(0).html('首页');
alert( $(".pages li").eq(0).html());
}
//分页
$.get("data.php",{type:'count'},function(data){
pages(data)
});
showdata(npage);
});
</script>