ThinkPHP5.1+Ajax实现的无刷新分页功能示例

本文实例讲述了thinkphp5.1+ajax实现的无刷新分页功能。分享给大家供大家参考，具体如下：

无刷新分页可以减轻服务器负担，利用ajax技术，请求部分信息，提高网站访问速度，是网站建设的必备技术。

需要在后台展示自定义属性列表（lst.html），其中的列表部分摘出来，放到（paginate1.html）中：

<div class="row">  <div class="col-sm-12">    <div class="ibox float-e-margins">      <div class="ibox-content">          <table class="table table-bordered">            <thead>              <tr>                <th>id</th>                <th>名称</th>                <th>取值</th>                <th&g中国经典电影推荐t;显示</th>                <th>排序</th>                <th>操作</th>              </tr>            &一名大学毕业生的反思lt;/thead>            <tbody>              {volist name="lf" id="vo"}              <tr>                <td>{$vo.id}</td>                <td>{$vo.name}</td>                <td>{$vo.value}</td>                <td>                  {if $vo.isshow==1}                  <button type="button" class="btn btn-success btn-sm">是</button>                  {el/}                  <button type="button" class="btn btn-danger btn-sm">否</button>                  {/if}                </td>                <td><input type="text" value="{$vo.order}" name=""></td>                <td>                  <div class="btn-group open">                    <button data-toggle="dropdown" class="bt格莱美直播n btn-primary dropdown-toggle" aria-expanded="true">操作 <span class="caret"></span>                    </button>                    <ul class="dropdown-menu">                      <li><a href="">修改</a>                      </li>                      <li><a href="">删除</a>                      </li>                    </ul>                  </div>                </td>              </tr>              {/volist}            </tbody>          </table>        {$lf|raw}        <div class="row">          <div class="col-sm-2">            <button class="btn btn-success" type="button" id="changeorder">              <i class="fa fa-plus-square"></i>&nbsp;&nbsp;              <span class="bold">排序</span>            </button>          </div>        </div>      </div>    </div>  </div></div>

其中lf是服务器端传递过来的自定义属性，并进行了分页操作：

$lfattribute_lect = db("lfattribute")->paginate(5);$this->assign("lf",$lfattribute_lect);

因为lst.html把列表摘了出来，所以还要在引入回去，才能使页面完整，同时，为了方便进行jquery操作，把列表用带id的div包裹起来：

<div id="paginate">    {include file="lfattribute/paginate1"}</div>

thinkphp5.1带的分页类使用的是bootstrap样式，它在页面显示时实际会有一个pagination的类，查看源代码如下：

<ul class="pagination">  <li class="disabled">    <span>&laquo;</span></li>  <li class="active">    <span>1</span></li>  <li>    <a href="/xkershouche/public/admin/lfattribute/lst.html?page=2" rel="external nofollow" rel="external nofollow" >2</a></li>  <li>    <a href="/xkershouche/public/admin/lfattribute/lst.html?page=3" rel="external nofollow" >3</a>&三一口语lt;/li>  <li>    <a href="/xkershouche/public/admin/lfattribute/lst.html?page=4" rel="external nofollow" >4</a></li>  <li>    <a href="/xkershouche/public/admin/lfattribute/lst.html?page=5" rel="external nofollow" >5</a></li>  <li>    <a href="/xkershouche/public/admin/lfattribute/lst.html?page=6" rel="exte耳鸣是什么原因引起的怎么治疗rnal nofollow" >6</a></li>  <li>    <a href="/xkershouche/public/admin/lfattribute/lst.html?page=2" rel="external nofollow" rel="external nofollow" >&raquo;</a></li></ul>

这就是好多人搞不懂的pagination是怎么来的。

然后开始写js代码，因为我们的分页按钮也在被请求的页面当中，属于“未来”的元素，所以这里我们要用on方法，这个方法是jquery1.7以后的方法，注意自己的jquery版本。

<script type="text/javascript">  $(document).on('click', '.pagination a', function(event) {    var url = $(this).attr('href');    $.ajax({      url: url,      type: 'get',    })    .done(function(data) {      $("#paginate").html(data);    })    return fal;  });  </script>

其中.done()方法和success方法是一样的，return fal是为了阻止默认事件，防止直接跳转。

那么服务器端就可以根据情况渲染模板了，代码如下：

public function lst()  {    $lfattribute_lect = db("lfattribute")->paginate(5);    $this->assign("lf",$lfattribute_lect);    if (request()->isajax()) {      return view("paginate1");    } el {      return view();    }  }