原理：前台换用ajax将页码以post的方式传到后台，后台接收页码，后台的操作与用PHP实现分页功能大致一样，只是还需将总页数传到前台，以便在前台输出分页链接。
那么前台怎样传页码呢？？？只需用ajax的回调函数，接收后台的数据，利用json，动态添加dom节点，利用for循环输出分页链接，并在链接a里增加一个data属性，属性值为
页码。当点击a时，利用js获取属性值，这样，即可实现js前台传页码。
1.index.html
<!DOCTYPE html>
<html lang="en">
<head>
<Meta charset="UTF-8">
<title>ajax分页刷新</title>
<style>td{border: 1px solid #ccc}
table{border-collapse:collapse;text-align: center}
#page{margin: 50px}
a{text-decoration: none;
padding: 10px;
width:20px;
height: 20px;
border: 1px solid #ccc}
a.selected{background: #ccc}
</style>
<script type="text/javascript" src="jquery.js"></script>
</head>
<body>
<table>
<thead>
<tr><td>id</td><td>讨论组名称</td><td>发给谁</td><td>谁发的</td><td>消息内容</td></tr>
</thead>
<tbody id="content">
</tbody>
<tfoot></tfoot>
</table>
<div id="page"></div>
<script type="text/javascript">
var page=1; //定义是第几页
getList(page);
function getList(page) {
$.ajax({
type: "post",data: {
page: page //把页码发送到后台
},url: "a.PHP",//后台url
success: function (response) {
var json = $.parseJSON(response); //将json字符串解析成对象
var s = '';
for (var i = 0; i < json.length - 1; i++) { //取聊天记录
s += '<tr><td>' + json[i].id + '</td>' +
'<td>' + json[i].group_name + '</td>' +
'<td>' + json[i].message_to + '</td>' +
'<td>' + json[i].message_from + '</td>' +
'<td>' + json[i].message_content + '</td>' +
'</tr>';
}
$("#content").html(s);
var s = '';
for (var j = 1; j <= json[i].total; j++) { //json[i].total是后台传过来的页数
//输出分页链接
if (page == j) s += '<a href="javascript:void(0)" data="' + j + '" class="selected">' + j + '</a>';
else s += '<a href="javascript:void(0)" data="' + j + '">' + j + '</a>';
}
$("#page").html(s);
}
});
}
$("#page").on('click','a',function () { //为a标签动态绑定事件
var page=$(this).attr("data"); //获取链接里的页码
getList(page);
});
</script>
</body>
</html>
2. a.PHP
<?PHP $conn=new MysqLi("localhost","root","","together"); if(!$conn){ echo "数据库连接错误!";exit; } $conn->query("set names 'utf8'"); $page=$_POST['page']; //获取前台传过来的页码 $pageSize=10; //设置每页显示的条数 $start=($page-1)*10; //从第几条开始取记录 $result=$conn->query("select id,group_name,message_to,message_from,message_content from groupmessageinfo limit {$start},{$pageSize}"); $list=''; //该字符串用来以json格式存储聊天记录 while($row=$result->fetch_assoc()){ $list.=json_encode($row).','; //对记录进行json编码 } $count=$conn->query("select id from groupmessageinfo")->num_rows; //获取总记录条数 $totalPage=ceil($count/$pageSize); //页数 $countArray=array( //该数组存储总页数，以方便在前台输出分页链接 'total'=>$totalPage ); $list.=json_encode($countArray).','; //json编码 echo '['.substr($list,strlen($list)-1).']'; //输出标准的json
3.引入jquery.js
4.为了让大家更方便于测试，可以自己先创建一个together数据库，并在数据库里加一张groupmessageinfo表，我现在贴出这张表的sql源码
-- PHPMyAdmin sql Dump -- version 4.0.4 -- http://www.PHPmyadmin.net -- -- 主机: localhost -- 生成日期: 2016 年 08 月 05 日 15:36 -- 服务器版本: 5.6.12-log -- PHP 版本: 5.4.16 SET sql_MODE = "NO_AUTO_VALUE_ON_ZERO"; SET time_zone = "+00:00"; /*!40101 SET @OLD_CHARACTER_SET_CLIENT=@@CHARACTER_SET_CLIENT */; /*!40101 SET @OLD_CHARACTER_SET_RESULTS=@@CHARACTER_SET_RESULTS */; /*!40101 SET @OLD_COLLATION_CONNECTION=@@COLLATION_CONNECTION */; /*!40101 SET NAMES utf8 */; -- -- 数据库: `together` -- -- -------------------------------------------------------- -- -- 表的结构 `groupmessageinfo` -- CREATE TABLE IF NOT EXISTS `groupmessageinfo` ( `id` mediumint(30) NOT NULL AUTO_INCREMENT,`group_name` varchar(50) COLLATE utf8_bin NOT NULL COMMENT '讨论组名称',`message_to` varchar(50) COLLATE utf8_bin NOT NULL COMMENT '发給谁',`message_from` varchar(50) COLLATE utf8_bin NOT NULL COMMENT '谁发的',`img_url` varchar(100) COLLATE utf8_bin NOT NULL DEFAULT '../face/0.jpg' COMMENT '发送消息的人的头像',`message_content` text COLLATE utf8_bin NOT NULL COMMENT '消息内容',`time` timestamp NOT NULL DEFAULT CURRENT_TIMESTAMP COMMENT '发送时间',PRIMARY KEY (`id`) ) ENGINE=InnoDB DEFAULT CHARSET=utf8 COLLATE=utf8_bin COMMENT='讨论组消息表' AUTO_INCREMENT=43 ; -- -- 转存表中的数据 `groupmessageinfo` -- INSERT INTO `groupmessageinfo` (`id`,`group_name`,`message_to`,`message_from`,`img_url`,`message_content`,`time`) VALUES (1,'去师大吗','钟林生,王勇平,彭双喜','彭双喜','../face/1.jpg','2016-04-06 15:13:31'),(2,'王勇平','../face/2.jpg','去啊','2016-04-06 15:14:46'),(3,'钟林生','../face/0.jpg','什么时候？','2016-04-06 15:16:46'),(4,'明天下午2点','2016-04-06 15:23:35'),(5,'哪里','2016-04-06 16:28:35'),(6,'火车站见','2016-04-07 14:39:46'),(7,'嗯嗯，火车站见',(8,'那就火车站见吧','2016-04-30 16:01:18'),(10,'去南大吗','去南大吗？','2016-04-30 16:20:12'),(12,'去','2016-04-30 16:22:52'),(13,'当然去啊','2016-04-30 16:23:05'),(14,'嗯嗯','2016-04-30 16:24:07'),(15,'好的','2016-04-30 16:24:17'),(16,'我听说南大的图书馆有20层','2016-04-30 16:30:54'),(17,'行的','2016-04-30 16:46:41'),(18,'http://localhost/together3.0_fuben/face/2.jpg','2016-04-30 16:52:10'),(19,'http://localhost/together3.0_fuben/face/1.jpg','我认为也可以','2016-04-30 16:53:02'),(20,'2016-04-30 16:55:06'),(21,'2016-04-30 16:55:21'),(22,'http://localhost/together3.0_fuben/face/0.jpg','2016-04-30 16:58:02'),(23,'那就这样了','2016-04-30 18:03:04'),(24,'那我们周六去吧~','2016-04-30 18:03:44'),(25,'大家早点睡吧~','2016-04-30 18:16:22'),(26,'周末登山','http://localhost/together4.0/face/2.jpg','我也想去北京大学，能不能带我？','2016-05-02 11:01:24'),(27,'去北京大学',王勇平','我也想去北京大学。。','2016-05-02 11:02:12'),(28,'菜肴故事','彭双喜,钟林生,李小明','李小明','http://localhost/together4.0/face/null.png','2016-05-02 14:36:34'),(29,'假期去上海吗','http://localhost/together4.0/face/1462201995.jpg','假期有去上海的吗','2016-05-02 15:18:25'),(30,彭双喜,'可以的啊','2016-05-02 15:20:34'),(31,李小明,徐睿','徐睿','http://localhost/together4.0/face/1462216946.jpg','好，早点睡','2016-05-02 19:59:57'),(32,'http://localhost/together5.0/face/1464841583.jpg','让人','2016-07-20 08:47:00'),(33,'2016-07-20 08:49:46'),(34,'？','2016-07-20 08:51:26'),(35,'2016-07-20 08:51:59'),(36,'hhh','2016-07-20 08:52:04'),(41,'2016-07-21 04:05:57'),(42,'哈哈','2016-07-21 05:07:53'); /*!40101 SET CHARACTER_SET_CLIENT=@OLD_CHARACTER_SET_CLIENT */; /*!40101 SET CHARACTER_SET_RESULTS=@OLD_CHARACTER_SET_RESULTS */; /*!40101 SET COLLATION_CONNECTION=@OLD_COLLATION_CONNECTION */;只需在together数据库里执行上面的sql语句，即可创建该数据表。然后大家可以随意地测试。 原文链接：https://www.f2er.com/ajax/161969.html
