tp5框架里面自带有panigate()+rende()的方法可以超简单的实现分页，但是就是看着一直要刷新很不爽，所以找了网上的好多代码，终于找到了一个逻辑简单的无刷新分页，以下是我更改适合之后实现的效果
首先是后台代码 （这里展示和分页用的是一个方法）
php代码示例
public function index(){ $data = \app\homes\model\Goods::with(‘Types‘)->paginate(2); //渲染分页按钮 $page = $data->render(); //转换为数据 $list = $data->toArray()[‘data‘]; //前台ajax分页，如果是ajax请求的话就会进入该区间，下面的代码就不会执行 if(\request()->isAjax()){ $data = $list; //这一段是将数据赋值给一个数组，这个数组用于ajax请求返回给前端 $data[‘page‘] = $page; //这个是分页的按钮 $data[‘status‘] = 1; //状态码 return json($data); //返回json格式的数据 } return view(‘show/show‘,[‘data‘=>$data,‘list‘=>$list,‘page‘=>$page]); }
第二步 HTML代码
把分页按钮渲染出来
<div class="list"> {$page} </div>
第三步 jquery代码
这里需要用到两个方法
第一个：
$(‘.list‘).delegate(‘a‘,‘click‘,function(){ var url = $(this).attr(‘href‘); //这个url就是将要访问的地址 $.ajax({ url:url, success:function(res){ page(res); //page方法用于替换数据 } }) return false; //这里就是阻止a标签默认跳转的行为 });
第二个： 这里的 tr 是替换的html标签 我这里用的是模板替换 所以代码多了点
function page(res){ tr = ‘‘; //准备一个容器 $(‘.list‘).html(res.page); //请求到后台的数据，替换之前分页按钮 delete res.page;//删除之前返回的分页按钮 说一下为什么要删除这个吧.因为返回的json中,page也是其中的一个下标，也会进入for循环中，所以要提前删掉，不然会出现undefined的情况。 delete res.status;//删除之前后台返回的状态码 for(var k in res){ //这里是拼接html标签 tr+=‘<tr>‘; tr+=‘<td>‘+‘<input type="checkbox" id="check5-td1" name="check5-td1">‘+‘</td>‘; tr+=‘<td class="cell-small text-center">‘+res[k].gid+‘</td>‘; tr+=‘<td class="cell-small text-center"><img src="./uploads/‘+res[k].gimg+‘" width="50" height="50"></td>‘; tr+=‘<td><a href="javascript:void(0)">‘+res[k].gname+‘</a></td>‘; tr+=‘<td class="cell-small text-center">‘+res[k].gprice+‘</td>‘; tr+=‘<td>‘+res[k].gstate+‘</td>‘; tr+=‘<td>‘+res[k].gtime+‘</td>‘; tr+=‘<td>‘+res[k].tname+‘</td>‘; tr+=‘<td class="text-center">‘ tr+=‘<div class="btn-group">\n‘ + ‘ <a href="javascript:void(0)" class="btn btn-xs btn-success"><i\n‘ + ‘ class="fa fa-pencil"></i></a>\n‘ + ‘ <a href="javascript:void(0)" class="btn btn-xs btn-danger"><i\n‘ + ‘ class="fa fa-trash-o"></i></a>\n‘ + ‘ </div>‘ tr+=‘</td>‘; tr+=‘</tr>‘; } $(‘#mylist‘).html(tr);//把数据覆盖到所需要填充数据的地方 }
效果：