zoukankan      html  css  js  c++  java
  • 分页(将数据库中的多条数据一页一页的显示在jsp页面中)

    一、显示数据库中的多条数据为什么要用分页

        在真正的开发中,数据库中所存储的数据绝对不像我们平时所写的那样,仅仅有几条数据,而是有几十条甚至上百条,像淘宝京东的用户把都是上几十万甚至百万的。如果这时候在将所有的数据都显示出来那肯定是不现实的,第一、浏览器的页面就那么大,肯定显示不全;第二、一次将这些数据全部查询出来再进行操作,那对于整个数据库的消耗那是相当大的。

        因此,实际开发中使用分页来显示数据是十分有必要的。话不多说,进入今天咱们的话题:分页的具体实现步骤。(这里以我自己做的一个小程序为例)

    二、让我们先来看一下分页之后的效果。

     

            这是我自己做的一个jsp显示出来的,没有加多少css样式,很简单,有点丑,各位就凑合看吧,毕竟今天咱们的重点不是这!    

    从这张图中我么你可以看出来,本页面实现了分页的功能,一共分为7页,每页5条记录。这里面的超链接以及文本框都是可以操作的。

     三、具体的实现步骤

        1、首先你需要有一个类,Student.java用来生成学生的各种属性以及它们的get、set方法。还需要有一个page类,用来存储Student对象列表以及总记录数、当前页、每页的记录条数等属性以及它们的get、set方法。如图:

    加了注释的那两个属性我们不可以对其进行set,因此只有它们的get方法。

    之所以这么写这两个的get方法想必不用我多说了吧,稍微懂点脑子就能计算出来。

        2、你需要连接数据库

        3、进入重点部分,即Dao层的编写(这里只说与分页有关的)

    public List<Student> limitAll(int index,int pageSize){
    		Connection conn=DBUtils.getConnection();
    		String sql="select * from student limit ?,?";
    		PreparedStatement ps = null;
    		List<Student> list = null;
    		ResultSet rs = null;
    		try {
    			ps=conn.prepareStatement(sql);
    			ps.setInt(1, index);
    			ps.setInt(2, pageSize);
    			rs = ps.executeQuery();
    			list=new ArrayList<Student>();
    			while(rs.next()){
    				Student student=new Student();
    				student.setId(rs.getInt(1));
    				student.setName(rs.getString(2));
    				student.setNumber(rs.getString(3));
    				student.setSchool(rs.getString(4));
    				student.setEmail(rs.getString(5));
    				list.add(student);
    			}
    		} catch (SQLException e) {
    			// TODO Auto-generated catch block
    			e.printStackTrace();
    		}finally{
    			try {
    				DBUtils.colse(conn, ps, rs);
    			} catch (SQLException e) {
    				// TODO Auto-generated catch block
    				e.printStackTrace();
    			}
    		}
    		return list;
    	}
    	
    	public int getTotalRecord(){
    		Connection conn=DBUtils.getConnection();
    		String sql="select count(*) as total from student";
    		PreparedStatement ps = null;
    		ResultSet rs = null;
    		int total=0;
    		try {
    			ps=conn.prepareStatement(sql);
    			rs = ps.executeQuery();
    			if(rs.next()){
    				total=rs.getInt("total");
    			}
    		} catch (SQLException e) {
    			// TODO Auto-generated catch block
    			e.printStackTrace();
    		}finally{
    			try {
    				DBUtils.colse(conn, ps, rs);
    			} catch (SQLException e) {
    				// TODO Auto-generated catch block
    				e.printStackTrace();
    			}
    		}
    		return total;
    	}
    

      select * from student limit ?,?;

    这句代码是数据库中的分页查询的语句。第一个“?”为索引值,第二个“?”为每页的记录数。
    例如:select * from student limit 0,3 便是输出表中的前三条数据。
    第一个函数通过输入索引值和每页的记录数,返回一个Student的List;第二个函数计算出此表的总记录数。
    4、service层的编写:
    public Page<Student> limitAll(int pageNumber,int pageSize){
    		int totalRecord=studentDao.getTotalRecord();
    		Page<Student> page=new Page<Student>();
    		page.setPageSize(pageSize);
    		page.setTotalRecord(totalRecord);
    		if(pageNumber<1){
    			pageNumber=1;
    		}else if(pageNumber>page.getTotalPage()){
    			pageNumber=page.getTotalPage();
    		}
    		page.setPageNumber(pageNumber);
    		List<Student> list=studentDao.limitAll(page.getIndex(), pageSize);
    		page.setData(list);
    		return page;
    	}
    

      通过这一部分的编写,我们可以在servlet中只需输入两个参数:当前页和每页的记录条数。就能将整个分页后当前页student的List得到。

    5、Servlet层的编写

    private static int pagesize=5;
    private static int pagenum=1;

    这里我们声明两个static的变量,即默认显示的当前页为第一页,每页的记录条数为5条。

    通过:Page<Student> page=service.limitAll(pagenum, pagesize);

    我们可以生成当前五条记录的一个学生信息的列表。当然这里你需要有一个登录页面来登录进去。此时我们就得到了开始的那个页面。

    6、对jsp页面的编写:

    <body>
    <div id="find">
    <form action="Servlet?oper=findByNameOrId" method="post">
        <input type="text" name="find">
        <input type="submit" value="查找">
    </form>
    </div>
    <div id="tablee">
    <table border="1" align="center">
        <tr>
            <th>姓名</th>
            <th>学号</th>
            <th>学校</th>
            <th>邮箱</th>
            <th colspan="2">操作</th>
        </tr>
        <c:forEach items="${page.data}" var="student">
        <tr>
            <td>${student.name}</td>
            <td>${student.number}</td>
            <td>${student.school}</td>
            <td>${student.email}</td>
            <td><a href="Servlet?id=${student.id}&oper=update&fnum=two&pagenum=${page.pageNumber}">修改</a></td>
            <td><a href="Servlet?id=${student.id}&oper=delete&fnum=two&pagenum=${page.pageNumber}">删除</a></td>
        </tr>
        </c:forEach>
        <tr>
            <th colspan="4"><a href="Servlet?oper=register&fnum=two&pagenum=${page.pageNumber}">添加</a></th>
        </tr>
    </table>
    

      这是整个table,包含学生信息和修改,删除,添加等超链接。

    <div id="page">
    <a href="Servlet?pagenum=1&oper=login&fnum=two&fl=1">首页</a> 
    <a href="Servlet?pagenum=${page.pageNumber-1}&oper=login&fl=1&fnum=two&fl=1">上一页</a>
    <c:choose>
        <c:when test="${page.totalPage<=5}">
            <c:forEach begin="1" end="${page.totalPage}" var="num">
        <c:if test="${page.pageNumber==num }">
            [${num}] 
        </c:if>
        <c:if test="${page.pageNumber!=num}">
           <a href="Servlet?pagenum=${num}&fnum=two&oper=login&fl=1"> ${num}</a>
        </c:if>
    </c:forEach>
        </c:when>
        <c:when test="${page.totalPage>5}">
            <c:if test="${page.pageNumber<=3}">
                 <c:set var="begin" value="1"></c:set>
                <c:set var="end" value="5"></c:set>
                <c:forEach begin="${begin}" end="${end}" var="num">
                    <c:if test="${page.pageNumber==num }">
                    [${num}] 
                    </c:if>
                    <c:if test="${page.pageNumber!=num}">
                    <a href="Servlet?pagenum=${num}&fnum=two&oper=login&fl=1"> ${num}</a>
                    </c:if>
                </c:forEach>
            </c:if>
            <c:if test="${page.pageNumber>3}">
                <c:set var="begin" value="${page.pageNumber-2}"></c:set>
                <c:set var="end" value="${page.pageNumber+2}"></c:set>
                    <c:if test="${page.pageNumber>=page.totalPage-2}">
                        <c:set var="begin" value="${page.totalPage-4}"></c:set>
                           <c:set var="end" value="${page.totalPage}"></c:set>
                         <c:forEach begin="${begin}" end="${end}" var="num">
                          <c:if test="${page.pageNumber==num }">
                         [${num}] 
                         </c:if>
                         <c:if test="${page.pageNumber!=num}">
                         <a href="Servlet?pagenum=${num}&fnum=two&oper=login&fl=1"> ${num}</a>
                         </c:if>
                        </c:forEach>	                      
                    </c:if>
                    <c:if test="${page.pageNumber<page.totalPage-2}">
                       <c:forEach begin="${begin}" end="${end}" var="num">
    	                     <c:if test="${page.pageNumber==num }">
    	                    [${num}] 
    	                    </c:if>
    	                    <c:if test="${page.pageNumber!=num}">
    	                    <a href="Servlet?pagenum=${num}&fnum=two&oper=login&fl=1"> ${num}</a>
    	                    </c:if>
                        </c:forEach>
                    </c:if>  
            </c:if>
        </c:when>
    </c:choose>
    
    <a href="Servlet?pagenum=${page.pageNumber+1}&fnum=two&oper=login&fl=1">下一页</a> 
    <a href="Servlet?pagenum=${page.totalPage}&fnum=two&oper=login&fl=1">末页</a>
    	共${page.totalPage}页   ${page.totalRecord}条记录  
    	去第<input type="text" id="num">页
    	<input type="button" value="确定" id="btn_id">
    	<script type="text/javascript">
        $("#btn_id").click(function(){
        	var num1=$("#num").val();
        	window.location="Servlet?oper=login&fl=1&fnum=two&pagenum="+num1;
        });
    </script>
    </div>

    这是显示table下面关于分页的显示以及超链接代码。
    说道这,有关分页的特别核心的内容已经说完。剩下的代码就需要各位小伙伴们自己去写了。
    如果还有不懂的地方或者还需要完整的代码可以留言!

     

  • 相关阅读:
    3.16
    3.8
    3.7
    3.6
    3.5
    3.3
    3.2
    《机器学习十讲》学习报告一
    机器学习-集成算法
    机器学习-基于核的算法
  • 原文地址:https://www.cnblogs.com/of-fanruice/p/7391487.html
Copyright © 2011-2022 走看看