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 相关文章推荐
论坛特效代码收集(落伍转发-不错)
Dec 02 Javascript
JQuery 学习笔记 element属性控制
Jul 23 Javascript
javaScript parseInt字符转化为数字函数使用小结
Nov 05 Javascript
JavaScript 利用Cookie记录用户登录信息
Dec 08 Javascript
asp.net下使用jquery 的ajax+WebService+json 实现无刷新取后台值的实现代码
Sep 19 Javascript
30分钟就入门的正则表达式基础教程
Feb 25 Javascript
jsp js鼠标移动到指定区域显示选项卡离开时隐藏示例
Jun 14 Javascript
关闭浏览器时提示onbeforeunload事件
Dec 25 Javascript
不得不分享的JavaScript常用方法函数集(上)
Dec 23 Javascript
JavaScript正则表达式实例详解
Oct 16 Javascript
详谈js遍历集合(Array,Map,Set)
Apr 06 Javascript
Vue组件tree实现树形菜单
Apr 13 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
Protoss兵种介绍
2020/03/14 星际争霸
解析PHPExcel使用的常用说明以及把PHPExcel整合进CI框架的介绍
2013/06/24 PHP
php学习笔记之面向对象
2014/11/08 PHP
thinkPHP5项目中实现QQ第三方登录功能
2017/10/20 PHP
JS中的prototype与面向对象的实例讲解
2013/05/22 Javascript
bootstrap table配置参数例子
2017/01/05 Javascript
jquery 手势密码插件
2017/03/17 Javascript
Vue2.5通过json文件读取数据的方法
2018/02/27 Javascript
React降级配置及Ant Design配置详解
2018/12/27 Javascript
Vue.js实现开发购物车功能的方法详解
2019/02/22 Javascript
nodejs log4js 使用详解
2019/05/31 NodeJs
JS变量提升及函数提升实例解析
2020/09/03 Javascript
Javascript实现打鼓效果
2021/01/29 Javascript
[02:05:03]完美世界DOTA2联赛循环赛 LBZS VS Matador BO2 10.28
2020/10/28 DOTA
python中随机函数random用法实例
2015/04/30 Python
Python实现的HTTP并发测试完整示例
2020/04/23 Python
Python使用Scrapy爬取妹子图
2015/05/28 Python
Python用Pillow(PIL)进行简单的图像操作方法
2017/07/07 Python
利用python获取当前日期前后N天或N月日期的方法示例
2017/07/30 Python
Python图形绘制操作之正弦曲线实现方法分析
2017/12/25 Python
python实现堆和索引堆的代码示例
2018/03/19 Python
在PyCharm中三步完成PyPy解释器的配置的方法
2018/10/29 Python
浅谈Tensorflow 动态双向RNN的输出问题
2020/01/20 Python
python 日志模块 日志等级设置失效的解决方案
2020/05/26 Python
详解Python Celery和RabbitMQ实战教程
2021/01/20 Python
使用CSS3实现多列布局与多背景的技巧
2016/02/29 HTML / CSS
利用CSS3实现的文字定时向上滚动
2016/08/29 HTML / CSS
Charlotte Tilbury英国官网:英国彩妆品牌
2017/05/26 全球购物
.net工程师笔试题
2012/06/09 面试题
PHP使用Redis队列执行定时任务实例讲解
2021/03/24 PHP
大学生应聘自荐信
2013/10/11 职场文书
开展党的群众路线教育实践活动方案
2014/02/05 职场文书
小学生操行评语大全
2014/04/22 职场文书
产品设计开发计划书
2014/05/07 职场文书
生产实习心得体会范文
2016/01/22 职场文书
PyCharm 配置SSH和SFTP连接远程服务器
2022/05/11 Python