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,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语句，即可创建该数据表。然后大家可以随意地测试。

ajax实现无刷新分页功能

猜你在找的Ajax相关文章