tp5做无刷新分页

来源：互联网发布：共有计价软件下载编辑：程序博客网时间：2024/05/16 17:24

thinkPHP5无刷新分页

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');}

负责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 -->

正式访问页面执行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">

阅读全文

0 0