实现分页的效果:
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%> <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <title>Insert title here</title> </head> <body> <table border="1px" width="100%" > <thead> <tr> <th>序号</th> <th>id</th> <th>姓名</th> <th>手机号</th> <th>地址</th> <th>操作</th> </tr> </thead> <tbody> <tr> <td>1</td> <td>00000001</td> <td>小明</td> <td>1101346401</td> <td>北京</td> <td>查看 修改 删除</td> </tr> </tbody> </table> <div style="text-align:center; margin-top:10px"> <input type="button" value="上一页"> <input type="button" value="下一页"> </div> </body> </html>
分页查询原理
在交互式应用程序中,当数据量很大时,如果一次性把所需数据全部从数据库中查询出来,不仅非常耗费时间,而且还会消耗大量的内存,导致用户操作的延时,严重影响系统的可用性。因此,为了降低系统的响应时间,提高系统的性能,往往会使用分页机制,即不是把用户所需的数据一次性全部查找出来,而是把数据分成很多的页。每一页只包含指定的记录数,在查询时根据需求每次只查找一页或多页的数据而不是所有的数据。由于采用分页机制使得查询的结果集中数据量减少了,同时也降低了内存的消耗,因此可以显著降低响应时间,有助于提高系统的可用性,增强用户体验。
语法
用SQL语句实现分页(以MySQL为例,可以使用limit关键字来实现),语法如下:
Select *from tableName where 条件 limit begin,count
第一个参数(begin)代表查询开始的地方,第二个参数(count)代表每页显示多少条数据。需要注意的是,第一页用0表示。
使用eclipse工具搭建的web工程项目
结构如下:
定义一个studentListFrag.jsp,其中只返回table表
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%> <table border="1px" width="100%"> <thead> <tr> <th>序号</th> <th>id</th> <th>姓名</th> <th>手机号</th> <th>地址</th> <th>操作</th> </tr> </thead> <tbody> <tr> <td>1</td> <td>00000001</td> <td>小明</td> <td>1101346401</td> <td>北京</td> <td>查看 修改 删除</td> </tr> </tbody> </table>
使用异步
然后发送异步,把页面返回过来,返回静态页面---返回的是frag.jsp中table标签组成的数据,然后将数据放在div标签中
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%> <% String path = request.getContextPath(); pageContext.setAttribute("path", path); %> <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <title>Insert title here</title> <script type="text/javascript" src="${path }/js/jquery-1.8.3.js"></script> <script type="text/javascript"> let pageNo = 1; let pageTotal; function up(){ if (pageNo == 1) { alert("已经是第一页了"); return; } pageNo --; page(); } function down(){ if (pageTotal == pageNo) { alert("已经是最后一页了"); return; } pageNo ++; page(); } function page(){ const object={ url:"${path}/student/paging.do?pageNo="+pageNo, success:function(data){ $("#showData").empty(data); $("#showData").append(data); } } $.ajax(object); } </script> &