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>显示</th>                <th>排序</th>                <th>操作</th>              </tr>            </thead>            <tbody>              {volist name="self" 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>                  {else/}                  <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="btn 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>        {$self|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>                <span class="bold">排序</span>            </button>          </div>        </div>      </div>    </div>  </div></div>

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

$selfattribute_select = db("selfattribute")->paginate(5);$this->assign("self",$selfattribute_select);

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