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


Posted in PHP onFebruary 10, 2020

本文实例讲述了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包裹起来:

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

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

<ul class="pagination">
  <li class="disabled">
    <span>«</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" >»</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 false;
  });
  </script>

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

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

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程序设计有所帮助。

PHP 相关文章推荐
我的论坛源代码(二)
Oct 09 PHP
基于mysql的论坛(5)
Oct 09 PHP
PHP 文件上传进度条的两种实现方法的代码
Nov 25 PHP
php 运行效率总结(提示程序速度)
Nov 26 PHP
PHP的一个基础知识 表单提交
Jul 04 PHP
基于php split()函数的用法详解
Jun 05 PHP
ThinkPHP模板中数组循环实例
Oct 30 PHP
php短网址和数字之间相互转换的方法
Mar 13 PHP
PHP cURL初始化和执行方法入门级代码
May 28 PHP
PHP模板引擎Smarty内建函数section,sectionelse用法详解
Apr 11 PHP
弹出模态框modal的实现方法及实例
Sep 19 PHP
PHP标准库(PHP SPL)详解
Mar 16 PHP
ThinkPHP5&amp;5.1实现验证码的生成、使用及点击刷新功能示例
Feb 07 #PHP
Thinkphp框架+Layui实现图片/文件上传功能分析
Feb 07 #PHP
PHP查找一列有序数组是否包含某值的方法
Feb 07 #PHP
php测试kafka项目示例
Feb 06 #PHP
PHP图像处理 imagestring添加图片水印与文字水印操作示例
Feb 06 #PHP
PHP实现常用排序算法的方法
Feb 05 #PHP
PHP ElasticSearch做搜索实例讲解
Feb 05 #PHP
You might like
蝙蝠侠:侠影之谜
2020/03/04 欧美动漫
PHP中路径问题的解决方案
2006/10/09 PHP
PHP查询网站的PR值
2013/10/30 PHP
php上传图片并压缩的实现方法
2015/12/22 PHP
基于jquery的inputlimiter 实现字数限制功能
2010/05/30 Javascript
jQuery中调用WebService方法小结
2011/03/28 Javascript
Nodejs实现多人同时在线移动鼠标的小游戏分享
2014/12/06 NodeJs
Javascript 拖拽的一些简单的应用(逐行分析代码,让你轻松了拖拽的原理)
2015/01/23 Javascript
jq实现左侧显示图片右侧文字滑动切换效果
2015/08/04 Javascript
angularJS 如何读写缓冲的方法(推荐)
2016/08/06 Javascript
微信小程序 实例应用(记账)详解
2016/09/28 Javascript
webpack构建的详细流程探底
2018/01/08 Javascript
JS实现图片旋转动画效果封装与使用示例
2018/07/09 Javascript
深入理解react-router 路由的实现原理
2018/09/26 Javascript
layui 中select下拉change事件失效的解决方法
2019/09/20 Javascript
vue2.0+SVG实现音乐播放圆形进度条组件
2019/09/21 Javascript
Node.js 实现抢票小工具 &amp; 短信通知提醒功能
2019/10/22 Javascript
使用 JavaScript 创建并下载文件(模拟点击)
2019/10/25 Javascript
Bootstrap实现前端登录页面带验证码功能完整示例
2020/03/26 Javascript
Python使用MySQLdb for Python操作数据库教程
2014/10/11 Python
Python实现微信公众平台自定义菜单实例
2015/03/20 Python
Python实现Sqlite将字段当做索引进行查询的方法
2016/07/21 Python
Python list列表中删除多个重复元素操作示例
2019/02/27 Python
Python 监测文件是否更新的方法
2019/06/10 Python
django 微信网页授权登陆的实现
2019/07/30 Python
django echarts饼图数据动态加载的实例
2019/08/12 Python
python 给图像添加透明度(alpha通道)
2020/04/09 Python
Python如何脚本过滤文件中的注释
2020/05/27 Python
两道JAVA笔试题
2016/09/14 面试题
司法建议书范文
2014/05/13 职场文书
群众路线教育实践活动心得体会(四风)
2014/11/03 职场文书
2014年依法行政工作总结
2014/11/19 职场文书
大学生就业意向书
2015/05/11 职场文书
当幸福来敲门观后感
2015/06/01 职场文书
2015年中学总务处工作总结
2015/07/22 职场文书
看看如何用Python绘制小米新版天价logo
2021/04/20 Python