bootstrap与pagehelper实现分页效果

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

前台

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实现分页流程完毕

效果如下：

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。