效果
PHP代码
<?PHP
header("content-type:text/html;charset=utf-8");
function showpages() {
$page=$_POST["page"];
if($page)
{
$MysqLi=new MysqLi('localhost','root','PHPdata');
if($MysqLi->connect_error)
{
die("连接失败");
}
$MysqLi->query("set names utf8");
$result=$MysqLi->query("select * from articles");
$total=$result->num_rows;
$start=($page-1)*10;
if($total-$start>0 and $total-$start<10)
{
$size=$total-$start;
}
else if($total-$start>=10)
{
$size=10;
}
else
{
$size=0;
}
if($size)
{
$result=$MysqLi->query("select * from articles limit $start,$size");
if($result->num_rows)
{
$json=array();
$index=0;
while($row=$result->fetch_row())
{
$json[$index][0]=$row[0];
$json[$index][1]=$row[1];
$index++;
}
$json=json_encode($json);
echo $json;
}
}
$MysqLi->close();
}
}
showpages();
?>
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" xml:lang="en">
<head>
<Meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
<script src="jquery.js"></script>
<script src="fenye.js"></script>
<link rel="stylesheet" href="fenye.css" />
<title>简单的分页练习</title>
</head>
<body>
<div class="content">
<table>
<tr class="hang">
<th>文章标题</th>
</tr>
<tr class="hang">
<td><a href="#">[PHP]Ajax初探</a></td>
</tr>
<tr class="hang">
<td><a href="#">[jQuery]表格内容的查看与删除</a></td>
</tr>
<tr class="hang">
<td><a href="#">[jQuery]练习-鼠标移动表格变色</a></td>
</tr>
<tr class="hang">
<td><a href="#">[PHP]PHPMailer类库的使用</a></td>
</tr>
<tr class="hang">
<td><a href="#">[PHP]MysqLi函数</a></td>
</tr>
<tr class="hang">
<td><a href="#">[PHP]字符串处理函数</a></td>
</tr>
<tr class="hang">
<td><a href="#">[PHP]数学函数</a></td>
</tr>
<tr class="hang">
<td><a href="#">[PHP]PHP预定义变量</a></td>
</tr>
<tr class="hang">
<td><a href="#">[PHP]图像处理-2</a></td>
</tr>
<tr class="hang">
<td><a href="#">[PHP]PHP图像处理-1</a></td>
</tr>
</table>
<span class="btn">1</span>
<span class="btn">2</span>
<span class="btn">3</span>
<span class="btn">4</span>
<span class="btn">5</span>
<span class="btn">6</span>
<span class="btn">7</span>
<span class="btn">8</span>
<span class="btn">9</span>
<span class="btn">10</span>
<span class="btn">11</span>
<span class="btn">12</span>
<span class="btn">13</span>
<span class="btn">14</span>
<span class="btn">15</span>
<span class="btn">16</span>
<span class="btn">17</span>
<span class="btn">18</span>
<span class="btn">19</span>
</div>
</body>
</html>
jQuery代码
$(document).ready(function() {
$(".btn").mouSEOver(function(){
$(this).css("cursor","pointer");
})
$(".btn").click(function() {
var pageindex=$(this).index();
var sendData={"page":pageindex};
$.ajax({
type:"post",url:"fenye.PHP?"+Math.random(),data:sendData,dataType:"json",success:function(data) {
for(var i=data.length;i<10;i++)
{
$(".hang").find("a").eq(i).text("");
$(".hang").find("a").eq(i).attr("href","");
}
for(var i=0;i<data.length;i++)
{
$(".hang").find("a").eq(i).text(data[i][0]);
$(".hang").find("a").eq(i).attr("href",data[i][1]);
}
}
})
})
})
CSS代码
*{ margin: 0px; padding: 0px; }
.content{ display: block; width:800px; height:auto; margin: 0px auto; }
table{ margin-top: 10px; }
.hang{ width:800px; height: 40px; text-align: left; font:18px 宋体; }
.hang>td,th{ width: 800px; height: 40px; padding-left: 12px; border-bottom: solid 1px gray; }
.btn{ height: 20px; width: 20px; float:left; display: block; border: solid 1px gray; text-align: center; }
.btn{ display: block; width:20px; height: 20px; float: left; margin-top: 10px; margin-left: 5px; }
a{ text-decoration: none; }