JSP基于Bootstrap分页显示实例解析

时间:2021-05-26

首先介绍一款简单利落的分页利器:bootstrap-paginator,可以参考:Bootstrap Paginator分页插件使用方法详解这篇文章进行学习。
效果截图:

GitHub官方下载地址:https://github.com/lyonlai/bootstrap-paginator
下面就来详细介绍一下基于这款分页利器的JSP分页显示实现过程(注:相较于原网页我隐去了很多不必要的内容,本例只专注于分页显示的实现)

一、为什么需要分页显示?
这篇博文说得很透彻:分页技术原理与实现之分页的意义及方法(一)

二、JSP页面部分,这里直接在JSP页面中用JDBC连接SqlServer2005数据库查询数据(实际实现里不建议把复杂的业务逻辑封装在JSP页面中,JSP页面应当只是负责显示;对客户端的响应、业务逻辑调用、结果转发都应该由Servlet来完成)
代码如下:

<%@ page import="PaginationExample.*" %><%@ page import="java.util.*"%><%@ page import="java.sql.*"%><%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%><%! private static final int pageSize = 20; //设定每页显示的记录条数(当前为每页显示20条记录)%><% request.setCharacterEncoding("UTF-8"); //设定客户端提交给servlet的内容按UTF-8编码 response.setCharacterEncoding("UTF-8"); //设定servlet传回给客户端的内容按UTF-8编码 response.setContentType("text/html;charset=UTF-8"); //告知浏览器用UTF-8格式解析内容 String pageNoStr = request.getParameter("pageNoStr"); //接收客户端传递的要显示页数 int pageNo = 1; //要显示的页数 int totalPages = 1; //总页数 //检查、设置pageNo if (pageNoStr != null && !pageNoStr.equals("")) { try { pageNo = Integer.parseInt(pageNoStr); if (pageNo < 1) { //pageNo小于1时默认显示第一页 pageNo = 1; } } catch (NumberFormatException e) { //获取到的pageNo(当前页面数)不合法时,默认显示第一页 pageNo = 1; } } else { //其他未获取到pageNo的情况都默认显示第一页 pageNo = 1; } Connection totalConn = null; Statement totalStmt = null; ResultSet totalRs = null; try { totalConn = DBUtil.getConnection(); //生成sql语句 String sqlGetTotalPages = "select count(*) from alldata"; //获取总记录条数 totalStmt = totalConn.createStatement(); totalRs = totalStmt.executeQuery(sqlGetTotalPages); totalRs.next(); int countResult = totalRs.getInt(1); //取得总页数 totalPages = countResult % pageSize == 0 ? countResult / pageSize : (int)(countResult / pageSize) + 1; } catch (SQLException e) { System.out.println("历史记录查询出错,操作未完成!"); e.printStackTrace(); } finally { DBUtil.close(totalRs); DBUtil.close(totalStmt); DBUtil.close(totalConn); } if (pageNo > totalPages) { pageNo = totalPages; } List<Record> records = new ArrayList<Record>(); Connection conn = null; PreparedStatement pstmt = null; ResultSet rs = null; int startIndex = (pageNo - 1) * pageSize + 1; int endIndex = pageNo * pageSize; try { conn = DBUtil.getConnection(); String sql = "select * from (select row_number() over(order by data_taizhan_num, data_date asc) as 'num', * from alldata) as temp where num between " + startIndex + " and " + endIndex; pstmt = conn.prepareStatement(sql); rs = pstmt.executeQuery(); while (rs.next()) { //取出每条记录的数据,并将其封装成Record对象 Record r = new Record(); r.setTaizhan_num(rs.getString(2)); r.setDate(rs.getTimestamp(3)); r.setTem(rs.getString(4)); r.setHum(rs.getString(5)); r.setPa(rs.getString(6)); r.setRain(rs.getString(7)); r.setWin_dir(rs.getString(8)); r.setWin_sp(rs.getString(9)); records.add(r); //将封装好的Record对象放入列表容器中 } } catch (SQLException e) { System.out.println("查询出错,操作未完成!"); e.printStackTrace(); } finally { DBUtil.close(rs); DBUtil.close(pstmt); DBUtil.close(conn); }System.out.println(totalPages);System.out.println(pageNo); %><!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://.microsoft.sqlserver.jdbc.SQLServerDriver"); //载入数据库驱动 p.setUsername("sa"); //用于远程连接的用户名 p.setPassword("2003NianDeDiYiChangXue"); //密码 p.setJmxEnabled(true); p.setTestWhileIdle(false); p.setTestOnBorrow(true); p.setValidationQuery("SELECT 1"); p.setTestOnReturn(false); p.setValidationInterval(30000); p.setTimeBetweenEvictionRunsMillis(30000); p.setMaxActive(100); p.setInitialSize(10); p.setMaxWait(10000); p.setRemoveAbandonedTimeout(60); p.setMinEvictableIdleTimeMillis(30000); p.setMinIdle(10); p.setLogAbandoned(true); p.setRemoveAbandoned(true); p.setJdbcInterceptors( "org.apache.tomcat.jdbc.pool.interceptor.ConnectionState;"+ "org.apache.tomcat.jdbc.pool.interceptor.StatementFinalizer"); ds = new DataSource(); ds.setPoolProperties(p); } private DBUtil() {} /** * 获取一个数据库连接(Connection); * @return Database Connection */ public static Connection getConnection() { Connection conn = null; try { conn = ds.getConnection(); } catch (SQLException e) { e.printStackTrace(); } return conn; } /** * 关闭传入的Connection; * @param conn 待关闭的Connection */ public static void close(Connection conn) { try { if (conn != null) { conn.close(); conn = null; } } catch (SQLException e) { e.printStackTrace(); } } /** * 关闭传入的Statement; * @param stmt 待关闭的Statement */ public static void close(Statement stmt) { try { if (stmt != null) { stmt.close(); stmt = null; } } catch (SQLException e) { e.printStackTrace(); } } /** * 关闭传入的ResultSet; * @param rs 待关闭的ResultSet */ public static void close(ResultSet rs) { try { if (rs != null) { rs.close(); rs = null; } } catch (SQLException e) { e.printStackTrace(); } } }

四、补充说明:
①:SQLServer实现分页时需借助ROW_NUMBER()函数,以生成一个单独记录了行号的列,方便后面分页时取出对应行号区间段的记录。例:

看到了吧,最前面多了一列存储了行号的字段名为num的列;
(如果表内主键id是自动递增的数字的话,也可以直接用id来分段取出记录,但前提是id必须连续且自动递增)
关于更多ROW_NUMBER()函数实现分页的信息请参考:SQL Server使用row_number分页的实现方法

②:MySQL分页实现起来简单很多,直接使用limit关键字即可。例:
select * from table1 order by id asc limit 3, 2意即将表table1中的数据按id值排序(升序)后,从第三行开始,取后面的两行记录(即第四、五行记录)
③:关于bootstrap-paginator的具体使用方法可以参考官方的文档(位于解压后的document文件夹内),官方文档写得很棒,简单易懂。
在使用时要注意对于bootstrap V3版本来说,要使用<ul>标签来显示bootstrap-paginator,并在配置项里注明所用bootstrap的版本(参考我jsp示例页面的写法)。
(bootstrap V2版本直接使用示例文档中的<div>标签即可)
④:分页常用公式:设要显示的页数为 n ,每页显示 m 条数据,则(数据库中)待取数据的开始位置(即jsp示例中的startIndex)为: (n-1)*m+1,终止位置(endIndex)为:n*m

如果大家还想深入学习,可以点击这里进行学习,再为大家附3个精彩的专题:

Bootstrap学习教程

Bootstrap实战教程

Bootstrap插件使用教程

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持。

声明:本页内容来源网络,仅供用户参考;我单位不保证亦不表示资料全面及准确无误,也不保证亦不表示这些资料为最新信息,如因任何原因,本网内容或者用户因倚赖本网内容造成任何损失或损害,我单位将不会负任何法律责任。如涉及版权问题,请提交至online#300.cn邮箱联系删除。

相关文章