tp5做无刷新分页

thinkPHP5无刷新分页

1. php控制器判断是否为ajax请求

//分页变量
$page=$articles->render();
$this->assign('page',$page);
//文章变量
$this->assign('articles', $articles);
//判断ajax请求，渲染到不同模板
if(request()->isAjax()){
    //return $articles;
    //如果是ajax请求，则渲染到该页面
    return $this->fetch('articleList');
}
else {
    //否则到该页面
    return $this->fetch('articleIndex');
}

2. 负责ajax请求渲染的模板

<!-- START TABLE -->
<div class="simplebox grid740">

    <div class="titleh">
        <h3>博文列表</h3>
    </div>

    <table id="myTable" class="tablesorter">
        <thead>
        <tr>
            <th>#ID</th>
            <th>作者</th>
            <th>分类</th>
            <th>标题</th>
            <th>发布日期</th>
            <th>评论数量</th>
            <th>状态</th>
            <th>操作</th>
        </tr>
        </thead>
        <tbody>

        {volist name='articles' id='article' key="k"}
        <tr>
            <td>{$k}</td>
            <td>作者</td>
            <td>{$article.c_name}</td>
            <td>{$article.name}</td>
            <td>{$article.publishtime|date="y-m-d",###}</td>
            <td>{$article.id|count}</td>
            <td>{$article.status}</td>
            <td>
                <form action="\article\{$article.id}\edit" name="edit">
                    <button>编辑</button>
                </form>
                <form action="\article\{$article.id}" name="delete" method="post">
                    <button onclick="return confirm('是否确定删除文章:{$article.c_name}?');">删除</button>
                    <input type="hidden" name="_method" value="DELETE">
                </form>
            </td>
        </tr>
        {/volist}
        </tbody>
    </table>
    {$page}
</div>
<!-- END TABLE -->

3. 正式访问页面执行ajax请求

{literal}
<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(html);
            });
            //阻止默认事件和冒泡，即禁止跳转
            return false;
        })
    })
</script>
{/literal}
<div id="list">
    <!-- START TABLE -->
    <div class="simplebox grid740">

        <div class="titleh">