前端实现用ligerui实现分页，感觉用框架确实简单，闲着无聊，模拟着liger的分页界面实现了一遍（只要是功能，样式什么无视）
这里用基础的三层架构+servlet+jsp实现，思路很简单，把所有分页相关信息写入到一个pagebean类里面，service返回这个bean类，每次分页查询时都从该bean里查找信息。只是其中的细节问题比较繁琐，如边界处理（前端和后台边界都要处理），下拉框跳转后要显示当前页等等
这是ligerui实现的分页样式（实现过程我的上一篇博客有写：）
模拟实现过程：
目录结构
数据库（mysql）
model层,一个数据库对应的model（blog），还有一个pagebean(blogpage)
我要评论
import java.sql.date;
public class blog {
private int id;
private int category_id;
private string title;
private string content;
private date created_time;
//getter和setter方法
@override
public string tostring() {
return "blog [id=" + id + ", category_id=" + category_id + ", title=" + title + ", content=" + content
+ ", created_time=" + created_time + "]";
}
}
public class blogpage {
private list<blog> pagerecord;//每页记录
private int pageno;//当前页
private int pagenostart;//每页开始索引
private int pagesize=5;//每页多少数据
private int totalrecord;//总记录数
private int totalpage;//总页数
public blogpage(int pageno,int totalrecord){
//pageno totalrecord都可以当做已有信息
this.totalrecord=totalrecord;
//计算总页数
totalpage=(totalrecord%pagesize==0)?totalrecord/pagesize:totalrecord/pagesize+1;
//pageno的边界处理
if(pageno<=1)
this.pageno=1;
else if(pageno>=totalpage)
this.pageno=totalpage;
else
this.pageno=pageno;
//计算每页开始索引，即每页第一个数据的索引，用于分页查询
pagenostart=(this.pageno-1)*pagesize;
}
public int getpagenostart() {
return pagenostart;
}
public void setpagenostart(int pagenostart) {
this.pagenostart = pagenostart;
}
public list<blog> getpagerecord() {
return pagerecord;
}
public void setpagerecord(list<blog> pagerecord) {
this.pagerecord = pagerecord;
}
public int getpageno() {
return pageno;
}
public void setpageno(int pageno) {
this.pageno = pageno;
}
public int getpagesize() {
return pagesize;
}
public void setpagesize(int pagesize) {
this.pagesize = pagesize;
}
public int gettotalrecord() {
return totalrecord;
}
public void settotalrecord(int totalrecord) {
this.totalrecord = totalrecord;
}
public int gettotalpage() {
return totalpage;
}
public void settotalpage(int totalpage) {
this.totalpage = totalpage;
}
}
dao层
jdbcutil封装了jdbc的连接和释放操作
public class jdbcutil {
private static string url = "jdbc:mysql://localhost:3306/blogs_stu";
private static string username = "root";
private static string password = "";
static {
try {
class.forname("com.mysql.jdbc.driver");
} catch (exception e) {
e.printstacktrace();
}
}
public static connection getconnection(){
connection conn;
try {
conn= drivermanager.getconnection(url, username, password);
return conn;
} catch (sqlexception e) {
e.printstacktrace();
}
return null;
}
public static void release(resultset rs,preparedstatement ps,connection conn){
if(rs!=null){
try {
rs.close();
} catch (sqlexception e) {
e.printstacktrace();
}
}
if(ps!=null){
try {
ps.close();
} catch (sqlexception e) {
e.printstacktrace();
}
}
if(conn!=null){
try {
conn.close();
} catch (sqlexception e) {
e.printstacktrace();
}
}
}
}
public class blogdao {
//每页的记录，传入每页开始索引和每页大小用于分页，即limit的两个参数（mysql分页用limit）
public list<blog> getpagerecord(int pagenostart, int pagesize) {
connection conn = jdbcutil.getconnection();
preparedstatement ps = null;
resultset rs = null;
string sql = "select * from blog limit ?,?";
list<blog> list = new arraylist<blog>();
try {
ps = conn.preparestatement(sql);
ps.setint(1, pagenostart);
ps.setint(2, pagesize);
rs = ps.executequery();
while (rs.next()) {
blog blog = new blog();
blog.setid(rs.getint("id"));
blog.setcategory_id(rs.getint("category_id"));
blog.settitle(rs.getstring("title"));
blog.setcontent(rs.getstring("content"));
blog.setcreated_time(rs.getdate("created_time"));
list.add(blog);
}
return list;
} catch (sqlexception e) {
e.printstacktrace();
} finally {
jdbcutil.release(rs, ps, conn);
}
return null;
}
//总记录数
public int gettotal() {
connection conn = jdbcutil.getconnection();
preparedstatement ps = null;
resultset rs = null;
try {
ps = conn.preparestatement("select count(*) from blog");
rs = ps.executequery();
if (rs.next()) {
return rs.getint(1);
}
} catch (sqlexception e) {
e.printstacktrace();
} finally {
jdbcutil.release(rs, ps, conn);
}
return 0;
}
}
service层
public class blogservice {
blogdao blogdao = new blogdao();
//返回pagebean,所有分页需要的信息都去pagebean里查找
public blogpage findpagerecord(int pageno) {
int totalrecord = blogdao.gettotal();
blogpage blogpage = new blogpage(pageno, totalrecord);
list<blog> list = blogdao.getpagerecord(blogpage.getpagenostart(),blogpage.getpagesize());
blogpage.setpagerecord(list);
return blogpage;
}
}
servlet类
@webservlet("/blogsplitservlet")
public class blogsplitservlet extends httpservlet {
public void doget(httpservletrequest request, httpservletresponse response) throws servletexception, ioexception {
request.setcharacterencoding("utf-8");
response.setcontenttype("text/html; charset=utf-8");
string pagenostr=request.getparameter("pageno");
//首次访问servletpagenostr为null，给一个初始值，即默认访问第一页
int pageno=1;
if(pagenostr!=null)
pageno=integer.parseint(pagenostr);
blogservice service=new blogservice();
blogpage blogpage=service.findpagerecord(pageno);
request.setattribute("blogpage", blogpage);
request.getrequestdispatcher("/blogpage.jsp").forward(request, response);
}
public void dopost(httpservletrequest request, httpservletresponse response) throws servletexception, ioexception {
doget(request, response);
}
}
这样所有的分页信息就封装到pagebean里了
jsp实现只需要将pagebean里的信息取出来就行了
下面给出我的jsp实现（模拟ligerui）
<%@ page language="java" contenttype="text/html; charset=utf-8"
pageencoding="utf-8"%>
<%@page import="java.util.*,model.blog,model.blogpage"%>
<!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">
window.onload = function() {
//保证select的option与当前页显示一致
select = document.getelementbyid("select");
pageno = '${blogpage.pageno}';
select.options[pageno - 1].selected = 'selected';
}
//select下拉列表跳转
function selectjump() {
var pageno = select.selectedindex + 1;
window.location.href = "http://localhost/jsppagesplit/blogsplitservlet?pageno="
+ pageno;
}
//text跳转，onblur事件，输入框失去焦点是发生
function textjump() {
var pageno = document.getelementbyid("text").value;
window.location.href = "http://localhost/jsppagesplit/blogsplitservlet?pageno="
+ pageno;
}
</script>
</head>
<body>
<%
blogpage blogpage = (blogpage) request.getattribute("blogpage");
list<blog> list = blogpage.getpagerecord();
// 尾页填充空白行，若不填充，尾页表格tr行数与前面不一致很难看
if (list.size() < blogpage.getpagesize()) {
for (int i = list.size(); i < blogpage.getpagesize(); i++)
list.add(null);
}
%>
<div style="width: 50%; height: 400px">
<table border="1" cellspacing="0" width="100%" bgcolor="#cef0c5">
<tr height="40px">
<td>id</td><td>标题</td><td>内容</td><td>创建时间</td>
</tr>
<%
for (blog blog : list) {
if (blog != null) {
%>
<tr height="50px">
<td width="10%"><%=blog.getid()%></td>
<td width="20%"><%=blog.gettitle()%></td>
<td width="40%"><%=blog.getcontent()%></td>
<td width="30%"><%=blog.getcreated_time()%></td>
</tr>
<!-- 尾页空白行填充 -->
<%} else {%>
<tr height="50px">
<td width="10%"></td>
<td width="20%"></td>
<td width="40%"></td>
<td width="30%"></td>
</tr>
<%}}%>
</table>
<div style="height:50px;background-color: #4b7db3;line-height: 40px;">
<!-- select下拉框 -->
<select id="select">
<%for (int i = 1; i <= blogpage.gettotalpage(); i++) {%>
<option onclick="selectjump()"><%=i%></option>
<%}%>
</select>
<a href="${pagecontext.request.contextpath}/blogsplitservlet?pageno=1">首页</a>
<a href="${pagecontext.request.contextpath}/blogsplitservlet?pageno=<%=blogpage.getpageno()-1<1?blogpage.getpageno():blogpage.getpageno()-1%>">上一页</a>
<input type="text" id="text" size="1px" value="${blogpage.pageno}" onblur="textjump()">/${blogpage.totalpage}
<a href="${pagecontext.request.contextpath}/blogsplitservlet?pageno=<%=blogpage.getpageno()+1>blogpage.gettotalpage()?blogpage.getpageno():blogpage.getpageno()+1%>">下一页</a>
<a href="${pagecontext.request.contextpath}/blogsplitservlet?pageno=<%=blogpage.gettotalpage()%>">尾页</a>
<div style="float: right;">
显示从${blogpage.pagenostart+1}到${blogpage.pageno==blogpage.totalpage?blogpage.totalrecord:blogpage.pagesize},
共${blogpage.totalrecord}条. 每页显示${blogpage.pagesize}条
</div>
</div>
</div>
</body>
</html>
这是最后的样子，样式粗略的调了下，功能跟ligerui默认的分页一模一样
将jsp中代码改为标签（jstl，需引入相应的jar包）并将jsp中的尾页补白放在servlet中后
servlet中加入
// 尾页填充空白行，若不填充，尾页表格tr行数与前面不一致很难看
list<blog> list = blogpage.getpagerecord();
if (list.size() < blogpage.getpagesize()) {
for (int i = list.size(); i < blogpage.getpagesize(); i++)
list.add(null);
}
blogpage.setpagerecord(list);
jsp页面
<%@ page language="java" contenttype="text/html; charset=utf-8"
pageencoding="utf-8"%>
<%@page import="java.util.*,model.blog,model.blogpage"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<!doctype html public "-//w3c//dtd html 4.01 transitional//en" "http://www.w3.org/tr/html4/loose.dtd">
<html>
<head>
<title>insert title here</title>
<script type="text/javascript">
//select下拉列表跳转
function selectjump() {
var select = document.getelementbyid("select");
var pageno = select.selectedindex + 1;
window.location.href = "http://localhost/jsppagesplit/blogsplitservlet?pageno="
+ pageno;
}
//text跳转，onblur事件，输入框失去焦点时发生
function textjump() {
var pageno = document.getelementbyid("text").value;
window.location.href = "http://localhost/jsppagesplit/blogsplitservlet?pageno="
+ pageno;
}
</script>
</head>
<body>
<div style="width: 50%; height: 400px">
<table border="1" cellspacing="0" width="100%" bgcolor="#cef0c5">
<tr height="40px">
<td>id</td><td>标题</td><td>内容</td><td>创建时间</td>
</tr>
<c:foreach items="${blogpage.pagerecord}" var="c" varstatus="vs">
<c:if test="${c!=null}">
<tr height="50px">
<td width="10%">${c.id}</td>
<td width="20%">${c.title}</td>
<td width="40%">${c.content}</td>
<td width="30%">${c.created_time}</td>
</tr>
</c:if>
<!-- 尾页空白行填充 -->
<c:if test="${c==null}">
<tr height="50px">
<td width="10%"></td>
<td width="20%"></td>
<td width="40%"></td>
<td width="30%"></td>
</tr>
</c:if>
</c:foreach>
</table>
<div style="height:50px;background-color: #4b7db3;line-height: 40px;">
<!-- select下拉框 -->
<select id="select">
<c:foreach begin="1" end="${blogpage.totalpage}" var="i">
<option value="${i}" onclick="selectjump()" ${blogpage.pageno==i?'selected="selected"':''}>${i}</option>
</c:foreach>
</select>
<a href="${pagecontext.request.contextpath}/blogsplitservlet?pageno=1">首页</a>
<a href="${pagecontext.request.contextpath}/blogsplitservlet?pageno=${blogpage.pageno-1<1?blogpage.pageno:blogpage.pageno-1}">上一页</a>
<input type="text" id="text" size="1px" value="${blogpage.pageno}" onblur="textjump()">/${blogpage.totalpage}
<a href="${pagecontext.request.contextpath}/blogsplitservlet?pageno=${blogpage.pageno+1>blogpage.totalpage?blogpage.pageno:blogpage.pageno+1}">下一页</a>
<a href="${pagecontext.request.contextpath}/blogsplitservlet?pageno=${blogpage.totalpage}">尾页</a>
<div style="float: right;">
显示从${blogpage.pagenostart+1}到${blogpage.pageno==blogpage.totalpage?blogpage.totalrecord:blogpage.pagesize},
共${blogpage.totalrecord}条. 每页显示${blogpage.pagesize}条
</div>
</div>
</div>
</body>
</html>
实际运用中可以根据需求编写jsp页面，但是后台代码基本是通用的
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持移动技术网。
如对本文有疑问， 点击进行留言回复！！
SpringBoot引用阿里easyexcel，Excel导出返回浏览器下载
HashMap、Hashtable、ConcurrentHashMap三者间的异同
解决RecycleView 中Item包含Edittext时，滑动view复用导致数据错乱的问题
多线程、同步工作原理、死锁案例、Lock接口、线程的生命周期的讲解及实现
网友评论