其他分享
首页 > 其他分享> > 数据在前端显示的分页技术

数据在前端显示的分页技术

作者：互联网

1.实体工具类

/**
 * 分页工具类.泛型类
 */
public class PageUtil<T> {
    //属性
    private int pageNumber;//总记录数
    private int pageCount;//总页数
    private int pageIndex;//当前页
    private int pageSize;//每页大小
    private List<T> list;//当前页的数据

    public int getPageNumber() {
        return pageNumber;
    }

    public int getPageCount() {
        return pageCount;
    }

    public int getPageIndex() {
        return pageIndex;
    }

    public int getPageSize() {
        return pageSize;
    }

    public List<T> getList() {
        return list;
    }

    public void setPageNumber(int pageNumber) {
        this.pageNumber = pageNumber;
    }

    public void setPageCount(int pageCount) {
        this.pageCount = pageCount;
    }

    public void setPageIndex(int pageIndex) {
        this.pageIndex = pageIndex;
    }

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

    public void setList(List<T> list) {
        this.list = list;
    }
}

2.分页显示controller

// 分页显示列表
    @RequestMapping("list") 
    public ModelAndView list(HttpServletRequest request, Model model,HttpSession session,@RequestParam(value="name",required=false) String name) {
        System.out.println("--------------------+"+name+"++------------------------");
        session.setAttribute("name", name);
        int pageIndex = 1;// 设置初始的当前页，页面显示的都是第一页
        int pageSize = 5;// 设置每一页显示几条数据,用于计算总页数，此处设置的值必须与sql语句的limit最后的数值一样
        System.out.println("员工列表");
        PageUtil<Member> pageUtil = new PageUtil<Member>();// 初始化工具类
        if (request.getParameter("pageIndex") != null) {
            pageIndex = Integer.parseInt(request.getParameter("pageIndex"));
        } // 对页面上的分页标签传的值,进行获取,也是就点击'上一页或者下一页'传过来的pageindex
        pageUtil.setPageIndex(pageIndex);// 保存至工具类，当前页数
        int number = memberBiz.getRowCount();// 调用service层方法计算出总数据量，就是多少条数据.
        //System.out.println("------------------------------"+number);
        pageUtil.setPageNumber(number);// 保存至工具类,总记录数
        pageUtil.setPageSize(pageSize);// 保存至工具类，一页几条
        pageUtil.setPageCount((int) Math.ceil((double) (pageUtil.getPageNumber() / pageUtil.getPageSize())) + 1);// 计算出总页数,并封装到工具类
        int index = (pageIndex - 1) * pageSize;// 计算出每一页从数据库中第几条数据开始取值，也就是limit后面的第一个数字
            
            
        List<Member> list = memberBiz.findAllMember(name, index);// 调用service层的方法，取得数据库中的值
        pageUtil.setList(list);// 保存到工具类中的集合

        model.addAttribute("pageUtil", pageUtil);// 传递到页面，存入值栈中
        model.addAttribute("members", list);
        //System.out.println("-------------------------");
        //System.out.println(list);
        
        return new ModelAndView("memberlist");// 跳转的相关页面
    }

3.前端jsp页面

<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt"%>
<%
    pageContext.setAttribute("APP_PATH", request.getContextPath());
%>
<html>
<head>
    <meta charset="utf-8">
    <title>管理员查看</title>
    <meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=no">
    <link rel="stylesheet" type="text/css" href="${APP_PATH }/css/bootstrap.min.css">
    <link rel="stylesheet" type="text/css" href="${APP_PATH }/css/bootstrapValidator.css">
    <style>
        .table_div{ width:90%; margin:0 auto;}
    </style>
    <script type="text/javascript">
        function delete_alert()
        {
            alert("您确定删除？")
        }
    </script>
</head>
<body  class="table-responsive" ><!-- style="margin: 30px" -->
<!--面包屑导航-->
 <div>
    <ul class="breadcrumb">
            <li><a href="${pageContext.request.contextPath}/adminholle.jsp">首页</a></li>
        <li class="active">用户管理</li>
    </ul>
</div>  

<div class="row search" >
  <div class="col-md-6">
    <form action="${pageContext.request.contextPath}/member/list.do" method="post">
        <div class="input-group" style="width: 300px">
              <input type="text" class="form-control" name="name"  value="${name}"   placeholder="请输入要查询的用户名...">
              <span class="input-group-btn">
                <button class="btn btn-default" type="submit"><span class="glyphicon glyphicon-search"></span>&nbsp;查询</button>
              </span>
        </div>
    </form>
  </div>
  <div class="text-right" style="width: 87%;height: 30px;">
    <a class="btn btn-success active btn-xs" id="add_btn" href="${pageContext.request.contextPath}/memberadd.jsp">添加</a>&nbsp;
</div>
</div>

<%-- <div class="text-right" style="width: 87%;height: 30px;">
    <a class="btn btn-success active btn-xs" id="add_btn" href="${pageContext.request.contextPath}/adminsave.jsp">添加</a>&nbsp;
</div> --%>
<!--table表单层-->
<div class="table_div">
    <table class="table table-striped table-bordered table-hover" width="1200px" >
        <thead>
        <tr>
            <th align="center">会员编号</th>
            <th align="center">用户名</th>
            <th align="center">密 码</th>
            <th align="center">姓名</th>
            <th align="center">性别</th>
            <th align="center">身份证号</th>
            <th align="center">移动电话</th>
            <th align="center">Email</th>
            <th align="center">住址</th>
            <th align="center">操作</th>
        </tr>
        </thead>
        <tbody>
        <tr>
        <c:forEach var="members" items="${members}">
            <tr>
                <td align="center">${members.id}</td>
                <td align="center">${members.username}</td>
                <td align="center">${members.password}</td>
                <td align="center">${members.name}</td>
                <td align="center">${members.sex}</td>
                <td align="center">${members.idNumber}</td>
                <td align="center">${members.phone}</td>
                <td align="center">${members.email}</td>
                <td align="center">${members.address}</td>
                <td align="center">
                    &nbsp;&nbsp;&nbsp;      
                    <a class="btn btn-danger active btn-xs" onclick="delete_alert()"  href="${pageContext.request.contextPath}/member/delete.do?id=${members.id}">删除</a>
                   <a class="btn btn-info active btn-xs" href="${pageContext.request.contextPath}/member/updateselect.do?id=${members.id}">修改</a>             
                </td>
            </tr>
        </c:forEach>
        </tr>
        </tbody>
    </table>
   


<div style="width: 79%;height:2px;">
   <!--页数显示-->
      共<font size="3" color="red">${pageUtil.pageNumber}</font>条,当前第<font size="3" color="red">${pageUtil.pageIndex}</font>页
</div>

<!--分页-->
<div style="width: 93%;" class="text-right">
    <ul class="pagination" >
        
        <li><a href="${APP_PATH }/member/list.do?pageIndex=1" >首页</a></li>
        <li><a href="${APP_PATH }/member/list.do?pageIndex=${pageUtil.pageIndex>1?pageUtil.pageIndex-1:1}" class='pre'>上一页</a></li>

        <c:forEach begin="1" end="${pageUtil.pageCount}" var="i">
            <li><a href="${APP_PATH }/member/list.do?pageIndex=${i}" style="text-decoration: none;">${i}</a></li>
        </c:forEach>

        <li><a href="${APP_PATH }/member/list.do?pageIndex=${pageUtil.pageIndex<pageUtil.pageCount?pageUtil.pageIndex+1:pageUtil.pageCount}"  class='next'>下一页</a></li>
        <li><a href="${APP_PATH }/member/list.do?pageIndex=${pageUtil.pageCount}" class='last' >末页</a></li>
    </ul>
</div>
</div>

<script type="text/javascript" src="${APP_PATH }/js/jquery-3.2.1.min.js"></script>
<script type="text/javascript" src="${APP_PATH }/js/bootstrap.min.js"></script>
</body>
</html>

4.数据库 dao层 service 省略

标签：pageIndex,分页,int,前端,list,pageUtil,members,数据,public
来源： https://www.cnblogs.com/xutiantian/p/11077878.html