当前位置: 首页 > 编程笔记 >

Thinkphp和Bootstrap结合打造个性的分页样式(推荐)

晏富
2023-03-14
本文向大家介绍Thinkphp和Bootstrap结合打造个性的分页样式(推荐),包括了Thinkphp和Bootstrap结合打造个性的分页样式(推荐)的使用技巧和注意事项,需要的朋友参考一下

先吐槽一下ThinkPHP3.1版的分页样式,虽然看起来也很简单大方,但是所有的页码全是使用简单的数字,之间的空隙比较小,不大容易点,还有那个“前5页”和“后5页”显得有点多余,因为点击当前显示第一页的“上一页”按钮会自然出来前5页。

3.1的分页效果是这个样子滴:

针对以上种种不太理想的情况,又加上最近学习了ThinkPHP5,在ThinkPHP5中提供了对BootStrap分页样式的完美支持,在thinkphp5中只要引入了BootStrap.css文件,在使用Controller中使用分页函数后,前台自然就会按照BootStrap的样式来显示,效果是这个样子滴:

而我开发顶求网的时候ThinkPHP5还没出来,使用的是3.1版本,那么在3.1版中如何才能使用BootStrap的分页组件呢?以下是解决办法

1.派生thinkphp的原生page.class.php类

为了不影响核心文件(违反设计模式种的对修改封闭原则),我派生了一个子类ListPage,该子类代码如下:

import('ORG.Util.Page');// 导入分页类
 class ListPage extends Page
 {//针对本系统User控制器特点重写Page类中相关函数
 /**
   * 分页显示输出
   * @access public
   */
  protected $config = array('header'=>'条记录','prev'=>'<','next'=>'>',
  'first'=>'<<','last'=>'>>',
  'theme'=>'%first% %upPage% %linkPage% %downPage% %end%');
  ……

可以看到,首先导入核心类所处的文件,然后就可以大胆的派生了,而这里只列出了核心代码。我们只需要修改page类中的Config变量就可以了,在子类中重写该变量为上面的形式,然后再所有Action(Controller)中使用该子类来建立分页对象即:

$Page=new ListPage($count,5);

这样就可以使用我们上面的设置了,好了,搞定,新的分页显示效果如下:

以上所述是小编给大家介绍的Thinkphp和Bootstrap结合打造个性的分页样式(推荐),希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对小牛知识库网站的支持!

 类似资料:
  • 本文向大家介绍ASP.NET GridView的Bootstrap分页样式,包括了ASP.NET GridView的Bootstrap分页样式的使用技巧和注意事项,需要的朋友参考一下 本文实例为大家分享了GridView的Bootstrap分页样式,供大家参考,具体内容如下 Revenue.cs收入类,包括实体模型和业务逻辑 Default.aspx内容: 后台代码: country_revenu

  • 本文向大家介绍Django自定义分页与bootstrap分页结合,包括了Django自定义分页与bootstrap分页结合的使用技巧和注意事项,需要的朋友参考一下 django中有自带的分页模块Paginator,想Paginator提供对象的列表,就可以提供每一页上对象的方法。 这里的话不讲解Paginator,而是自定义一个分页类来完成需求: 利用bootstrap的css,生成好看的html

  • 本文向大家介绍mvc 、bootstrap 结合分布式图简单实现分页,包括了mvc 、bootstrap 结合分布式图简单实现分页的使用技巧和注意事项,需要的朋友参考一下 分页采用laypage使用起来比较简单但是功能很齐全,数据库访问使用petapoco,bootstrap用的是flatlab模版,采用mvc的repository模式。 先来一张效果图; 下面来看具体实现; Controller

  • 本文向大家介绍Bootstrap Img 图片样式(推荐),包括了Bootstrap Img 图片样式(推荐)的使用技巧和注意事项,需要的朋友参考一下  Bootstrap提供了四种用于<img>类的样式,分别是: .img-rounded:圆角 (IE8 不支持),添加 border-radius:6px 来获得图片圆角; .img-circle:圆形 (IE8 不支持),添加 border-r

  • 本文向大家介绍Bootstrap的class样式小结,包括了Bootstrap的class样式小结的使用技巧和注意事项,需要的朋友参考一下 基础class .code来显示单行内联代码 .pre来显示多行块代码 .kbd来显示用户输入代码 .pre-scrollable高度超出340px,就会在Y轴出现滚动条 表格class .table基础表格margin-bottom:20px,在thead底

  • 本文向大家介绍BootStrap mvcpager分页样式(get请求,刷新页面),包括了BootStrap mvcpager分页样式(get请求,刷新页面)的使用技巧和注意事项,需要的朋友参考一下 使用方法: 先把mvcpager.dll引用加入mvc项目中。 前台代码 前台: 后台代码 样式更改:class为pager或pagination 如图: 样式文件: 以上所述是小编给大家介绍的Boo