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 相关文章推荐
JavaScript Prototype对象
Jan 07 Javascript
js调试系列 初识控制台
Jun 18 Javascript
VS2008中使用JavaScript调用WebServices
Dec 18 Javascript
点击按钮出现60秒倒计时的简单js代码(推荐)
Jun 07 Javascript
JavaScript简单获取系统当前时间完整示例
Aug 02 Javascript
jQuery实现图片轮播效果代码
Sep 27 Javascript
微信小程序实现带刻度尺滑块功能
Mar 29 Javascript
bootstrap动态添加面包屑(breadcrumb)及其响应事件的方法
May 25 Javascript
js处理包含中文的字符串实例
Oct 11 Javascript
javascript自定义日期比较函数用法示例
Jul 22 Javascript
layui实现根据table数据判断按钮显示情况的方法
Sep 26 Javascript
js实现菜单跳转效果
Dec 11 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
PHP与SQL注入攻击[二]
2007/04/17 PHP
php遍历目录输出目录及其下的所有文件示例
2014/01/27 PHP
分享一个php 的异常处理程序
2014/06/22 PHP
PHP面向对象程序设计之类常量用法实例
2014/08/20 PHP
javascript cookies 设置、读取、删除实例代码
2010/04/12 Javascript
使用js 设置url参数
2013/07/08 Javascript
Angular中ng-bind和ng-model的区别实例详解
2017/04/10 Javascript
微信小程序实现自定义modal弹窗封装的方法
2018/06/15 Javascript
JavaScript函数、闭包、原型、面向对象学习笔记
2018/09/06 Javascript
基于nodejs的雪碧图制作工具的示例代码
2018/11/05 NodeJs
JS/CSS实现字符串单词首字母大写功能
2019/09/03 Javascript
Layui实现主窗口和Iframe层参数传递
2019/11/14 Javascript
vue 子组件watch监听不到prop的解决
2020/08/09 Javascript
[06:25]DOTA2英雄梦之声_第17期_大地之灵
2014/06/20 DOTA
使用Python的Treq on Twisted来进行HTTP压力测试
2015/04/16 Python
Python将阿拉伯数字转换为罗马数字的方法
2015/07/10 Python
Django中的“惰性翻译”方法的相关使用
2015/07/27 Python
python3实现全角和半角字符转换的方法示例
2017/09/21 Python
Python Flask前后端Ajax交互的方法示例
2018/07/31 Python
Django页面数据的缓存与使用的具体方法
2019/04/23 Python
PyTorch搭建多项式回归模型(三)
2019/05/22 Python
python的pytest框架之命令行参数详解(下)
2019/06/27 Python
Python使用qrcode二维码库生成二维码方法详解
2020/02/17 Python
Django单元测试中Fixtures的使用方法
2020/02/26 Python
很酷的HTML5电子书翻页动画特效
2016/02/25 HTML / CSS
介绍一下write命令
2014/08/10 面试题
如何进行Linux分区优化
2016/09/13 面试题
Java中有几种类型的流?JDK为每种类型的流提供了一些抽象类以供继承,请说出他们分别是哪些类?
2012/05/30 面试题
三个Unix的命令面试题
2015/04/12 面试题
广播体操比赛口号
2014/06/10 职场文书
项目合作协议书
2014/09/23 职场文书
标准发言稿结尾
2019/07/18 职场文书
新手必备Python开发环境搭建教程
2021/05/28 Python
Mysql数据库值的添加、修改、删除及清空操作实例
2021/06/20 MySQL
vue-treeselect的基本用法以及解决点击无法出现拉下菜单
2022/04/30 Vue.js
解决 redis 无法远程连接
2022/05/15 Redis