springmvc+mybatis+jquery分页

我的数据库用的mysql，页面没有好看的样式，就找了不少，无论哪个都需要你自己调试修改，现在记录下怎么实现的。

一，后台Page公共类，直接extends下就好，默认15记录

package com.apk.openUser.model;

import java.io.Serializable;
import java.util.List;

public class Page implements Serializable {
  private int index;
  private int page;
  private int limit;
  private int totalPage;
  private int totalCount;
  private List<?> list;
  
  public int getPage()
  {
    if (this.page < 1) {
      this.page = 1;
    }
    return this.page;
  }
  
  public void setPage(int page)
  {
    if (page < 1) {
      page = 1;
    }
    if (this.limit < 1) {
      this.limit = 15;
    }
    this.index = ((page - 1) * this.limit);
    this.page = page;
  }
  
  public int getLimit()
  {
    if (this.limit < 1) {
      this.limit = 15;
    }
    return this.limit;
  }
  
  public void setLimit(int limit)
  {
    if (this.page < 1) {
      this.page = 1;
    }
    if (limit < 1) {
      limit = 15;
    }
    this.index = ((this.page - 1) * limit);
    this.limit = limit;
  }
  
  public void setTotalCount(int totalCount)
  {
    if (totalCount > 0)
    {
      this.totalPage = (totalCount / this.limit);
      if (totalCount % this.limit > 0) {
        this.totalPage += 1;
      }
    }
    this.totalCount = totalCount;
  }
  
  public int getTotalPage()
  {
    return this.totalPage;
  }
  
  public void setTotalPage(int totalPage)
  {
    this.totalPage = totalPage;
  }
  
  public int getTotalCount()
  {
    return this.totalCount;
  }
  
  public List<?> getList()
  {
    return this.list;
  }
  
  public void setList(List<?> list)
  {
    this.list = list;
  }
  
  public int getIndex()
  {
    return this.index;
  }
  
  public void setIndex(int index)
  {
    this.index = index;
  }
}

使用1，类上：

       2，xml：

     3，impl

二 前端分页css：pagenum.css

.pagenum {
  height: 2.7em;
  line-height: 2.7em;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

.pagenum-btns {
  font-size: 0;
}

.pagenum-prev, .pagenum-num, .pagenum-active, .pagenum-next, .pagenum-break {
  display: inline-block;
  width: 2.7em;
  text-align: center;
  font-size: 14px;
  color: #007bff;
  border: 1px solid #ced4da;
  border-left: none;
}

  .pagenum-prev:hover, .pagenum-num:hover, .pagenum-active:hover, .pagenum-next:hover {
    text-decoration: none;
    cursor: pointer;
    color: #007bff;
    background-color: #e9ecef;
  }

.pagenum-prev {
  border-left: 1px solid #ced4da;
}

.pagenum-active, .pagenum-active:hover {
  color: #fff;
  background-color: #007bff;
}

.pagenum-break {
  color: #ced4da;
}

.pagenum-skip {
  margin-left: 5px;
}

.pagenum-input {
  width: 2.7em;
  text-align: center;
  border: 1px solid #ced4da;
  padding: 0;
  margin: 0 3px;
}

  .pagenum-input:focus {
    outline: 2px solid #007bff;
  }

.pagenum-ok {
  display: inline-block;
  width: 3em;
  text-align: center;
  margin-left: 5px;
  color: #007bff;
  border: 1px solid #ced4da;
}

  .pagenum-ok:hover {
    text-decoration: none;
    color: #007bff;
    cursor: pointer;
  }

.pagenum.sm {
  font-size: 12px;
}

  .pagenum.sm .pagenum-prev, .pagenum.sm .pagenum-num, .pagenum.sm .pagenum-active, .pagenum.sm .pagenum-next, .pagenum.sm .pagenum-break {
    font-size: 12px;
  }

.pagenum.lg {
  font-size: 16px;
}

  .pagenum.lg .pagenum-prev, .pagenum.lg .pagenum-num, .pagenum.lg .pagenum-active, .pagenum.lg .pagenum-next, .pagenum.lg .pagenum-break {
    font-size: 16px;
  }

.pagenum.xl {
  font-size: 20px;
}

  .pagenum.xl .pagenum-prev, .pagenum.xl .pagenum-num, .pagenum.xl .pagenum-active, .pagenum.xl .pagenum-next, .pagenum.xl .pagenum-break {
    font-size: 20px;
  }

.pagenum.gray .pagenum-prev, .pagenum.gray .pagenum-num, .pagenum.gray .pagenum-active, .pagenum.gray .pagenum-next, .pagenum.gray .pagenum-break, .pagenum.gray .pagenum-prev:hover, .pagenum.gray .pagenum-num:hover, .pagenum.gray .pagenum-active:hover, .pagenum.gray .pagenum-next:hover, .pagenum.gray .pagenum-ok, .pagenum.gray .pagenum-ok:hover {
  color: #6c757d;
}

  .pagenum.gray .pagenum-active, .pagenum.gray .pagenum-active:hover {
    color: #fff;
    background-color: #6c757d;
  }

.pagenum.green .pagenum-prev, .pagenum.green .pagenum-num, .pagenum.green .pagenum-active, .pagenum.green .pagenum-next, .pagenum.green .pagenum-break, .pagenum.green .pagenum-prev:hover, .pagenum.green .pagenum-num:hover, .pagenum.green .pagenum-active:hover, .pagenum.green .pagenum-next:hover, .pagenum.green .pagenum-ok, .pagenum.green .pagenum-ok:hover {
  color: #28a745;
}

  .pagenum.green .pagenum-active, .pagenum.green .pagenum-active:hover {
    color: #fff;
    background-color: #28a745;
  }

.pagenum.red .pagenum-prev, .pagenum.red .pagenum-num, .pagenum.red .pagenum-active, .pagenum.red .pagenum-next, .pagenum.red .pagenum-break, .pagenum.red .pagenum-prev:hover, .pagenum.red .pagenum-num:hover, .pagenum.red .pagenum-active:hover, .pagenum.red .pagenum-next:hover, .pagenum.red .pagenum-ok, .pagenum.red .pagenum-ok:hover {
  color: #dc3545;
}

  .pagenum.red .pagenum-active, .pagenum.red .pagenum-active:hover {
    color: #fff;
    background-color: #dc3545;
  }

.pagenum.yellow .pagenum-prev, .pagenum.yellow .pagenum-num, .pagenum.yellow .pagenum-active, .pagenum.yellow .pagenum-next, .pagenum.yellow .pagenum-break, .pagenum.yellow .pagenum-prev:hover, .pagenum.yellow .pagenum-num:hover, .pagenum.yellow .pagenum-active:hover, .pagenum.yellow .pagenum-next:hover, .pagenum.yellow .pagenum-ok, .pagenum.yellow .pagenum-ok:hover {
  color: #ffc107;
}

  .pagenum.yellow .pagenum-active, .pagenum.yellow .pagenum-active:hover {
    color: #fff;
    background-color: #ffc107;
  }

.pagenum.center {
  text-align: center;
}

.pagenum.right {
  text-align: right;
}

css

 分页js：pagenum.js

$.fn.extend({
    /*=============================================================================*
     * 调用 $('#pagenum1').pagenum(cfg), 每次调用都会更新分页条状态.
     * 必须参数:{totalData:'总数',pageIndex:'当前页码',pageSize:'每页数量'}
     * 当总数大于0时,才需要调用分页条
     *=============================================================================*/
    pagenum: function (config)
    {
        // 外层框JQ对象
        let pnJQ = $(this);
        let cfg = {};
        /*====================*
         * 方法 public
         *====================*/

        /*====================*
         * 方法 private
         *====================*/
        // 初始化配置 {totalData:'总数',pageIndex:'当前页码',pageSize:'每页数量',pageClickE:'点击页码方法'}
        let initCfg = function (config)
        {
            // 当前页码
            cfg.PageIndex = config.pageIndex || 1;
            // 每页数量[5-50]
            cfg.PageSize = (config.pageSize > 4 && config.pageSize < 51) ? config.pageSize : 15;
            // 数据总数
            cfg.TotalData = config.totalData || 0;
            // 总页数
            cfg.TotalPage = getTotalPage();
            // 分页按钮个数[5-10].
            cfg.TotalBtn = (config.totalBtn > 4 && config.pageSize < 11) ? config.totalBtn : 5;
            // 页码点击事件方法
            cfg.pageClickE = config.pageClickE;
            //alert(cfg.pageClickE);
           
        }
        // 主要方法:更新分页条数据,绑定相关事件
        let newPageNum = function ()
        {
            // 清空DOM,重新生成分页组件DOM,绑定事件
            pnJQ.empty();
            // 1.页码按钮区域
            pnJQ.append('<span class="pagenum-btns"></span>');
            // 2.跳转按钮区域
            pnJQ.append(String.Format('<span class="pagenum-skip">共<b class="pagenum-total">{0}</b>页&nbsp;&nbsp;到第<input class="pagenum-input" />页<a class="pagenum-ok">确定</a></span>'
                , cfg.TotalPage));

            // 计算页码起止
            pagenumRange();
            //console.log(cfg);
            /*-------------------------------------------------------*
             * 添加按钮DOM
             * 页码区固定按钮4个:前一页,第1页和第末页,后一页.
             *-------------------------------------------------------*/
            let btndom = '';

            // 向前按钮
            btndom += String.Format('<a class="pagenum-prev" pagenum="{0}"><</a>', cfg.PageIndex - 1);
            // 第1页按钮,当起始页码大于1时添加
            if (cfg.StartIndex > 1)
                btndom += String.Format('<a class="pagenum-{0}" pagenum="1">1</a>',
                    cfg.PageIndex == 1 ? 'active' : 'num');

            // 前省略号,当起始页码大于2时添加
            if (cfg.StartIndex> 2)
            {
                btndom+='<span class="pagenum-break">...</span>';
            }
            // 页码按钮
            for (let i = cfg.StartIndex; i <= cfg.EndIndex; i++)
            {
                let pagenum = i;
                btndom += String.Format('<a class="pagenum-{0}" pagenum="{1}">{1}</a>'
                    , pagenum == cfg.PageIndex ? 'active' : 'num', pagenum);
            }
            // 后省略号,当结束页小于最大页码-1时
            if (cfg.EndIndex < (cfg.TotalPage - 1))
            {
                btndom+='<span class="pagenum-break">...</span>';
            }
            // 末页按钮,当结束页小于最大页码时添加
            if (cfg.EndIndex < cfg.TotalPage)
                btndom += String.Format('<a class="pagenum-{0}" pagenum="{1}">{1}</a>',
                    cfg.PageIndex == cfg.TotalPage ? 'active' : 'num', cfg.TotalPage);

            // 向后按钮
            btndom += String.Format('<a class="pagenum-next" pagenum="{0}">></a>', cfg.PageIndex + 1);

            // 将btndom添加到页码按钮区域容器
            pnJQ.find('.pagenum-btns').append(btndom);

            // 绑定所有按钮事件
            bindEventForAllBtn();
        }

        // 计算起始页码位置:以当前页码为中间位置,根据需要显示的页码按钮个数,计算当前页码之前和之后的页码数.
        // 当前页码在正中,如果显示按钮个数为偶数,则偏左.例如: "2 3 (4:当前页码在此) 5 6 7"
        let pagenumRange = function ()
        {
            let startIndex = cfg.PageIndex - parseInt(cfg.TotalBtn / 2)
                + (cfg.TotalBtn % 2 == 0 ? 1 : 0);
            let endIndex = cfg.PageIndex + parseInt(cfg.TotalBtn / 2);

            // 起始页小于1,说明当前页码位于正中时,前面页码数不够了.应将第1页为起始页码,而结束页码也应该重新计算
            if (startIndex < 1)
            {
                startIndex = 1;
                // 根据要显示的页码数计算结束页码,如果算出页码数大于总页码,则以总页码数为结束页码
                endIndex = endIndex > cfg.TotalPage ? cfg.TotalPage : cfg.TotalBtn;
            }
            // 结束页码大于总页码,说明当前页码位于正中时,后面的页码数不够.应将总页码数为终止页码,起始页码应重新计算
            if (endIndex > cfg.TotalPage)
            {
                endIndex = cfg.TotalPage;
                // 根据要显示的页码数计算起始页码,如果算出小于1,则以1为起始页码
                startIndex = endIndex - cfg.TotalBtn + 1;
                if (startIndex < 1)
                    startIndex = 1;
            }
            cfg.StartIndex = startIndex;
            cfg.EndIndex = endIndex;
        }
        // 表示前一页码(应由当前页码计算得出)
        let getPrevPage = function ()
        {
            return cfg.PageIndex == 1 ? 1 : cfg.PageIndex - 1;
        }
        // 表示后一页码
        let getNextPage = function ()
        {
            return cfg.TotalPage == cfg.PageIndex ? cfg.PageIndex : cfg.PageIndex + 1;
        }
        // 总页数(由数量总数和分页大小算出)
        let getTotalPage = function ()
        {
            if (cfg.TotalData >= 0 && cfg.PageSize >= 5
                && cfg.PageIndex >= 1)
            {
                let pagecount = parseInt(cfg.TotalData / cfg.PageSize);
                let pagecountM = cfg.TotalData % cfg.PageSize;
                return pagecountM > 0 ? pagecount + 1 : pagecount;
            }else{
              return 0;
            }
        }
        /*====================*
         * 事件绑定 
         *====================*/
        let bindEventForAllBtn = function ()
        {
            // 页码按钮点击
            pnJQ.find('.pagenum-prev,.pagenum-next,.pagenum-first,.pagenum-last,.pagenum-num').on('click',
                function ()
                {
                    // 页码参数范围[1-总页码],范围外不动作
                    let pnnum = parseInt($(this).attr('pagenum')) || 0;
                    if (pnnum < 1 || pnnum > cfg.TotalPage) return;
                    cfg.pageClickE(pnnum);
                });
            // 确定按钮点击
            pnJQ.find('.pagenum-ok').on('click',
                function ()
                {
                    let pnnum = parseInt(pnJQ.find('.pagenum-input').val()) || 0;
                    if (pnnum < 1 || pnnum > cfg.TotalPage) return;
                    cfg.pageClickE(pnnum);
                });
        }
        /*let pageClickE = function (pnnum)
        {
        	var page = pnnum;
        	itAction;
        }*/

        /*============================*
         * 初始化配置,生成分页组件
         *============================*/
        initCfg(config);
        newPageNum();
    }
})

使用在js加上：主要是cfg字段

//问题反馈分页
function listProblems(page){
        var page = page;
        if(!page) page = 1;
        $("#feedbody").empty();
        $.ajax({
            type: "Post",
            url: ctx +"/auditor/selectProblems.shtml",
            data: {page:page},
            dataType : "json",
            success: function (data) {
                if(data.state == 200){
                    var data = data.page;
                    var proList = data.list;
                    var htm = "";
                    if(proList){
                        for(var i=0;i<proList.length;i++){
                            var user = proList[i].user;
                            var feedText = '"'+ proList[i].problemText+'"';
                            var time = proList[i].createTime;
                            if(time){
                                time = time.replace('.0','');
                            }else{
                                time = '';
                            }
                            
                            htm += "<tr><td>"+(i+1)+"</td><td>"+user.company
                            +"</td><td>"+time
                            +"</td><td>"+user.email
                            +"</td><td>"+user.contact_tel
                            +"</td><td><a href='javascript:void(0); ' style='color: blue' οnclick='showPro("
                            +feedText+")'>"+i18n['details']+"</a></td></tr>";

                        }
                        $("#feedbody").append(htm);
                        let cfg=
                        {
                                // 这里绑定getdata方法自己,注意传递page值
                                pageClickE:function(page){ listProblems(page)},
                                // 总数(必须) >0 由后端返回新的总数
                                totalData:data.totalCount,
                                // 当前页码(必须) >0 由后端返回当前页码,或者页面记住当前请求页面
                                pageIndex:data.page,
                                // 每页数量 [5-50]
                                pageSize:15,
                                // 显示几个按钮[5-10]
                                totalBtn:8
                        }
                        $('#pagePro').pagenum(cfg);
                    }
                    
                }else{
                    tipAlert(data.msg);
                }
                
            },
            error: function () {
                 direct();
            }
        })
        
    }

jsp上面：在页面你想加分页的地方加入<nav class="pagenum" id="pagePro"></nav>