tp5+ajax+jq分页

tp5框架里面自带有panigate()+rende()的方法可以超简单的实现分页，但是就是看着一直要刷新很不爽，所以找了网上的好多代码，终于找到了一个逻辑简单的无刷新分页，以下是我更改适合之后实现的效果

代码里面有详细注释了，就不多说了，说明一下分页查询的原理吧：点击一个分页按钮，ajax向后端传一个页码（curPage）参数，变换起始位置达到分页的效果，然后通过查询方法limit(‘起始位置’,‘显示数量’）查询数据并渲染；

html代码：

<div id="data-area">
    <ul>　　　　　　　　　　　　　　　　<!--这里添加分页数据--> 　　　　　　　　　　　　　　</ul>
</div>
<div id="pageBar"><!--这里添加分页按钮栏--></div>

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 += "

• " + array['id'] + " " + array['title'] + " " + array['article'] + " " + array['time'] + "
• "; }); //遍历数据，形成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 += " 首页"; pageBar += " 上一页"; } //显示的页码按钮(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 += " " + i + ""; } else { pageBar += " " + i + ""; } } //如果不是最后页,显示输出“下一页 ， 末页” if (curPage != totalPage) { pageBar += " 下一页"; pageBar += " 末页"; } //匹配改变pageBar里面的内容 $("#pageBar").html(pageBar); } //页面加载时初始化分页 $(function () { turnPage(1); }); 转载自：https://blog.csdn.net/abc455050954/article/details/79510197