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 相关文章推荐
jquery 仿QQ校友的DIV模拟窗口效果源码
Mar 24 Javascript
jquery中使用ajax获取远程页面信息
Nov 13 Javascript
javascript标签在页面中的位置探讨
Apr 11 Javascript
JS的数组迭代方法
Feb 05 Javascript
深入理解JavaScript中的对象复制(Object Clone)
May 18 Javascript
一个炫酷的Bootstrap导航菜单
Dec 28 Javascript
微信小程序实现给循环列表添加点击样式实例
Apr 26 Javascript
使用JavaScript实现表格编辑器(实例讲解)
Aug 02 Javascript
Vue2.0用 watch 观察 prop 变化(不触发)
Sep 08 Javascript
解决Vue调用springboot接口403跨域问题
Sep 02 Javascript
Javascript模块化机制实现原理详解
Apr 02 Javascript
从源码角度来回答keep-alive组件的缓存原理
Jan 18 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
自制短波长线天线频率预选器 - 成功消除B2K之流的镜像
2021/03/02 无线电
Yii结合CKEditor实现图片上传功能
2014/06/13 PHP
JavaScript 在线压缩和格式化收藏
2009/01/16 Javascript
基于JQuery的cookie插件
2010/04/07 Javascript
javascript单引号和双引号的区别和处理
2014/05/14 Javascript
简介JavaScript中的sub()方法的使用
2015/06/08 Javascript
浅谈$(document)和$(window)的区别
2015/07/15 Javascript
不同js异步函数同步的实现方法
2016/05/28 Javascript
你知道setTimeout是如何运行的吗?
2016/08/16 Javascript
COM组件中调用JavaScript函数详解及实例
2017/02/23 Javascript
js仿拉勾网首页穿墙广告效果
2017/03/08 Javascript
yii form 表单提交之前JS在提交按钮的验证方法
2017/03/15 Javascript
详解在WebStorm中添加Vue.js单文件组件的高亮及语法支持
2017/10/21 Javascript
node前端模板引擎Jade之标签的基本写法
2018/05/11 Javascript
Vue CLI 3.x 自动部署项目至服务器的方法
2019/04/02 Javascript
Vue之Mixins(混入)的使用方法
2019/09/24 Javascript
JavaScript实现放大镜效果代码示例
2020/04/29 Javascript
JavaScript鼠标悬停事件用法解析
2020/05/15 Javascript
js实现轮播图特效
2020/05/28 Javascript
[48:45]Ti4 循环赛第二日 NEWBEE vs EG
2014/07/11 DOTA
[04:29]2016国际邀请赛中国区预选赛Ehome战队教练采访
2016/06/27 DOTA
Python运行报错UnicodeDecodeError的解决方法
2016/06/07 Python
利用Python如何制作好玩的GIF动图详解
2018/07/11 Python
Python实现二叉树的最小深度的两种方法
2019/09/30 Python
python 实现查询Neo4j多节点的多层关系
2019/12/23 Python
python计算二维矩形IOU实例
2020/01/18 Python
python列表删除和多重循环退出原理详解
2020/03/26 Python
opencv 阈值分割的具体使用
2020/07/08 Python
pycharm 如何取消连按两下shift出现的全局搜索
2021/01/15 Python
Pycharm 跳转回之前所在页面的操作
2021/02/05 Python
Html5写一个简单的俄罗斯方块小游戏
2019/12/03 HTML / CSS
ASOS西班牙官网:英国在线时尚和美容零售商
2020/01/10 全球购物
成绩单公证书
2014/04/10 职场文书
大国崛起日本观后感
2015/06/02 职场文书
房产销售员2015年终工作总结
2015/10/22 职场文书
商业计划书格式、范文
2019/03/21 职场文书