原理:前台换用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语句,即可创建该数据表。然后大家可以随意地测试。