tp5 分页之无刷新页面渲染

正常情况下，tp5分页渲染出来的页面，切换页码也会切换（刷新）页面，现记录无刷新页面渲染方式：

控制器代码示例：

public function aaOp(){
	$rslist = model('article')->order('tid desc')->paginate(10);	//分页
	$pagehtml = $rslist->render();
	$this->assign('pagehtml', $pagehtml);
	$this->assign('rslist', $rslist);
	if(request()->isAjax()){
		return $this->fetch('cc');
	}else{
		return $this->fetch('aa');
	}
} 

aa.html

<blockquote class="layui-elem-quote">文章管理 <a class="layui-btn layui-btn-normal" href="{:url('add')}" style="margin-left:2rem;">+ 添加文章</a> </blockquote>
<div class="layui-form" id="list">
	<!-- 表格开始 -->
	<table class="layui-table">
	  <thead>
		<tr>
			<th>编号</th>
			<th>分类</th>
			<th>分类编号</th>
			<th>标题</th>
			<th>作者</th>
			<th>点击数</th>
			<th>推荐</th>
			<th>更新时间</th>
			<th>状态</th>
			<th>操作</th>
		</tr> 
	  </thead>
	  <tbody>
		{volist name="rslist" id="row"}
			<tr>
				<td>{$row.tid}</td>
				<td>{$row.category.categoryname}</td>
				<td>{$row.categoryid}</td>
				<td>{$row.title}</td>
				<td>{$row.author}</td>
				<td>{$row.hits}</td>
				<td>{:get_status($row.elite,'elite')}</td>
				<td>{$row.postdate|date='Y-m-d H:i:s',###}</td>
				<td>{:get_status($row.status)}</td>
				<td class="dteach">
					<a href="{:url('edit',['tid' => $row.tid])}" class="layui-btn layui-btn-normal layui-btn-xs">
						编辑</a>
					<a href="#" class="layui-btn delete layui-btn-normal layui-btn-xs" target="">
						删除
						<input type="hidden" class="deletes" name="" value="{$row.tid}">
						<input type="hidden" class="url" name="" value="{:url('delete')}">
					</a>
				</td>
			</tr>
		{/volist}
	  </tbody>
	</table>
	<div class="page">{$pagehtml}</div>
	<!-- 表格结束 -->
</div>
<div class="nexts">文章列表</div>
<script src="__JS__/delete.js"></script>
<script>
	$(function () {
		//给id为list的元素代理绑定下面所有的a元素"click"事件
		$("#list").on("click", ".pagination a", function () {
			//取a标签的href即url发送ajax请求
			$.get($(this).attr('href'), function (html) {
				//返回数据输出到id为list的元素中
				$('#list').html('');
				$('#list').html(html);
			});
			return false;//阻止默认事件和冒泡，即禁止跳转
		})
	})
</script>

 

cc.html

{__NOLAYOUT__}
<table class="layui-table">
	<thead>
	<tr>
		<th>编号</th>
		<th>分类</th>
		<th>分类编号</th>
		<th>标题</th>
		<th>作者</th>
		<th>点击数</th>
		<th>推荐</th>
		<th>更新时间</th>
		<th>状态</th>
		<th>操作</th>
	</tr> 
	</thead>
	<tbody>
	{volist name="rslist" id="row"}
		<tr>
			<td>{$row.tid}</td>
			<td>{$row.category.categoryname}</td>
			<td>{$row.categoryid}</td>
			<td>{$row.title}</td>
			<td>{$row.author}</td>
			<td>{$row.hits}</td>
			<td>{:get_status($row.elite,'elite')}</td>
			<td>{$row.postdate|date='Y-m-d H:i:s',###}</td>
			<td>{:get_status($row.status)}</td>
			<td class="dteach">
				<a href="{:url('edit',['tid' => $row.tid])}" class="layui-btn layui-btn-normal layui-btn-xs">
					编辑</a>
				<a href="#" class="layui-btn delete layui-btn-normal layui-btn-xs" target="">
					删除
					<input type="hidden" class="deletes" name="" value="{$row.tid}">
					<input type="hidden" class="url" name="" value="{:url('delete')}">
				</a>
			</td>
		</tr>
	{/volist}
	</tbody>
</table>
<div class="page">{$pagehtml}</div>