java 自定义pageBean实现分页

    public List<User> findByPage(int pageNum, int pageSize){
        return userDao.findByPage(pageNum, pageSize);
    }

    public PageBean<User> findByPagePageBean(int pageNum, int pageSize) {
        List<User> userList = findByPage(pageNum, pageSize);
        Long totals = userDao.showtotals();

        PageBean<User> pageBean = new PageBean<>();
        pageBean.setData(userList);
        pageBean.setPageNum(pageNum);
        pageBean.setPageSize(pageSize);
        pageBean.setTotal(totals);
        pageBean.setData(userList);

        return pageBean;
    }

pageBean的定义

import java.util.List;

/**
 * @author zhangkun
 * @create 2019-04-19 16:01
 */
public class PageBean <T> {
    private List<T> data;
    private long total;      //表中一共有多少条数据
    private int pageSize = 10; //每页有多少数据 默认10
    private int pageNum;     //当前页的页码
    private int totalPage;   //该表一共有多少页

    private int startPage;   //需要展示的第一页的标号
    private int endPage;    //需要展示的最后一页的标号
    private int showPageCount=10;//需要展示多少个页码

    public List<T> getData() {
        return data;
    }

    public void setData(List<T> data) {
        this.data = data;
    }

    public long getTotal() {
        return total;
    }

    public void setTotal(long total) {
        this.total = total;
    }

    public int getPageSize() {
        return pageSize;
    }

    public void setPageSize(int pageSize) {
        this.pageSize = pageSize;
    }

    public int getPageNum() {
        return pageNum;
    }

    public void setPageNum(int pageNum) {
        this.pageNum = pageNum;
    }

    public int getTotalPage() {
        return (int) Math.ceil(total * 1.0 / pageSize);
    }

    public int getStartPage() {
        return getRange()[0];
    }

    public int getEndPage() {
        return getRange()[1];
    }

    public int getShowPageCount() {
        return showPageCount;
    }

    public void setShowPageCount(int showPageCount) {
        this.showPageCount = showPageCount;
    }

    public int[] getRange() {
        totalPage=getTotalPage();

        //先要判断前面需要几个后面需要几个  奇数页和偶数页是不同的
        int pre = showPageCount % 2 == 0 ? showPageCount / 2 : showPageCount / 2;
        int suf = showPageCount % 2 == 0 ? showPageCount / 2 - 1 : showPageCount / 2;

        //前面不够   后面够的情况
        if (!(pageNum > pre) && (pageNum + suf) <= totalPage) {
            this.startPage = 1;
            //计算前面还缺多少页  缺的看看能补到后面吗
            int preLackNum = pre - (pageNum - 1);
            this.endPage = (pageNum + preLackNum + suf) > totalPage ? totalPage : pageNum + preLackNum + suf;
            return new int[]{this.startPage, this.endPage};
        }
        //前面不够  后面不够的情况
        if (!(pageNum > pre) && !((pageNum + suf) <= totalPage)) {
            this.startPage = 1;
            this.endPage = totalPage;
            return new int[]{this.startPage, this.endPage};
        }
        //前面够 后面够的情况
        if (pageNum > pre && (pageNum + suf) <= totalPage) {
            this.startPage = pageNum - pre;
            this.endPage = pageNum + suf;
            return new int[]{this.startPage, this.endPage};
        }
        //前面够 后面不够的情况
        if (pageNum > pre && !((pageNum + suf) <= totalPage)) {
            this.endPage = totalPage;
            //先看下后面还差几页
            int sufLackNum = pageNum + suf - totalPage;
            //看看前面还有没有空间可以补上
            this.startPage = (pageNum > (sufLackNum + pre)) ? pageNum - (sufLackNum + pre) : 1;
            return new int[]{this.startPage, this.endPage};
        }
        return new int[]{1, 1};
    }
}

返回的就是一个pageBean  就是data  然后看一下json的数据

{
	"code": 1,
	"data": {
		"data": [{
			"id": 188,
			"name": "常和庆",
			"age": "21",
			"gender": "男",
			"address": "山东",
			"email": "zs@qq.com",
			"qq": "9826601"
		},{
			"id": 193,
			"name": "e融财商",
			"age": "12312",
			"gender": "男",
			"address": "add",
			"email": "335675007@qq.com",
			"qq": "daf"
		}],
		"total": 186,
		"pageSize": 10,
		"pageNum": 19,
		"totalPage": 19,
		"startPage": 10,
		"endPage": 19,
		"showPageCount": 10,
		"range": [10, 19]
	}
}

页面使用jquery分析

<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <script src="js/jquery-3.3.1.js"></script>
    <script src="js/bootstrap.min.js"></script>
    <link href="css/bootstrap.min.css" rel="stylesheet">
    <style>
      h1 {
        text-align: center;
      }
      th,td{
        text-align: center;
      }
    </style>
    <script>
        //解析出来url携带的数据/show.html?page=1
        var KUN ={
            "getParamter":function (key) {
                getParamterMap(key)
            },
            "getParamterMap":function (key) {
                var urlData = window.location.search;
                var ReqData = new Object();
                if(urlData.indexOf("?") != -1){
                    var paramters = urlData.split("&");
                    for (var i = 0; i < paramters.length; i++){
                        var key = paramters[i].split("=")[0];
                        var value = paramters[i].split("=")[1];
                        if(ReqData[key] == null){
                            ReqData[key] = new Array(value);
                        }else{
                            ReqData.push(value);
                        }
                    }
                }
                return ReqData[key];
            }
        }


      $(function () {
          var page = KUN.getParamterMap("page");
          //页面加载完成之后将用户数据从服务器获取
          $.ajax({
              url:"/userFindAll?page="+page,
              type:"GET",
              dataType:"json",
              success:function (data) {
                if(data.code == 1){
                    var html = '';
                    //解析用户数据 
                    $(data.data.data).each(function () {
                        var user = this;
                      html+='          <tr>\n' +
                          '            <td>\n' +
                          '              <input type="checkbox">\n' +
                          '            </td>\n' +
                          '            <td>'+user.id+'</td>\n' +
                          '            <td>'+user.name+'</td>\n' +
                          '            <td>'+user.gender+'</td>\n' +
                          '            <td>'+user.age+'</td>\n' +
                          '            <td>'+user.address+'</td>\n' +
                          '            <td>'+user.qq+'</td>\n' +
                          '            <td>'+user.email+'</td>\n' +
                          '            <td><a class="btn btn-default btn-sm" href="update.html">修改</a>&nbsp;<a class="btn btn-default btn-sm" href="">删除</a></td>\n' +
                          '          </tr>';
                    })
                    $("tbody").html(html);

                    //根据页码进行解析页码的数据
                    var pageBean = data.data;
                    var xurl = "/show.html?page=";
                    var ulHtml = '';
                    //处理上一页按钮
                    var pageNum = pageBean.pageNum;
                    if(pageNum > 1){
                        ulHtml += '          <li>\n' +
                            '            <a href="' + xurl + (pageNum-1) + '" aria-label="Previous">\n' +
                            '              <span aria-hidden="true">&laquo;</span>\n' +
                            '            </a>\n' +
                            '          </li>';
                    }else {
                        ulHtml += '     <li class="disabled">\n' +
                            '            <a href="javascript:;" aria-label="Previous">\n' +
                            '              <span aria-hidden="true">&laquo;</span>\n' +
                            '            </a>\n' +
                            '          </li>';
                    }
                    //处理中间的页码
                    for (var i = pageBean.startPage; i <= pageBean.endPage; i++){
                        if(pageBean.pageNum == i){
                             ulHtml += '<li class="active"><a href="javascript:;">'+i+'</a></li>';
                        }else{
                             ulHtml += '<li ><a href="' + xurl + i + '" >' + i + '</a></li>';
                        }
                    }
                    //处理下一页
                    if(pageNum < pageBean.totalPage){
                      ulHtml += '          <li>\n' +
                          '            <a href="'+ xurl + (pageNum+1) +'" aria-label="Next">\n' +
                          '              <span aria-hidden="true">&raquo;</span>\n' +
                          '            </a>\n' +
                          '          </li>';
                    }else {
                          ulHtml += '          <li class="disabled">\n' +
                              '            <a href="javascript:;" aria-label="Next">\n' +
                              '              <span aria-hidden="true">&raquo;</span>\n' +
                              '            </a>\n' +
                              '          </li>';
                    }
                    $("#pagelist").html(ulHtml);
                }
              },
              error:function () {
                console.log("Ajax请求失败")
              }
          })
      })


    </script>

  </head>
  <body>
    <div class="container">
      <h1>显示所有用户</h1>
      <table class="table table-bordered  table-hover">
        <thead>
          <tr>
            <td colspan="9">
              <a href="add.html" class="btn btn-primary">添加</a>
              <a href="#" onclick="batchDelete()" class="btn btn-primary">批量删除</a>
            </td>
          </tr>


          <tr class="success">
            <th>
              <input type="checkbox">
            </th>
            <th>编号</th>
            <th>姓名</th>
            <th>性别</th>
            <th>年龄</th>
            <th>籍贯</th>
            <th>QQ</th>
            <th>邮箱</th>
            <th>操作</th>
          </tr>
        </thead>
        <tbody>
          <tr>
            <td>
              <input type="checkbox">
            </td>
            <td>1</td>
            <td>张三</td>
            <td>男</td>
            <td>20</td>
            <td>广东</td>
            <td>44444222</td>
            <td>zs@qq.com</td>
            <td><a class="btn btn-default btn-sm" href="update.html">修改</a>&nbsp;<a class="btn btn-default btn-sm" href="">删除</a></td>
          </tr>
        </tbody>
      </table>

      <nav aria-label="Page navigation mid" style="text-align: center">
        <ul class="pagination pagination-lg" id="pagelist">
        <!--
          <li>
            <a href="#" aria-label="Previous">
              <span aria-hidden="true">&laquo;</span>
            </a>
          </li>
          <li><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="#" aria-label="Next">
              <span aria-hidden="true">&raquo;</span>
            </a>
          </li>
          -->
        </ul>
      </nav>

    </div>
  </body>
</html>