thinkphp结合bootstrap打造个性化分页

分页功能是web开发中常见的一项功能,也存在很多形式,这里主要讲一下利用thinkPHP框架的page类来打造一款bootstrap风格的分页过程。

首先需要去thinkPHP官网现在其分页扩展类http://www.thinkphp.cn/extend/241.html,下载完成后,需要将其放在项目中的ThinkPHP/Extend/Library/ORG/Util/目录下,如果没有这个目录,需要自己进行创建,引入后代码结构如下:

如果直接按照官网的教程进行分页,那么出来的效果仅仅是显示一个简单的不带任何样式的连接加文字,这显然是不符合项目要求的。

这里介绍下如何制bootstrap风格的分页效果。由于该分页类输出分页的内容是div里面加连接的形式,而bootstrap采用的分页代码是nav下面ul+li+a的形式,所以需要修改分页类。

1.使用EditPlus(或其他带有行号显示的IDE)打开page.calss.php,需要修改如下地方:

 protected $config  =    array(‘header‘=>‘条记录‘,‘prev‘=>‘上一页‘,‘next‘=>‘下一页‘,‘first‘=>‘第一页‘,‘last‘=>‘最后一页‘,‘theme‘=>‘ <span style="font-size:18px; padding-top: 5px;
height: 30px;padding-left: 5px;display: inline-block;">%totalRow% %header% %nowPage%/%totalPage% 页</span> %upPage% %downPage% %first%  %prePage%  %linkPage%  %nextPage% %end%‘);

首先在34行,修改默认的theme如上,将输出的文字信息包裹在一个span中,并如上给其添加样式,这样做是由于默认输出的文字信息样式不符合要求,需要修改,这个操作可以通过setConfig方法来完成,但是不建议这样做,因为theme进行setCongfig代码量较大,每次在代码中调用显然很冗余,建议直接修改这个分页类;

2.

 if ($upRow>0){
            $upPage     =   " <li><a href=‘".str_replace(‘__PAGE__‘,$upRow,$url)."‘>".$this->config[‘prev‘]."</a></li>";
        }else{
            $upPage     =   ‘‘;
        }

        if ($downRow <= $this->totalPages){
            $downPage   =   "<li><a href=‘".str_replace(‘__PAGE__‘,$downRow,$url)."‘>".$this->config[‘next‘]."</a></li>";
        }else{
            $downPage   =   ‘‘;
        }
        // << < > >>
        if($nowCoolPage == 1){
            $theFirst   =   ‘‘;
            $prePage    =   ‘‘;
        }else{
            $preRow     =   $this->nowPage-$this->rollPage;
            $prePage    =   "<li><a href=‘".str_replace(‘__PAGE__‘,$preRow,$url)."‘ >上".$this->rollPage."页</a></li>";
            $theFirst   =   "<li><a href=‘".str_replace(‘__PAGE__‘,1,$url)."‘ >".$this->config[‘first‘]."</a></li>";
        }
        if($nowCoolPage == $this->coolPages){
            $nextPage   =   ‘‘;
            $theEnd     =   ‘‘;
        }else{
            $nextRow    =   $this->nowPage+$this->rollPage;
            $theEndRow  =   $this->totalPages;
            $nextPage   =   "<li><a href=‘".str_replace(‘__PAGE__‘,$nextRow,$url)."‘ >下".$this->rollPage."页</a></li>";
            $theEnd     =   "<li><a href=‘".str_replace(‘__PAGE__‘,$theEndRow,$url)."‘ >".$this->config[‘last‘]."</a></li>";
        }
        // 1 2 3 4 5
        $linkPage = "";
        for($i=1;$i<=$this->rollPage;$i++){
            $page       =   ($nowCoolPage-1)*$this->rollPage+$i;
            if($page!=$this->nowPage){
                if($page<=$this->totalPages){
                    $linkPage .= "&nbsp;<li><a href=‘".str_replace(‘__PAGE__‘,$page,$url)."‘>&nbsp;".$page."&nbsp;</a></li>";
                }else{
                    break;
                }
            }else{
                if($this->totalPages != 1){

                    $linkPage .= "<li class=‘active‘><a href=‘#‘>".$page."</a></li>";

从99行开始到141行结束,将所有输出的a标签按照如上方式更改,将每一个a标签都包裹在li中,便于客户端调用;

以上page类算是修改完成,接下来需要在页面中进行调用

页面调用前台代码为:

首先在页面中要引入bootstrap的css文件,

<link href="__APP__/bootstrap-3.2.0-dist/css/bootstrap.min.css" rel="stylesheet">

然后在模板中如下调用:

 <div class="table-responsive">
          <table class="table table-striped">
            <thead>
              <tr>
                <th></th>
                <th>用户名</th>
                <th>密码</th>
                <th>电话号码</th>
                <th>电子邮件</th>
                <th>所属园区ID</th>
                <th>可访问摄像头列表</th>
                <th>注册时间</th>
                <th>备注</th>
                <th></th>
                <th></th>
              </tr>
            </thead>
            <tbody id="tbuser">
       <volist name="list" id="vo">
          <tr>
          <td><input type="checkbox" name="udCheck"/></td>
          <td>{$vo.userName}</td>
          <td>{$vo.password}</td>
          <td>{$vo.phoneNum}</td>
          <td>{$vo.email}</td>
          <td>{$vo.deptId}</td>
          <td>{$vo.accessCamera}</td>
          <td>{$vo.registerTime}</td>
          <td>{$vo.memo}</td>
          <td><a href=‘#‘  onclick="deleteUser(‘{$vo.userName}‘,this);" class="btn btn-danger btn-sm">删除</a></td>
         <td><a href=‘/yunmu/Index/edit/id/{$vo.userName}‘ class="btn btn-primary btn-sm" >编辑</a></td>
        </volist>

            </tbody>
          </table>
        <nav style="text-align:center;" >
           <ul class="pagination">

          {$page}
           </ul>
      </nav>

        </div>

注意这里设置nav的样式是为了让其居中显示,pagination是bootstrap中自带的一个分页的css class,{$page}是后台传递给模板的输出的内容,

以上是前台代码的调用,后台PHP代码需要在显示的地方添加如下代码:

            import(‘ORG.Util.Page‘);// 导入分页类
            $count= $User->where($condition)->count();// 查询满足要求的总记录数
            $Page=new Page($count,10);// 实例化分页类 传入总记录数,每页显示10条记录
            $show=$Page->show();// 分页显示输出
            $list = $User->where($condition)->order(‘userName‘)->limit($Page->firstRow.‘,‘.$Page->listRows)->select();
            $this->assign(‘list‘,$list);// 赋值数据集
            $this->assign(‘page‘,$show);// 赋值分页输出
            $this->display(); // 输出模板

其中$condition是你自定义的查询条件,$Page=new Page($count,10)表示实例化分页类并且一页显示10行数据,然后调用其show方法返回输出内容,再将其
传递给前台模板。

以上步骤完成之后,这个分页功能已经基本完成,效果如下:

以上采用其框架分页类的方式仅适合于表单提交查询(即页面整体跳转刷新)的分页,因为它对分页数据的控制是通过在URL尾部添加参数如p=1这种方式来实现的,所以实际上每次查询数据的分页你都得保证它能够获取完整的查询参数,否则可能点击第二页或者下一页的时候查询出来的结果就不是之前的结果了。建议将所有查询修改为采用get表单提交的方式。对于逻辑较为复杂或者需要采用ajax分页的场景,这个分页类并不能满足,需要自己去完成完整的前后台分页代码。

时间: 2024-10-11 11:18:25

thinkphp结合bootstrap打造个性化分页的相关文章

thinkphp+mysql+bootstrap

#thinkphp+mysql+bootstrapthinkphp3.2.3,bootstrap V3一个简易的企业cms网站系统,只要将clients的host改为对应的域名即可.thinkphp.sql数据表的结构mysql初始数据账号root,密码888888步骤:1.下载2.建立数据库thinkphp,将thinkphp.sql导入3.配置config.php数据库账号密码4.解析域名,然后将clients表host改为对应的域名5.成功 github地址:https://github.

年末最代码部分源码大出血分享-freemarker,bootstrap,springdata jpa分页代码

原文:年末最代码部分源码大出血分享-freemarker,bootstrap,springdata jpa分页代码 源代码下载地址:http://www.zuidaima.com/share/1606851189656576.htm 项目截图: eclipse jee Deployment Assembly设置截图: eclipse java build path设置截图: eclipse java compile设置截图: eclipse jee project facets设置截图: ecl

IT人如何打造个性化的个人网站(在线简历)

前言 众所周知,IT行业人员在求职时,如果拥有自己的技术博客和个人网站多少是可以加些分的,因为这也是IT人的技术证明之一.内容丰富的技术博客就不必多少了,往往技术博客大神市场上多是供不应求的,而且技术博客出彩主要是在内容经营上,至于博客本身直接到各大技术平台注册一个即可,当然有兴趣的朋友想要自建个人博客也不是很难,比如可以用非常流行的GitHub Pages进行搭建,最主要是可以免费.而个人网站是主要是用来展示信息,功能比博客系统要简单的多,搭建过程比博客系统也要容易的多,而且对运行环境的要求也

bootstrap table 服务器端分页--ashx+ajax

1.准备静态页面 1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 5 <title></title> 6 <meta charset="utf-8" /> 7 <link rel="

php+bootstrap+dataTable+jquery分页列表

<!DOCTYPE HTML> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <script src="jquery-1.8.3.min.js" type="text/javascript"></script> <script&g

Bootstrap系列 -- 44. 分页导航

带页码的分页导航,可能是最常见的一种分页导航,特别是在列表页内容超多的时候,会给用户提供分页的导航方式.平时很多同学喜欢用div>a和div>span结构来制作带页码的分页导航.不过,在Bootstrap框架中使用的是ul>li>a这样的结构,在ul标签上加入pagination方法. <ul class="pagination"> <li><a href="#">«</a></li>

PageHelper+Bootstrap Paginator实现分页效果

最近需要做一个分页,找了挺多的前端分页效果,发现Bootstrap Paginator分页插件效果不错,而我页面也是用BootStrap做的响应式页面,就做了实现一个简单的分页效果. PageHelper地址:https://github.com/pagehelper/Mybatis-PageHelper Bootstrap Paginator:https://github.com/lyonlai/bootstrap-paginator 在SpringBoot+Mybatis做分页 1.首先添加

Bootstrap+angularjs+MVC3+分页技术+角色权限验证系统

页面使用代码: <script src="@Url.Content("~/Content/Bootstrap/js/bootstrap.min.js")"></script> < link href="@Url.Content("~/Content/Bootstrap/css/bootstrap.min.css")" rel="stylesheet" media="s

ThinkPHP框架中关于查询分页显示的一个小方法

thinkphp框架是一个非常好用的框架.在日常使用中非常方便,其中包含了有分页的方法,我们用的时候往往会自定义的进行一些修改,下面是我自己修改的一个关于分页的小方法. 代码如下: function getPages($comModel,$where="",$order="",$pageSize="",$join="",$field="",$tmp="",$group="&qu