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 textarea的长度进行验证
May 06 Javascript
js前台判断开始时间是否小于结束时间
Feb 23 Javascript
JS中使用sort结合localeCompare实现中文排序实例
Jul 23 Javascript
Javascript window对象详解
Nov 12 Javascript
jQuery插件pagination实现分页特效
Apr 12 Javascript
HTML5+setCutomValidity()函数验证表单实例分享
Apr 24 Javascript
jQuery Validate表单验证深入学习
Dec 18 Javascript
JavaScript代码性能优化总结(推荐)
May 16 Javascript
JS中用三种方式实现导航菜单中的二级下拉菜单
Oct 31 Javascript
JavaScript中undefined和null的区别
May 03 Javascript
Vue.js devtool插件安装后无法使用的解决办法
Nov 27 Javascript
解决vue项目打包上服务器显示404错误,本地没出错的问题
Nov 03 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
计数器详细设计
2006/10/09 PHP
php ci框架中加载css和js文件失败的解决方法
2014/03/03 PHP
PHP实现QQ登录实例代码
2016/01/14 PHP
PHP Curl模拟登录微信公众平台、新浪微博实例代码
2016/01/28 PHP
浅谈PHP的反射API
2017/02/26 PHP
Alliance vs AM BO3 第二场2.13
2021/03/10 DOTA
收集的10个免费的jQuery相册
2011/02/26 Javascript
常见效果实现之返回顶部(结合淡入、淡出、减速滚动)
2012/01/04 Javascript
在JS中操作时间之getUTCMilliseconds()方法的使用
2015/06/10 Javascript
多个js毫秒倒计时同时进行效果
2016/01/05 Javascript
文件上传插件SWFUpload的使用指南
2016/11/29 Javascript
Angular JS 生成动态二维码的方法
2017/02/23 Javascript
一个可复用的vue分页组件
2017/05/15 Javascript
bootstrap table单元格新增行并编辑
2017/05/19 Javascript
浅谈Emergence.js 检测元素可见性的 js 插件
2017/11/18 Javascript
vue渲染时闪烁{{}}的问题及解决方法
2018/03/28 Javascript
详解javascript appendChild()的完整功能
2018/08/18 Javascript
vue.js实现会动的简历(包含底部导航功能,编辑功能)
2019/04/08 Javascript
微信小程序实现多图上传
2020/06/19 Javascript
Python设计模式之原型模式实例详解
2019/01/18 Python
Python实现使用request模块下载图片demo示例
2019/05/24 Python
网易有道2017内推编程题 洗牌(python)
2019/06/19 Python
使用python获取邮箱邮件的设置方法
2019/09/20 Python
python3 tkinter实现添加图片和文本
2019/11/26 Python
基于plt.title无法显示中文的快速解决
2020/05/16 Python
Python实现小黑屋游戏的完整实例
2021/01/06 Python
五一劳动节活动记录
2014/03/23 职场文书
四下基层实施方案
2014/03/28 职场文书
《蜗牛的奖杯》教后反思
2014/04/24 职场文书
2014年党的群众路线学习心得体会
2014/11/05 职场文书
介绍信的写法
2015/01/31 职场文书
保研导师推荐信
2015/03/25 职场文书
2016年春节慰问信息大全
2015/11/30 职场文书
详解Vue项目的打包方式(生成dist文件)
2022/01/18 Vue.js
基于Python编写简易版的天天跑酷游戏的示例代码
2022/03/23 Python
python获取字符串中的email
2022/03/31 Python