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 相关文章推荐
PHP脚本数据库功能详解(下)
Oct 09 PHP
用PHP和ACCESS写聊天室(八)
Oct 09 PHP
php ftp文件上传函数(基础版)
Jun 03 PHP
基于PHP Socket配置以及实例的详细介绍
Jun 13 PHP
php下拉选项的批量操作的实现代码
Oct 14 PHP
PHP遍历目录并返回统计目录大小
Jun 09 PHP
PHP正则验证Email的方法
Jun 15 PHP
5款适合PHP使用的HTML编辑器推荐
Jul 03 PHP
php语言中使用json的技巧及json的实现代码详解
Oct 27 PHP
php函数mkdir实现递归创建层级目录
Oct 27 PHP
Yii2框架数据验证操作实例详解
May 02 PHP
关于PHP中interface的用处详解
Jul 26 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
基于php 随机数的深入理解
2013/06/05 PHP
基于php中使用excel的简单介绍
2013/08/02 PHP
PDO的安全处理与事物处理方法
2016/10/31 PHP
Laravel框架实现多个视图共享相同数据的方法详解
2019/07/09 PHP
在第一个input框内输入内容.textarea自动得到第一个文件框的值的javascript代码
2007/04/20 Javascript
jquery解决图片路径不存在执行替换路径
2013/02/06 Javascript
面向对象继承实例(a如何继承b问题)(自写)
2013/07/01 Javascript
JavaScript中reduce()方法的使用详解
2015/06/09 Javascript
详细分析使用AngularJS编程中提交表单的方式
2015/06/19 Javascript
原生js的数组除重复简单实例
2016/05/24 Javascript
JS hashMap实例详解
2016/05/26 Javascript
简单的JS轮播图代码
2016/07/18 Javascript
jquery仿苹果的时间/日期选择效果
2017/03/08 Javascript
详解windows下vue-cli及webpack 构建网站(二)导入bootstrap样式
2017/06/17 Javascript
ES6新特性:使用export和import实现模块化详解
2017/07/31 Javascript
通过jquery获取上传文件名称、类型和大小的实现代码
2018/04/19 jQuery
vue地区选择组件教程详解
2018/05/04 Javascript
layui-laydate时间日历控件使用方法详解
2018/11/15 Javascript
Vue 中可以定义组件模版的几种方式
2019/08/06 Javascript
Layer.js实现表格溢出内容省略号显示,悬停显示全部的方法
2019/09/16 Javascript
JS数组方法push()、pop()用法实例分析
2020/01/18 Javascript
JavaScript中跨域问题的深入理解
2021/03/04 Javascript
Python中__new__与__init__方法的区别详解
2015/05/04 Python
Python随机读取文件实现实例
2017/05/25 Python
带你了解python装饰器
2017/06/15 Python
python manage.py runserver流程解析
2019/11/08 Python
Pycharm快捷键配置详细整理
2020/10/13 Python
前端面试必备之CSS3的新特性
2017/09/05 HTML / CSS
Hotels.com加拿大:领先的在线住宿网站
2018/10/05 全球购物
介绍一下SQL注入攻击的种类和防范手段
2012/02/18 面试题
实习自我鉴定范文
2013/10/30 职场文书
高中毕业生个人自我鉴定
2013/11/24 职场文书
科技活动周标语
2014/10/08 职场文书
奖励通知
2015/04/22 职场文书
职工食堂管理制度
2015/08/06 职场文书
2016年“我们的节日·重阳节”主题活动总结
2016/04/01 职场文书