tp5框架里面自带有panigate()+rende()的方法可以超简单的实现分页，但是就是看着一直要刷新很不爽，所以找了网上的好多代码，终于找到了一个逻辑简单的无刷新分页，以下是我更改适合之后实现的效果
代码里面有详细注释了，就不多说了，说明一下分页查询的原理吧：点击一个分页按钮，ajax向后端传一个页码（curPage）参数，变换起始位置达到分页的效果，然后通过查询方法limit('起始位置','显示数量'）查询数据并渲染；
html代码：
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>测试</title> <link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/4.0.0/css/bootstrap.css"> <link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css"> </head> <style> #pageBar { text-align: right; padding: 0 20px 20px 0; } .pageBtn a { display: inline-block; border: 1px solid #aaa; padding: 2px 5px; margin: 0 3px; font-size: 13px; background: #ECECEC; color: black; text-decoration: none; -moz-border-radius: 2px; -webkit-border-radius: 3px; } .pageBtn-selected a { display: inline-block; border: 1px solid #aaa; padding: 2px 5px; margin: 0 3px; font-size: 13px; background: #187BBD; color: white; text-decoration: none; -moz-border-radius: 2px; -webkit-border-radius: 3px; } .pageBtn a:hover { background: #187BBD; color: white; } </style> <body> <div class="jumbotron"> <div id="data-area"> <ul> <!--这里添加分页数据--> </ul> </div> <div id="pageBar"><!--这里添加分页按钮栏--></div> </body> <!--<script type="text/javascript" src="__STATIC__/index/jquery-3.2.1.min.js"></script>--> <script src="https://cdn.bootcss.com/jquery/1.12.4/jquery.js"></script> <script src="__STATIC__/index/js/ajaxPage.js"></script> </html>
php代码（控制器）：
<?php namespace app\index\controller; use think\Controller; class Index extends Controller { /** * @return mixed * 主页 */ public function index() { return $this->fetch(); } /** * @throws \think\db\exception\DataNotFoundException * @throws \think\db\exception\ModelNotFoundException * @throws \think\exception\DbException * 分页数据处理查询 * :ajax查询返回数据 */ public function getPage(){ if(request()->isAjax()){ //1.获取数据（curPage） $page=input('get.'); $curPage = $page['curPage']; //2.定义分页所需的数据 $totalItem = '10'; //总记录数(自行定义) $pageSize='4'; //每一页记录数(自行定义) $totalPage =ceil($totalItem/$pageSize); //总页数 $startItem = ($curPage-1) * $pageSize;//根据页码来决定查询数据的节点 //3.查询数据 $res=db('content') ->limit($startItem,$pageSize) ->select(); //4.放入所有数据 $arr['totalItem']=$totalItem; $arr['pageSize']=$pageSize; $arr['totalPage']=$totalPage; foreach($res as $lab) { $arr['data_content'][] = $lab; } //5.结果返回（此处没有判定是否查询成功） $this->result($arr,'1','成功','json'); } } }
ajaxPage.js代码：
var curPage; //当前页数 var totalItem; //总记录数 var pageSize; //每一页记录数 var totalPage; //总页数 // curPage = getUrlParam('page') /** * 获取url里面的参数(name)!!!!个人私藏 * **/ /* function getUrlParam(name) { var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)"); //构造一个含有目标参数的正则表达式对象 var r = window.location.search.substr(1).match(reg); //匹配目标参数 if (r != null) return unescape(r[2]); return null; //返回参数值 }*/ //获取分页数据 function turnPage(page) { $.ajax({ type: 'get', url: 'getPage', //这里是请求的后台地址，自己定义 data: {'curPage': page}, dataType: 'json', beforeSend: function () { $("#data-area ul").append("加载中..."); }, success: function (data) { $("#data-area ul").empty(); //移除原来的分页数据 totalItem = data.data.totalItem; // 返回的总记录数 pageSize = data.data.pageSize; //返回的每一页记录数 curPage = page; //返回的当前页码 totalPage = data.data.totalPage; //返回的总页数 console.log("totalItem:"+totalItem); console.log("pageSize:"+pageSize); console.log("curPage:"+curPage); console.log("totalPage:"+totalPage); var data_content = data.data.data_content; //返回的数据内容 console.log(data_content); var data_html = ""; //数据输出的html代码 //添加新的分页数据（数据的显示样式根据自己页面来设置，这里只是一个简单的列表） $.each(data_content, function (index, array) { data_html += "<li>" + array['id'] + " " + array['title'] + " " + array['article'] + " " + array['time'] + "</li>"; }); //遍历数据，形成html代码 $("#data-area ul").append(data_html); //输出html代码 getPageBar(); }, /* complete: function() { //添加分页按钮栏 getPageBar(); },*/ error: function () { alert("数据加载失败"); } }); } /* curPage; //当前页数 totalItem; //总记录数 pageSize; //每一页记录数 totalPage; //总页数 */ //获取分页条（分页按钮栏的规则和样式根据自己的需要来设置） function getPageBar() { //防止数据错误时候出现当前页数大于总页数 if (curPage > totalPage) { curPage = totalPage; } //防止数据错误时候出现当前页数小于第一页 if (curPage < 1) { curPage = 1; } //定义分页按钮html代码 pageBar = ""; //如果不是第一页 if (curPage != 1) { pageBar += "<span class='pageBtn'><a href='javascript:turnPage(1)'>首页</a></span>"; pageBar += "<span class='pageBtn'><a href='javascript:turnPage("+(curPage-1)+")'>上一页</a></span>"; } //显示的页码按钮(5个) //定义start 和end两个变量准备循环输出可见的分页按钮 var start, end; if (totalPage <= 5) { start = 1; end = totalPage; } else { //当前页码与总页数相差1个的时候，要显示之前的页码 if (totalPage - curPage < 2) { start = totalPage - 4; end = totalPage; } else { //显示前面两个和后面两个 start = curPage - 2; end = curPage + 2; } } //循环输出分页按钮 for (var i = start; i <= end; i++) { if (i == curPage) { pageBar += "<span class='pageBtn-selected'><a href='javascript:turnPage(" + i + ")'>" + i + "</a></span>"; } else { pageBar += "<span class='pageBtn'><a href='javascript:turnPage(" + i + ")'>" + i + "</a></span>"; } } //如果不是最后页,显示输出“下一页 ， 末页” if (curPage != totalPage) { pageBar += "<span class='pageBtn'><a href='javascript:turnPage(" + (parseInt(curPage) + 1) + ")'>下一页</a></span>"; pageBar += "<span class='pageBtn'><a href='javascript:turnPage(" + totalPage + ")'>末页</a></span>"; } //匹配改变pageBar里面的内容 $("#pageBar").html(pageBar); } //页面加载时初始化分页 $(function () { turnPage(1); });