前后端交互(tomcat)如何在前端做出分页效果

最新推荐文章于 2024-06-25 11:27:29 发布

草莓火锅

最新推荐文章于 2024-06-25 11:27:29 发布

阅读量769

点赞数

文章标签： java tomcat spring

本文链接：https://blog.csdn.net/bxq2195294335/article/details/125669569

版权

首先,后端方面,我们首先要写一个实体类,专门用来定义分页

当前的页码数 currentPage;



package com.qf.pojo; 

import java.util.List; 

//自定义的分页组件的beanpage实体 

public class PageBean<T> { 

//当前的页码数 

private Integer currentPage; 

//每页显示的条数 

private Integer pageSize; 

//总页数:计算出来的 

private Integer totalPage; 

//总记录数 

private Integer totalcount; //select count(uid) from user; 

//分页列表数据 

private List<T> list; // select * from user limit; 

public PageBean() { 

}

public PageBean(Integer currentPage, Integer pageSize, Integer totalcount, 

List<T> list) { 

this.currentPage = currentPage; 

this.pageSize = pageSize; 

this.totalcount = totalcount; 

this.list = list; 

}public Integer getCurrentPage() { 

return currentPage; 

}

public void setCurrentPage(Integer currentPage) { 

this.currentPage = currentPage; 

}

public Integer getPageSize() { 

return pageSize; 

}

public void setPageSize(Integer pageSize) { 

this.pageSize = pageSize; 

}

public Integer getTotalPage() { 

return (totalcount%pageSize==0)?(totalcount/pageSize): 

(totalcount/pageSize+1); 

}

public void setTotalPage(Integer totalPage) { 

this.totalPage = totalPage; 

}

public Integer getTotalcount() { 

return totalcount; 

}

public void setTotalcount(Integer totalcount) { 

this.totalcount = totalcount; 

}

public List<T> getList() { 

return list; 

}

public void setList(List<T> list) { 

this.list = list; 

}

@Override 

public String toString() { 

return "PageBean{" + 

"currentPage=" + currentPage + 

", pageSize=" + pageSize + 

", totalPage=" + totalPage + 

", totalcount=" + totalcount + 

", list=" + list + 

'}'; 

} 

}

这样定义完一个实体类的分页类后,我们就可以写后端代码,通过sql语句来进行操作,获取各个属性,

public List<User> selectUserByPage(Integer currentPage, Integer pageSize) 

throws SQLException { 

QueryRunner qr=new QueryRunner(DruidUtils.getDataSource()); 

String sql="select * from user limit ?,?"; 

List<User> list = qr.query(sql, new BeanListHandler<User>(User.class), 

(currentPage-1)*pageSize,pageSize); 

return list; 

}

这个sql语句用来获取每一页的用户数据,当前的页数和每页的数量都是前端传来的数据

public int getTotalCount() throws SQLException { 

QueryRunner qr=new QueryRunner(DruidUtils.getDataSource()); 

String sql="select count(uid) from user"; 

//查询语句的方法 

Object obj = qr.query(sql, new ScalarHandler<>()); 

//将object转换成int 

String s=String.valueOf(obj); 

int count=Integer.parseInt(s); 

return count; 

}

此sql语句是为了获取一共有几条数据在数据库里,现在dao包里的方法已经写完了,现在去写service包里的方法

public PageBean<User> getAllUserByPage(Integer currentPage, Integer 

pageSize) { 

try {

//调用数据访问接口---先将针对用户的分页列表数据查询 

AdminDao adminDao=new AdminDaoImpl(); 

List<User> list = adminDao.selectUserByPage(currentPage, pageSize); 

//查询用户的总记录数 

int totalcount = adminDao.getTotalCount(); 

//通过造方法进行传参 

return new PageBean<User>(currentPage,pageSize,totalcount,list); 

} catch (SQLException e) { 

e.printStackTrace(); 

}

return null; 

} 

}

现在则要去书写控制端的代码,来完成后端和前端的数据交互

public class GetAllUserByPageServlet extends HttpServlet { 

protected void doGet(HttpServletRequest request, HttpServletResponse 

response) throws ServletException, IOException { 

String currentPaget=request.getParameter("currentPage"); 

String pageSize=request.getParameter("pageSize"); 

if(currentPaget==null || "".equals(currentPaget)){ 

currentPaget="1";//当前页码为1 

}

if(pageSize==null || "".equals(currentPaget)){ 

pageSize="3";//每页展示3 条数据 

}

int currentPage = Integer.parseInt(currentPaget) ; 

int psize = Integer.parseInt(pageSize) ; 

AdminServer adminServer=new AdminServiceImpl(); 

//调用管理员的接口 

PageBean<User> pageBean = adminServer.getAllUserByPage(currentPage, 

psize); 

System.out.println(pageBean); 

request.setAttribute("pageBean",pageBean); 

//你要跳转的页面 

request.getRequestDispatcher("/admin/user/user_list.jsp").forward(request,respo 

nse);

}

protected void doPost(HttpServletRequest request, HttpServletResponse 

response) throws ServletException, IOException { 

doGet(request,response); 

} 

}

现在后端的代码已经全部书写完了,接下来则只需要吧后端完成的数据给前端,进行前端的数据展示

<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<html>
<head>
    <title>Title</title>
    <script src="${pageContext.request.contextPath}/js/jquery-3.4.1.min.js"></script>
    <link href="${pageContext.request.contextPath}/css/bootstrap.min.css" rel="stylesheet">
    <script src="${pageContext.request.contextPath}/js/bootstrap.min.js"></script>
    <script>
        function  deletename(name) {
            var i= confirm("确定要删除嘛")
            if(i){
                window.location.href="${pageContext.request.contextPath}/deleteuser?username="+name;
            }
        }
        function dateupname(name){
            window.location.href="${pageContext.request.contextPath}/selectname?username="+name;
        }
    </script>
</head>
<body background="${pageContext.request.contextPath}/img/blue1(1)(1).jpg">
<c:if test="${not empty users}">
<table  class="table table-hover">
    <tr class="active">
        <th>用户名</th>
        <th>真实姓名</th>
        <th>性别</th>
        <th>操作</th>
    </tr>
<c:forEach items="${users.list}" var="user">
    <tr><td>${user.username}</td><td>${user.name}</td><td>${user.sex}</td><td><button class="btn btn-danger" id="delect" onclick="deletename('${user.username}')">删除</button><button class="btn btn-warning" id="dateup" onclick="dateupname('${user.username}')">修改</button></td></tr>
</c:forEach>
</table>
    <div style="margin: 0 0 0 500px"><span style="color: #2aabd2">共有${users.totalPage}</span>页
            <span>共有${users.totalCount}</span>数据
    </div>
    <div style="margin: 0 0 0 500px">
    <nav aria-label="Page navigation">
        <ul class="pagination">
            <c:if test="${users.currentPage==1}">
                <%--第一页不能在网上翻了,禁用状态  boostrap的组件样式--%>
                <li class="disabled">
                        <%--超链接失效--%>
                    <a href="javascript:void(0)" aria-label="Previous">
                        <span aria-hidden="true">&laquo;</span>
                    </a>
                </li>
            </c:if>
                <%--如果不是第一页的话--%>
            <c:if test="${users.currentPage!=1}">
                <li>
                    <a href="${pageContext.request.contextPath}/getpage?currentPage=${users.currentPage-1}&pageSize=3" aria-label="Previous">
                        <span aria-hidden="true">&laquo;</span>
                    </a>
                </li>
            </c:if>
            <c:forEach begin="1" end="${users.totalPage}" var="n">
                <c:if test="${users.currentPage==n}">
                    <li class="active"><a href="${pageContext.request.contextPath}/getpage?currentPage=${n}&pageSize=3">${n}</a></li>
                </c:if>
                <c:if test="${users.currentPage!=n}">
                    <li ><a href="${pageContext.request.contextPath}/getpage?currentPage=${n}&pageSize=3">${n}</a></li>
                </c:if>
            </c:forEach>
            <c:if test="${users.currentPage==users.totalPage}">
                <li class="disabled">
                    <a href="javascript:void(0)" aria-label="Next">
                        <span aria-hidden="true">&raquo;</span>
                    </a>
                </li>
            </c:if>
            <c:if test="${users.currentPage!=users.totalPage}">
                <li>
                    <a href="${pageContext.request.contextPath}/getpage?currentPage=${users.currentPage+1}&pageSize=3" aria-label="Next">
                        <span aria-hidden="true">&raquo;</span>
                    </a>
                </li>
            </c:if>
        </ul>
    </nav>
    </div>
</c:if>
</body>
</html>