ajax实现无刷新分页功能
原理：前台换用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,0,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, '去师大吗', '钟林生,王勇平,彭双喜', '王勇平', '../face/2.jpg', '明天下午2点', '2016-04-06 15:23:35'), (5, '去师大吗', '钟林生,王勇平,彭双喜', '钟林生', '../face/0.jpg', '哪里', '2016-04-06 16:28:35'), (6, '去师大吗', '钟林生,王勇平,彭双喜', '彭双喜', '../face/1.jpg', '火车站见', '2016-04-07 14:39:46'), (7, '去师大吗', '钟林生,王勇平,彭双喜', '彭双喜', '../face/1.jpg', '嗯嗯，火车站见', '2016-04-07 14:39:46'), (8, '去师大吗', '钟林生,王勇平,彭双喜', '钟林生', '../face/0.jpg', '那就火车站见吧', '2016-04-30 16:01:18'), (10, '去南大吗', '钟林生,王勇平,彭双喜', '钟林生', '../face/0.jpg', '去南大吗？', '2016-04-30 16:20:12'), (12, '去师大吗', '钟林生,王勇平,彭双喜', '钟林生', '../face/0.jpg', '去', '2016-04-30 16:22:52'), (13, '去南大吗', '钟林生,王勇平,彭双喜', '钟林生', '../face/0.jpg', '当然去啊', '2016-04-30 16:23:05'), (14, '去南大吗', '钟林生,王勇平,彭双喜', '王勇平', '../face/2.jpg', '嗯嗯', '2016-04-30 16:24:07'), (15, '去师大吗', '钟林生,王勇平,彭双喜', '王勇平', '../face/2.jpg', '好的', '2016-04-30 16:24:17'), (16, '去南大吗', '钟林生,王勇平,彭双喜', '王勇平', '../face/2.jpg', '我听说南大的图书馆有20层', '2016-04-30 16:30:54'), (17, '去师大吗', '钟林生,王勇平,彭双喜', '王勇平', '../face/2.jpg', '行的', '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, '去师大吗', '钟林生,王勇平,彭双喜', '彭双喜', 'http://localhost/together3.0_fuben/face/1.jpg', '嗯嗯', '2016-04-30 16:55:06'), (21, '去南大吗', '钟林生,王勇平,彭双喜', '彭双喜', 'http://localhost/together3.0_fuben/face/1.jpg', '好的', '2016-04-30 16:55:21'), (22, '去师大吗', '钟林生,王勇平,彭双喜', '钟林生', 'http://localhost/together3.0_fuben/face/0.jpg', '好的', '2016-04-30 16:58:02'), (23, '去师大吗', '钟林生,王勇平,彭双喜', '钟林生', 'http://localhost/together3.0_fuben/face/0.jpg', '那就这样了', '2016-04-30 18:03:04'), (24, '去南大吗', '钟林生,王勇平,彭双喜', '钟林生', 'http://localhost/together3.0_fuben/face/0.jpg', '那我们周六去吧~', '2016-04-30 18:03:44'), (25, '去师大吗', '钟林生,王勇平,彭双喜', '钟林生', 'http://localhost/together3.0_fuben/face/0.jpg', '大家早点睡吧~', '2016-04-30 18:16:22'), (26, '周末登山', '钟林生,王勇平,彭双喜', '王勇平', 'http://localhost/together4.0/face/2.jpg', '我也想去北京大学，能不能带我？', '2016-05-02 11:01:24'), (27, '去北京大学', '钟林生,王勇平', '王勇平', 'http://localhost/together4.0/face/2.jpg', '我也想去北京大学。。', '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, '周末登山', '钟林生,彭双喜,王勇平,李小明', '李小明', 'http://localhost/together4.0/face/1462201995.jpg', '可以的啊', '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, '去师大吗', '彭双喜,王勇平,钟林生,李小明,徐睿', '钟林生', 'http://localhost/together5.0/face/1464841583.jpg', '嗯嗯', '2016-07-20 08:49:46'), (34, '去师大吗', '彭双喜,王勇平,钟林生,李小明,徐睿', '钟林生', 'http://localhost/together5.0/face/1464841583.jpg', '？', '2016-07-20 08:51:26'), (35, '去师大吗', '彭双喜,王勇平,钟林生,李小明,徐睿', '钟林生', 'http://localhost/together5.0/face/1464841583.jpg', '？', '2016-07-20 08:51:59'), (36, '去师大吗', '彭双喜,王勇平,钟林生,李小明,徐睿', '钟林生', 'http://localhost/together5.0/face/1464841583.jpg', 'hhh', '2016-07-20 08:52:04'), (41, '去师大吗', '彭双喜,王勇平,钟林生,李小明,徐睿', '钟林生', 'http://localhost/together5.0/face/1464841583.jpg', '嗯嗯', '2016-07-21 04:05:57'), (42, '去师大吗', '彭双喜,王勇平,钟林生,李小明,徐睿', '钟林生', 'http://localhost/together5.0/face/1464841583.jpg', '哈哈', '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语句，即可创建该数据表。然后大家可以随意地测试。