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

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

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

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

?

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58

< 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 >&nbsp;&nbsp;                < span class = "bold" >排序</ span >              </ button >            </ div >          </ div >        </ div >      </ div >    </ div > </ div >

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

?

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

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

?

1 2 3

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

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

?

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18

< ul class = "pagination" >    < li class = "disabled" >      < span >&laquo;</ span ></ li >    < li class = "active" >      < span >1</ span ></ li >    < li >      < a href = "/xkershouche/public/admin/selfattribute/lst.html?page=2" rel = "external nofollow" rel = "external nofollow" >2</ a ></ li >    < li >      < a href = "/xkershouche/public/admin/selfattribute/lst.html?page=3" rel = "external nofollow" >3</ a ></ li >    < li >      < a href = "/xkershouche/public/admin/selfattribute/lst.html?page=4" rel = "external nofollow" >4</ a ></ li >    < li >      < a href = "/xkershouche/public/admin/selfattribute/lst.html?page=5" rel = "external nofollow" >5</ a ></ li >    < li >      < a href = "/xkershouche/public/admin/selfattribute/lst.html?page=6" rel = "external nofollow" >6</ a ></ li >    < li >      < a href = "/xkershouche/public/admin/selfattribute/lst.html?page=2" rel = "external nofollow" rel = "external nofollow" >&raquo;</ a ></ li > </ ul >

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

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

?

1 2 3 4 5 6 7 8 9 10 11 12 13

<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 false ;    });    </script>

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

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

?

1 2 3 4 5 6 7 8 9 10

public function lst()    {      $selfattribute_select = db( "selfattribute" )->paginate(5);      $this ->assign( "self" , $selfattribute_select );      if (request()->isAjax()) {        return view( "paginate1" );      } else {        return view();      }    }

希望本文所述对大家基于ThinkPHP框架的PHP程序设计有所帮助。

原文链接：https://blog.csdn.net/pan_yuyuan/article/details/81947057