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 相关文章推荐
ExtJS GridPanel 根据条件改变字体颜色
Mar 08 Javascript
Javascript 实用小技巧
Apr 07 Javascript
[将免费进行到底]在Amazon的一年免费服务器上安装Node.JS, NPM和OurJS博客
Aug 18 Javascript
jQuery中[attribute=value]选择器用法实例
Dec 31 Javascript
JavaScript操作cookie类实例
Mar 31 Javascript
jQuery文字横向滚动效果的实现代码
May 31 Javascript
AngularJS 指令的交互详解及实例代码
Sep 14 Javascript
JavaScript实现简单生成随机颜色的方法
Sep 21 Javascript
layui table 参数设置方法
Aug 14 Javascript
Vue 框架之动态绑定 css 样式实例分析
Nov 14 Javascript
js实现多图和单图上传显示
Dec 18 Javascript
快速解决vue2+vue-cli3项目ie兼容的问题
Nov 17 Vue.js
前端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
解析CI的AJAX分页 另类实现方法
2013/06/27 PHP
ThinkPHP模板自定义标签使用方法
2014/06/26 PHP
php连接微软MSSQL(sql server)完全攻略
2016/11/27 PHP
laravel 获取某个查询的查询SQL语句方法
2019/10/12 PHP
JS 无限级 Select效果实现代码(json格式)
2011/08/30 Javascript
jquery 动态创建元素的方式介绍及应用
2013/04/21 Javascript
js数组循环遍历数组内所有元素的方法
2014/01/18 Javascript
raphael.js绘制中国地图 地图绘制方法
2014/02/12 Javascript
bootstrap table 服务器端分页例子分享
2015/02/10 Javascript
最简单的JavaScript图片轮播代码(两种方法)
2015/12/18 Javascript
原生js实现放大镜效果
2017/01/11 Javascript
vue.js指令和组件详细介绍及实例
2017/04/06 Javascript
微信小程序 Buffer缓冲区的详解
2017/07/06 Javascript
jQuery实现点击下拉框中的值累加到文本框中的方法示例
2017/10/28 jQuery
jQuery实现判断上传图片类型和大小的方法示例
2018/04/11 jQuery
详解如何在Angular优雅编写HTTP请求
2018/12/05 Javascript
Nodejs中怎么实现函数的串行执行
2019/03/02 NodeJs
Vue Router的手写实现方法实现
2020/03/02 Javascript
js实现文字头像的生成代码
2020/03/07 Javascript
Python实现的数据结构与算法之快速排序详解
2015/04/22 Python
Python基于pygame实现图片代替鼠标移动效果
2015/11/11 Python
用Python将动态GIF图片倒放播放的方法
2016/11/02 Python
Python中XlsxWriter模块简介与用法分析
2018/04/24 Python
opencv实现静态手势识别 opencv实现剪刀石头布游戏
2019/01/22 Python
详解python websocket获取实时数据的几种常见链接方式
2019/07/01 Python
10分钟用python搭建一个超好用的CMDB系统
2019/07/17 Python
python 实现在shell窗口中编写print不向屏幕输出
2020/02/19 Python
一文详述 Python 中的 property 语法
2020/09/01 Python
前端实现弹幕效果的方法总结(包含css3和canvas的实现方式)
2018/07/12 HTML / CSS
Shell脚本如何向终端输出信息
2014/04/25 面试题
4s店总经理岗位职责
2013/12/31 职场文书
中学生综合素质自我评价
2015/03/06 职场文书
2015年人事工作总结范文
2015/04/09 职场文书
植树节新闻稿
2015/07/17 职场文书
开网店计划分析
2019/07/30 职场文书
python识别围棋定位棋盘位置
2021/07/26 Python