bootstrap与pagehelper实现分页效果


Posted in Javascript onDecember 29, 2018

最近做的一些小项目中,都有用到分页,需要自己去搞。就把整个分页实现整理下吧,方便自己也方便他人。

前台

1.引入paging.js

//分页,页码导航,要求参数为一个对象
function createPageNav(opt) {
  opt= opt || {};
  var $container  = opt.$container     || null, //必需,页码容器,请确保这个容器只用来存放页码导航
    pageCount  = Number(opt.pageCount)  || 0,  //必需,页码总数
    currentNum  = Number(opt.currentNum) || 1,  //选填,当前页码
    maxCommonLen = Number(opt.maxCommonLen)|| 10,  //选填,普通页码的最大个数

    className = opt.className || "pagination",//选填,分页类型:pagination或pager等
    preText  = opt.preText  || "上一页",   //选填,上一页文字显示,适用于只有前后页按钮的情况
    nextText = opt.nextText  || "下一页",   //选填,下一页文字,同上
    firstText = opt.firstText || "首页",
  lastText = opt.lastText  || "末页",

    hasFirstBtn = opt.hasFirstBtn  === false ? false : true,
    hasLastBtn  = opt.hasLastBtn  === false ? false : true,
    hasPreBtn  = opt.hasPreBtn   === false ? false : true,
    hasNextBtn  = opt.hasNextBtn  === false ? false : true,
    hasInput   = opt.hasInput   === false ? false : true,
    hasCommonPage= opt.hasCommonPage === false ? false : true,//选填,是否存在普通页

    beforeFun = opt.beforeFun || null, //选填,页码跳转前调用的函数,可通过返回false来阻止跳转,可接收目标页码参数
    afterFun = opt.afterFun || null, //选填,页码跳转后调用的函数,可接收目标页码参数
    noPageFun = opt.noPageFun || null; //选填,页码总数为0时调用的函数

  //当前显示的最小页码,用于计算起始页码,直接容器,当前页,前,后,首,末,输入框
  var minNum=1,changeLen,$parent,$currentPage,$preBtn,$nextBtn,$firstBtn,$lastBtn,$input;

  //容器
  if (!$container || $container.length != 1){
    console.log("分页容器不存在或不正确");
    return false;
  }
  //总页数
  if(pageCount <= 0){
    if(noPageFun) noPageFun();
    return false;
  }
  //当前页
  if (currentNum < 1) currentNum = 1;
  else if (currentNum > pageCount) currentNum = pageCount;
  //普通页码的最大个数,起始页算法限制,不能小于3
  if(maxCommonLen<3) maxCommonLen=3;
  //跳转页响应长度,用于计算起始页码
  if(maxCommonLen>=8) changeLen=3;
  else if(maxCommonLen>=5) changeLen=2;
  else changeLen=1;

  $container.hide();
  _initPageNav();
  $container.show();

  function _initPageNav(){
    var initStr = [];
    initStr.push('<nav><ul class="'+ className +'" onselectstart="return false">');
    if(hasFirstBtn)initStr.push('<li class="first-page" value="1"><span>'+ firstText +'</span></li>');
    if(hasPreBtn) initStr.push('<li class="pre-page" value="' + (currentNum - 1) + '"><span>'+ preText +'</span></li>');
    if(hasNextBtn) initStr.push('<li class="next-page" value="' + (currentNum + 1) + '"><span>'+ nextText +'</span></li>');
    if(hasLastBtn) initStr.push('<li class="last-page" value="' + pageCount + '"><span>'+ lastText +'</span></li>');
    if(hasInput)  
      initStr.push('<div class="input-page-div">当前第<input type="text" maxlength="6" value="' + currentNum + '" />页,共<span>'
        + pageCount
        + '</span>页<button type="button" class="btn btn-xs input-btn-xs">确定</button></div>');
    initStr.push('</ul></nav>');

    $container.html(initStr.join(""));
    //初始化变量
    $parent=$container.children().children();
    if(hasFirstBtn) $firstBtn = $parent.children("li.first-page");
    if(hasPreBtn)  $preBtn  = $parent.children("li.pre-page");
    if(hasNextBtn) $nextBtn = $parent.children("li.next-page");
    if(hasLastBtn) $lastBtn = $parent.children("li.last-page");
    if(hasInput){
      $input = $parent.find("div.input-page-div>input");
      $parent.find("div.input-page-div>button").click(function(){
        _gotoPage($input.val());
      });
    }  
    //初始化功能按钮
    _buttonToggle(currentNum);
    //生成普通页码
    if(hasCommonPage) {
      _createCommonPage(_computeStartNum(currentNum), currentNum);
    }
    //绑定点击事件
    $parent.on("click", "li",function () {
      var $this=$(this);
      if ($this.is("li") && $this.attr("value")){
        if(!$this.hasClass("disabled") && !$this.hasClass("active")){
          _gotoPage($this.attr("value"));
        }
      }
    });
  }
  //跳转到页码
  function _gotoPage(targetNum) {
    targetNum=_formatNum(targetNum);
    if (targetNum == 0 || targetNum == currentNum) return false;
    // 跳转前回调函数
    if (beforeFun && beforeFun(targetNum) === false) return false;
    //修改值
    currentNum=targetNum;
    if(hasInput)  $input.val(targetNum);
    if(hasPreBtn) $preBtn.attr("value", targetNum - 1);
    if(hasNextBtn) $nextBtn.attr("value", targetNum + 1);
    //修改功能按钮的状态
    _buttonToggle(targetNum);
    // 计算起始页码
    if(hasCommonPage) {
      var starNum = _computeStartNum(targetNum);
      if (starNum == minNum) {// 要显示的页码是相同的
        $currentPage.removeClass("active");
        $currentPage = $parent.children("li.commonPage").eq(targetNum - minNum).addClass("active");
      } 
      else {// 需要刷新页码
        _createCommonPage(starNum, targetNum);
      }
    }
    // 跳转后回调函数
    if (afterFun) afterFun(targetNum);
  }
  //整理目标页码的值
  function _formatNum(num){
    num = Number(num);
    if(isNaN(num)) num=0;
    else if (num <= 0) num = 1;
    else if (num > pageCount) num = pageCount;
    return num;
  }
  //功能按钮的开启与关闭
  function _buttonToggle(current){
    if (current == 1) {
      if(hasFirstBtn) $firstBtn.addClass("disabled");
      if(hasPreBtn)  $preBtn.addClass("disabled");
    } 
    else {
      if(hasFirstBtn) $firstBtn.removeClass("disabled");
      if(hasPreBtn)  $preBtn.removeClass("disabled");
    }

    if (current == pageCount) {
      if(hasNextBtn) $nextBtn.addClass("disabled");
      if(hasLastBtn) $lastBtn.addClass("disabled");
    }
    else {
      if(hasNextBtn) $nextBtn.removeClass("disabled");
      if(hasLastBtn) $lastBtn.removeClass("disabled");
    }
  }
  //计算当前显示的起始页码
  function _computeStartNum(targetNum) {
    var startNum;
    if (pageCount <= maxCommonLen)
      startNum = 1;
    else {
      if ((targetNum - minNum) >= (maxCommonLen-changeLen)) {//跳转到靠后的页码
        startNum = targetNum - changeLen;
        if ((startNum + maxCommonLen-1) > pageCount) startNum = pageCount - (maxCommonLen-1);// 边界修正
      } 
      else if ((targetNum - minNum) <= (changeLen-1)) {//跳转到靠前的页码
        startNum = targetNum - (maxCommonLen-changeLen-1);
        if (startNum <= 0) startNum = 1;// 边界修正
      } 
      else {// 不用改变页码
        startNum = minNum;
      }
    }
    return startNum;
  }
  //生成普通页码
  function _createCommonPage(startNum, activeNum) {
    var initStr = [];
    for (var i = 1,pageNum=startNum; i <= pageCount && i <= maxCommonLen; i++ , pageNum++) {
      initStr.push('<li class="commonPage" value="' + pageNum + '"><a href="javascript:" rel="external nofollow" >' + pageNum + '</a></li>');
    }

    $parent.hide();
    $parent.children("li.commonPage").remove();
    if(hasPreBtn) $preBtn.after(initStr.join(""));
    else if(hasFirstBtn) $firstBtn.after(initStr.join(""));
    else $parent.prepend(initStr.join(""));
    minNum = startNum;
    $currentPage = $parent.children("li.commonPage").eq(activeNum-startNum).addClass("active");
    $parent.show();
  }
}

2.引入paging.css

ul.pagination>li>span,ul.pagination>li>a,ul.pagination>li.active>a,ul.pager>li>span{
cursor: pointer;
}
.input-page-div>input{
width:5em;
height:1.8em;
margin:0.4em 0.2em 0.2em 0.2em;
text-align: center;
}
.input-page-div>.input-btn-xs{
margin-left:1em;
font-size: 1em;
width:3em;
background-color: #337ab7;
color:#fff;
}
.input-page-div{
display: inline-block;
margin-left:1em;
}

3.页面中添加一个div容器

<div id="paging"></div>

4.js中添加一段代码

createPageNav({
   $container : $("#paging"),
   pageCount : data.pages,
   currentNum : data.pageNum,
   afterFun : function(num){
     getResult(num,10);
   }
 });

例:

function getResult(pageNum,pageSize){
   $.ajax({
     type: "GET",
     url: "../../metrics.do?type=8&pageNum="+pageNum+"&pageSize="+pageSize,
     data: {},
     dataType: "json",
     success: function(data){
       list = data.data;
       createPageNav({
          $container : $("#paging"),
          pageCount : data.pages,
          currentNum : data.pageNum,
          afterFun : function(num){
            getResult(num,10);
          }
       });
       createList(data.data);
//      createSelect(data);
       console.info(data);
     }
   });
}

后台

5.引入pagehelper依赖

<!-- yuruixin add mybatis paging -->
  <dependency>
    <groupId>com.github.pagehelper</groupId>
    <artifactId>pagehelper</artifactId>
    <version>4.1.6</version>
  </dependency>

6.service层添加如下代码

//pageSize=0时,查询所有
PageHelper.startPage(pageNum, pageSize);
Page<ExtractMetrics> extractMetrics = extractMetricsMapper.selectByCondition(extractMetric,pageNum,pageSize);

7.controller层添加如下代码

Map<String,Object> map = new HashMap<String,Object>();
//查询页数
map.put("pageNum", extractMetrics.getPageNum());
 //每页条数
map.put("pageSize", extractMetrics.getPageSize());
 //总条数
map.put("total", extractMetrics.getTotal());
 //总页数
map.put("pages", extractMetrics.getPages());
map.put("data", extractMetrics.getResult());

至此,bootstrap与pagehelper实现分页流程完毕

效果如下:

bootstrap与pagehelper实现分页效果

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
javascript读取RSS数据
Jan 20 Javascript
jQuery.extend 函数及用法详细
Sep 06 Javascript
JavaScript实现仿新浪微博大厅和腾讯微博首页滚动特效源码
Sep 15 Javascript
javascript中this指向详解
Apr 23 Javascript
详解Angular的内置过滤器和自定义过滤器【推荐】
Dec 26 Javascript
jQuery插件echarts实现的多柱子柱状图效果示例【附demo源码下载】
Mar 04 Javascript
快速解决处理后台返回json数据格式的问题
Aug 07 Javascript
如何用JavaScript实现功能齐全的单链表详解
Feb 11 Javascript
layui实现三级联动效果
Jul 26 Javascript
JavaScript链式调用原理与实现方法详解
May 16 Javascript
vue中的计算属性和侦听属性
Nov 06 Javascript
vue 数据操作相关总结
Dec 17 Vue.js
微信小程序实现滑动切换自定义页码的方法分析
Dec 29 #Javascript
vue实现分页组件
Jun 16 #Javascript
如何用RxJS实现Redux Form
Dec 29 #Javascript
Vue.js结合bootstrap前端实现分页和排序效果
Dec 29 #Javascript
jQuery实现的鼠标拖动浮层功能示例【拖动div等任何标签】
Dec 29 #jQuery
javascript实现计算指定范围内的质数示例
Dec 29 #Javascript
基于vue.js组件实现分页效果
Dec 29 #Javascript
You might like
重料打造自己的“宝马”---第三代
2021/03/02 无线电
php发送html格式文本邮件的方法
2015/06/10 PHP
用jscript实现新建word文档
2007/06/15 Javascript
用jquery实现自定义风格的滑动条实现代码
2011/04/26 Javascript
JQuery操作Select的Options的Bug(IE8兼容性视图模式)
2013/04/21 Javascript
jquery属性过滤选择器使用示例
2013/06/18 Javascript
js父页面与子页面不同时显示的方法
2014/10/16 Javascript
深入理解JavaScript系列(34):设计模式之命令模式详解
2015/03/03 Javascript
深入剖析JavaScript编程中的对象概念
2015/10/21 Javascript
JavaScript实现设计模式中的单例模式的一些技巧总结
2016/05/17 Javascript
浅谈JS之tagNaem和nodeName
2016/09/13 Javascript
利用js编写响应式侧边栏
2016/09/17 Javascript
javascript history对象详解
2017/02/09 Javascript
vue v-on监听事件详解
2017/05/17 Javascript
js中split()方法得到的数组长度问题
2018/07/19 Javascript
前端防止用户重复提交js实现代码示例
2018/09/07 Javascript
vue项目打包之后背景样式丢失的解决方案
2019/01/17 Javascript
Node.js从字符串生成文件流的实现方法
2019/08/18 Javascript
[03:00]DOTA2-DPC中国联赛1月18日Recap集锦
2021/03/11 DOTA
Python日期操作学习笔记
2008/10/07 Python
跟老齐学Python之私有函数和专有方法
2014/10/24 Python
python写日志封装类实例
2015/06/28 Python
Python离线安装PIL 模块的方法
2019/01/08 Python
Python HTML解析器BeautifulSoup用法实例详解【爬虫解析器】
2019/04/05 Python
Python求两点之间的直线距离(2种实现方法)
2019/07/07 Python
下载与当前Chrome对应的chromedriver.exe(用于python+selenium)
2020/01/14 Python
anaconda3安装及jupyter环境配置全教程
2020/08/24 Python
纯CSS3实现滚动的齿轮动画效果
2014/06/05 HTML / CSS
亚洲最大的运动鞋寄售店:KicksCrew
2020/11/26 全球购物
公司廉洁自律承诺书
2014/03/27 职场文书
娱乐节目策划方案
2014/06/10 职场文书
诚实守信演讲稿
2014/09/01 职场文书
有关保护环境的宣传标语100条
2019/08/07 职场文书
python如何在word中存储本地图片
2021/04/07 Python
golang在GRPC中设置client的超时时间
2021/04/27 Golang
Python如何利用pandas读取csv数据并绘图
2022/07/07 Python