Ajax分页

浏览:2282 发布日期:2017/12/24 分类:系统代码 关键字: Ajax Thinkphp thinkphp tp5 tp
ThinkPHP5实现ajax分页
ThinkPHP5.0使用Ajax实现无刷新分页(免费开源)
1.想要页面变得美观就用Bootstrap,至于怎么导入不详细说明,官网起步有介绍

2.在Index控制器下:

代码看不到我复制:
<?php
namespace app\index\controller;
use think\Controller;
use think\Request;
class Index extends Controller{
public function index(){
$articles = db('tp_article')->order('id asc')->paginate(3);
$show = $articles->render();
$show = preg_replace("(<a[^>]*page[=|/](\d+).+?>(.+?)<\/a>)","<a href='javascript:ajax_page($1);'>$2</a>",$show);
$this->assign(array(
'articles'=>$articles,
'page'=>$show,
));
if(request()->isAjax()){
return $this->fetch('ajax_index');
}
return $this->fetch('index');
}
}
?>


3.在View/index/index.html下
Ajax-data类必须写

代码看不到就复制:
<div id="ajax-data">
{include file="index/ajax_index" }<!--view下index/ajax_index-->
</div>

4.使用ajax_index文件:要创建html
在View/index/ajax_index.html下


5.在ajax_index写入代码:

如果看不到就复制:
<table border="1" cellspacing="1" cellpadding="1" style="width: 500px;">
<tr>
<td>id</td>
<td>title</td>
<td>author</td>
</tr>
{volist name="articles" id="vo"}
<tr>
<td>{$vo.id}</td>
<td>{$vo.title}</td>
<td>{$vo.author}</td>
</tr>
{/volist}
</table>
{$page}<br>
<script>
function ajax_page(page){
$.ajax({
type:"POST",
data:$('#list-filter').serialize()+'&page='+page,
success:function(data,status){
$('#ajax-data').html(data);
}
});
}
</script>
评论( 相关
后面还有条评论,点击查看>>