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 相关文章推荐
利用WebBrowser彻底解决Web打印问题(包括后台打印)
Jun 22 Javascript
将jQuery应用于login页面的问题及解决
Oct 17 Javascript
date.parse在IE和FF中的区别
Jul 29 Javascript
jqeury eval将字符串转换json的方法
Jan 20 Javascript
js Select下拉列表框进行多选、移除、交换内容的具体实现方法
Aug 13 Javascript
js冒泡、捕获事件及阻止冒泡方法详细总结
May 08 Javascript
jQuery原型属性和原型方法详解
Jul 07 Javascript
深入理解js generator数据类型
Aug 16 Javascript
jquery插件canvaspercent.js实现百分比圆饼效果
Jul 18 jQuery
jQuery图片加载失败替换默认图片方法汇总
Nov 29 jQuery
JS快速实现简单计算器
Apr 08 Javascript
在webstorm中配置less的方法详解
Sep 25 Javascript
微信小程序实现滑动切换自定义页码的方法分析
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
《Re:从零开始的异世界生活》剧情体验,手游新作定名
2020/04/09 日漫
使用php+xslt在windows平台上
2006/10/09 PHP
PHP中的array数组类型分析说明
2010/07/27 PHP
php配置php-fpm启动参数及配置详解
2013/11/04 PHP
浅谈php命令行用法
2015/02/04 PHP
php制作基于xml的RSS订阅源功能示例
2017/02/08 PHP
PHP实现执行外部程序的方法详解
2017/08/17 PHP
laravel框架数据库配置及操作数据库示例
2019/10/10 PHP
javascript 得到变量类型的函数
2010/05/19 Javascript
Js获取数组最大和最小值示例代码
2013/10/29 Javascript
Jquery实现侧边栏跟随滚动条固定(兼容IE6)
2014/04/02 Javascript
在for循环中length值是否需要缓存
2015/07/27 Javascript
Vue.js每天必学之构造器与生命周期
2016/09/05 Javascript
AngularJS中的promise用法分析
2017/05/19 Javascript
Angular+Node生成随机数的方法
2017/06/16 Javascript
vue修改vue项目运行端口号的方法
2017/08/04 Javascript
js实现鼠标跟随运动效果
2020/08/02 Javascript
vue2.0 循环遍历加载不同图片的方法
2018/03/06 Javascript
Angular父组件调用子组件的方法
2018/04/02 Javascript
vue.js实现二级菜单效果
2019/10/19 Javascript
Vue this.$router.push(参数)实现页面跳转操作
2020/09/09 Javascript
vue3+typescript实现图片懒加载插件
2020/10/26 Javascript
[45:38]DOTA2上海特级锦标赛主赛事日 - 1 胜者组第一轮#1Liquid VS Alliance第一局
2016/03/02 DOTA
python使用Image处理图片常用技巧分析
2015/06/01 Python
详解 Python 读写XML文件的实例
2017/08/02 Python
一篇文章读懂Python赋值与拷贝
2018/04/19 Python
python 去除二维数组/二维列表中的重复行方法
2019/01/23 Python
Python Django 命名空间模式的实现
2019/08/09 Python
Anaconda之conda常用命令介绍(安装、更新、删除)
2019/10/06 Python
Python 常用日期处理 -- calendar 与 dateutil 模块的使用
2020/09/02 Python
世界上最大的二手相机店:KEN
2017/05/17 全球购物
警察思想汇报
2014/01/04 职场文书
公司中层干部的自我评价分享
2014/03/01 职场文书
项目建议书范文
2014/05/12 职场文书
机械设计制造及其自动化专业求职信
2014/06/17 职场文书
食品安全演讲稿
2014/09/01 职场文书