tp5无刷新分页

控制器

<?php
namespace app\index\controller;

use think\Db;

class Index
{
public function index()
{
return '<style type="text/css">*{ padding: 0; margin: 0; } .think_default_text{ padding: 4px 48px;} a{color:#2E5CD5;cursor: pointer;text-decoration: none} a:hover{text-decoration:underline; } body{ background: #fff; font-family: "Century Gothic","Microsoft yahei"; color: #333;font-size:18px} h1{ font-size: 100px; font-weight: normal; margin-bottom: 12px; } p{ line-height: 1.6em; font-size: 42px }</style><div style="padding: 24px 48px;"> <h1>:)</h1><p> ThinkPHP V5<br/><span style="font-size:30px">十年磨一剑 - 为API开发设计的高性能框架</span></p><span style="font-size:22px;">[ V5.0 版本由 <a href="http://www.qiniu.com" target="qiniu">七牛云</a> 独家赞助发布 ]</span></div><script type="text/javascript" src="https://tajs.qq.com/stats?sId=9347272" charset="UTF-8"></script><script type="text/javascript" src="https://e.topthink.com/Public/static/client.js"></script><think id="ad_bd568ce7058a1091"></think>';
}

public function userlist()
{
$list=Db::name('users')->paginate(10,false,
[
'type' => 'Bootstrap',
'var_page' => 'page',
//使用jqery 无刷新分页
'path'=>'javascript:AjaxPage([PAGE]);'
]);
return view('index/userlist',['list'=>$list]);
}


public function ajaxList(){
$page = request()->param('apage');
if (!empty($page)) {
$rel = Db::name('users')->paginate(10,false,[
'type' => 'Bootstrap',
'var_page' => 'page',
'page' => $page,
'path'=>'javascript:AjaxPage([PAGE]);',

]);
$page = $rel->render();
$list=$rel->items();
}
return json(['list'=>$list,'page'=>$page]);
}

}

html+js部分

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<script src="https://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
</head>
<body>
<table>
<thead>
<tr>
<th>ID</th>
<th>姓名</th>
<th>密码</th>
</tr>
</thead>
<tbody id="mylist">
{volist name='list' id='user'}
<tr>
<td>{$user.id}</td>
<td>{$user.name}</td>
<td>{$user.password}</td>
</tr>
{/volist}
</tbody>
<div id="result">
{$list->render()}
</div>

</table>
</body>
</html>
<script type="text/javascript" src="/static/js/jquery.min.js"></script>
<script>
var AjaxPage = function(page){
$.ajax({
url:'/index/index/ajaxList',
type:'post',
dataType:'json',
data: {apage:page},
success:function(data){
$("#result").html(data.page);
$('#mylist').empty();
$obj='';
for (var i=0;i<data.list.length;i++)
{
$obj=$obj+'<tr><td>'+data.list[i].id+'</td><td>'+data.list[i].name+'</td><td>'+data.list[i].password+'</td></tr>';
}
$('#mylist').append($obj);

}
});
}

</script>

猜你喜欢

转载自www.cnblogs.com/oy123/p/9487590.html