Bootstrap php制作动态分页标签


Posted in Javascript onDecember 23, 2016

学习了下bootstrap,刚好在用分页,就自己写了一个分页,然后结合bootstrap样式展现。

bootstrap的分页格式:

<ul class="pagination">
  <li><a href="#">«</a></li>
  <li class="active"><a href="#">1</a></li>
  <li><a href="#">2</a></li>
  <li><a href="#">3</a></li>
  <li><a href="#">4</a></li>
  <li><a href="#">5</a></li>
  <li><a href="#">»</a></li>
</ul>

PHP动态分页过程;

/**
 * @param $maxpage 总页数
 * @param $page  当前页
 * @param string $para 翻页参数(不需要写$page),$para参数就应该设为'&id=1'
 * @return string 返回的输出分页html内容
 */
function multipage($maxpage, $page, $para = '') {
  $multipage = ''; //输出的分页内容
  $listnum = 5;   //同时显示的最多可点击页面

  if ($maxpage < 2) {
    return '';
  }else{
    $offset = 2;
    if ($maxpage <= $listnum) {
      $from = 1;
      $to = $maxpage;
    } else {
      $from = $page - $offset; //起始页
      $to = $from + $listnum - 1; //终止页
      if($from < 1) {
        $to = $page + 1 - $from;
        $from = 1;
        if($to - $from < $listnum) {
          $to = $listnum;
        }
      } elseif($to > $maxpage) {
        $from = $maxpage - $listnum + 1;
        $to = $maxpage;
      }
    }

    $multipage .= ($page - $offset > 1 && $maxpage >= $page ? '<li><a href="?page=1'.$para.'" >1...</a></li>' : '').
      ($page > 1 ? '<li><a href="?page='.($page - 1).$para.'" >«</a></li>' : '');

    for($i = $from; $i <= $to; $i++) {
      $multipage .= $i == $page ? '<li class="active"><a href="?page='.$i.$para.'" >'.$i.'</a></li>' :
   '<li><a href="?page='.$i.$para.'" >'.$i.'</a></li>';
    }

    $multipage .= ($page < $maxpage ? '<li><a href="?page='.($page + 1).$para.'" >»</a></li>' : '').
      ($to < $maxpage ? '<li><a href="?page='.$maxpage.$para.'" class="last" >...'.$maxpage.'</a></li>' : '');
    $multipage .= ' <li><a href="#" ><input type="text" size="3" onkeydown="if(event.keyCode==13) 
    {self.window.location=\'?page=\'+this.value+\''.$para.'\'; return false;}" ></a></li>';


    $multipage = $multipage ? '<ul class="pagination">'.$multipage.'</ul>' : '';
  }

  return $multipage;
}

输出分页结果,如$multipage = multipage(20,1);便可得到如下所示的分页标签了:

Bootstrap php制作动态分页标签

有个不完善的地方就是最后的页码自选择框的大小与bootstrap的分页框大小不一致,有点影响美观了。

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
syntaxhighlighter 使用方法
Jul 02 Javascript
JS setCapture 区域外事件捕捉
Mar 18 Javascript
js中document.getElementByid、document.all和document.layers区分介绍
Dec 08 Javascript
纯js实现手风琴效果代码
Apr 17 Javascript
javascript 内置对象及常见API详细介绍
Nov 01 Javascript
JavaScript中的 attribute 和 jQuery中的 attr 方法浅析
Jan 04 Javascript
最常用的jQuery表单验证(简单)
May 23 jQuery
vue的常用组件操作方法应用分析
Apr 13 Javascript
vue项目实现表单登录页保存账号和密码到cookie功能
Aug 31 Javascript
总结javascript三元运算符知识点
Sep 28 Javascript
javascript防抖函数debounce详解
Jun 11 Javascript
vue实现导航菜单和编辑文本的示例代码
Jul 04 Javascript
前端JS面试中常见的算法问题总结
Dec 23 #Javascript
Bootstrap源码解读导航条(7)
Dec 23 #Javascript
livereload工具实现前端可视化开发【推荐】
Dec 23 #Javascript
浅谈jQuery操作类数组的工具方法
Dec 23 #Javascript
jquery pagination插件动态分页实例(Bootstrap分页)
Dec 23 #Javascript
详解jQuery中的DOM操作
Dec 23 #Javascript
Bootstrap table两种分页示例
Dec 23 #Javascript
You might like
9段PHP实用功能的代码推荐
2014/10/14 PHP
PHP上传Excel文件导入数据到MySQL数据库示例
2016/10/25 PHP
经典的带阴影的可拖动的浮动层
2006/06/26 Javascript
JavaScript 函数replace深入了解
2013/03/14 Javascript
js为鼠标添加右击事件防止默认的右击菜单弹出
2013/07/29 Javascript
js中生成map对象的方法
2014/01/09 Javascript
jQuery实现类似老虎机滚动抽奖效果
2015/08/06 Javascript
详解JavaScript操作HTML DOM的基本方式
2015/10/21 Javascript
以WordPress为例讲解jQuery美化页面Title的方法
2016/05/23 Javascript
第一次接触神奇的Bootstrap网格系统
2016/07/27 Javascript
JavaScript探测CSS动画是否已经完成的方法
2016/08/30 Javascript
jQuery插件HighCharts绘制2D圆环图效果示例【附demo源码下载】
2017/03/09 Javascript
JavaScript实现三级联动效果
2017/07/15 Javascript
vue仿element实现分页器效果
2018/09/13 Javascript
js中自定义react数据验证组件实例详解
2018/10/19 Javascript
使用NestJS开发Node.js应用的方法
2018/12/03 Javascript
微信小程序图片左右摆动效果详解
2019/07/13 Javascript
详细教你微信公众号正文页SVG交互开发技巧
2019/07/25 Javascript
CentOS 6.5下安装Python 3.5.2(与Python2并存)
2017/06/05 Python
Python中with及contextlib的用法详解
2017/06/08 Python
利用python实现微信头像加红色数字功能
2018/03/26 Python
对python中的logger模块全面讲解
2018/04/28 Python
python 正确保留多位小数的实例
2018/07/16 Python
Python 访问限制 private public的详细介绍
2018/10/16 Python
python列表,字典,元组简单用法示例
2019/07/11 Python
使用python实现滑动验证码功能
2019/08/05 Python
Python SELENIUM上传文件或图片实现过程
2019/10/28 Python
基于Pycharm加载多个项目过程图解
2020/01/19 Python
使用Python下载抖音各大V视频的思路详解
2021/02/06 Python
HTML5 video 上传预览图片视频如何设置、预览视频某秒的海报帧
2018/08/28 HTML / CSS
阿提哈德航空官方网站:Etihad Airways
2017/01/06 全球购物
.NET程序员的数据库面试题
2012/10/10 面试题
成人高等教育毕业生自我鉴定
2013/10/22 职场文书
党员民主生活会整改措施
2014/09/26 职场文书
2015羊年春节慰问信
2015/02/14 职场文书
导游词之徐州云龙湖
2019/11/19 职场文书