这是从练手的小项目中扣出来的，请忽略许多和分页不相关的代码
-
思路
先设计前端页面，运用 Jquery 的 .ajax() 方法获取后端数据。给跳转按钮和分页链接添加点击事件,点击事件执行 load(pageNumber) 方法，形参为当前的页数。load 方法中执行 .ajax ()方法。第一次加载页面,默认执行load(1),以后每次点击获取当前页数，执行load()。后端分页对象转为json格式用的是 google的 gson 包
1. 设计前端页面
articleDetails.jsp
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html lang="en">
<head>
<title>咕噜噜</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="shortcut icon" href="image/logo.ico" type="image/x-icon" />
<script type="text/javascript" src="lib/jquery-3.3.1.min.js"></script>
<link rel="stylesheet" href="lib/bootstrap-3.3.7-dist/css/bootstrap.min.css">
<script src="lib/bootstrap-3.3.7-dist/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="css/main.css">
<script type="text/javascript" src="./lib/jquery-1.8.3.js"></script>
<script>
$(function () {
//初始化
load(1);
$("#pageNumber").val(1);
// 跳转按钮点击事件 获取输入页码 调用加载函数
$("#buttom").click(function () {
var pageNumber = parseInt($("#pageNumber").val());
var totalPage = parseInt($("#totalPage").text());
if (pageNumber > totalPage ){
alert("请输入合适的页码！！");
} else {
load(pageNumber);
}
});
$("#pageList").on("click",".jump",function(){
var currentPage = $(this).text();
if (currentPage == "«") {
$("#pageNumber").val(1);
load(1);
} else if (currentPage == "»") {
$("#pageNumber").val(parseInt($("#totalPage").text()));
load(parseInt($("#totalPage").text()))
} else {
$("#pageNumber").val(currentPage);
var pageNumber = parseInt($(this).text());
var totalPage = parseInt($("#totalPage").text());
if (pageNumber > totalPage ){
alert("请输入合适的页码！！");
} else {
load(pageNumber);
}
}
});
// 加载数据的函数
function load(pageNumber) {
$.ajax({
url:"${pageContext.request.contextPath }/ArticlesServlet",
type:"post",
dataType:"json",
data:{pageNumber:pageNumber},
success:function (data) {
// 每次重置数据
$("#articlesInfo").html("");
//追加数据 data.list表示需要遍历的对象 list必须是实体类 pageInfo 中的list属性名
// alert(data.articles);
$(data.articles).each(function (i,news) {
$("#articlesInfo").append("<tr><td><a href='"+news.content+"'>"+news.title+"</td><td>"+news.author+"</a></td></tr>");
});
$("#pageList").html("");
$("#pageList").append("<li><a href='#' class='jump'>«</a></li>");
// 总页数
var totalPage = parseInt(data.totalPage);
// 获取当前页数
var currentPage = parseInt(data.currentPage);
// alert(totalPage);
for (var i = 0;i < totalPage;i++) {
if (i+1 == currentPage) {
$("#pageList").append("<li><a href='#' class='jump active'>"+(i+1)+"</a></li>");
}else {
$("#pageList").append("<li><a href='#' class='jump'>"+(i+1)+"</a></li>");
}
}
$("#pageList").append("<li><a href='#' class='jump'>»</a></li>");
// 获取总页数
$("#totalPage").html(data.totalPage);
// 获取总文章数
$("#totalArticles").html(data.totalArticles);
}
});
// post有问题
/*$.post(
"${pageContext.request.contextPath }/ArticlesServlet",
{pageNumber:pageNumber},
function (data) {
var data = $.parseJSON(data);
// 每次重置数据
$("#articlesInfo").html("");
//追加数据 data.list表示需要遍历的对象 list必须是实体类 pageInfo 中的list属性名
$.each(data.list,function (i,news) {
alert("ddd");
if(!news.eq(null)){
$("#articlesInfo").appendChild("<tr><td>"+news.title+"</td><td>"+news.author+"</td></tr>");
}
});
$("#pageList").html("");
$("#pageList").append("<li><a href=\"#\">«</a></li>");
// 获取分页列表
$("#pageList").append("<li><a href=\"#\">»</a></li>");
}
);*/
}
});
</script>
</head>
<body>
<nav class="navbar navbar-inverse">
<div class="container-fluid">
<div class="navbar-header">
<a class="navbar-brand" href="#">咕噜噜</a>
</div>
<div class="collapse navbar-collapse" id="myNavbar">
<ul class="nav navbar-nav">
<li><a href="index.jsp">主页</a></li>
<li><a href="#">小玩意儿</a></li>
<c:if test="${empty user}">
<li><a href="#">联系我</a></li>
</c:if>
<c:if test="${!empty user}">
<li><a href="#">添加文章</a></li>
</c:if>
<li><a href="articleDetails.jsp">文章列表</a></li>
</ul>
<ul class="nav navbar-nav navbar-right">
<%-- 判断是否登录 --%>
<c:if test="${empty user}">
<li><a href="login_pc.jsp">登录</a></li>
<li><a href="register_pc.jsp">注册</a></li>
</c:if>
<c:if test="${!empty user}">
<li><a href="#">欢迎您：${user}</a></li>
<li><a href="${pageContext.request.contextPath }/LoginOutServlet">退出</a></li>
</c:if>
</ul>
</div>
</div>
</nav>
<div class="container">
<div class="row">
<div class="col-xs-2"></div>
<div class="col-xs-8">
<table class="table table-hover">
<thead>
<tr>
<th>标题</th>
<th>作者</th>
</tr>
</thead>
<tbody id="articlesInfo">
</tbody>
</table>
</div>
</div>
<div class="center">
<ul class="pagination" id="pageList">
</ul>
<div id="pageInfo">
<span> 共 </span>
<span id="totalPage"></span>
<span> 页</span>
<span> 共 </span>
<span id="totalArticles"></span>
<span> 条记录 </span>
<span>第 </span><input type="text" id="pageNumber" value=""><span> 页</span>
<button id="buttom">跳转</button>
</div>
</div>
</div>
</body>
</html>
main.css
#totalArticles{
color: #5d8bba;
}
#totalPage{
color: #5d8bba;
}
/* 输入文本大小 */
#pageNumber{
width: 20px;
height: 20px;
}
/* 居中样式 */
div.center {text-align: center;}
ul.pagination li a.active {
background-color: #337ab7;
color: white;
border: 1px solid #337ab7;
}
#pageInfo{
font-size: 15px;
}
下图是我构想的页面,文章列表和分页列表都由 bootstrap 完成，每页的文章为10。页面的动态数据有：当前页面、总文章数、总页数、文章信息。根据这些信息可以创建对应的 javaBean。
前端页面.png
注意点
-
Jquery的.text() .html()等方法获取的值为字符型，需要用praseInt()转换成整型 - 点击事件的监听函数，是再网页加载的时候就指定了对象，而通过
Jquery动态添加的元素，是不能匹配这个事件的。支持给动态元素和属性绑定事件的是live和on，其中live在JQUERY 1.7之后就不推荐使用了。现在主要用on，使用on的时候也要注意，on前面的元素也必须在页面加载的时候就存在于dom里面。 - 同理动态添加的代码无法匹配到类选择器定义的样式，需要用后代选择器
- 在
.ajax()方法中，必须写上dataType:"json"，否则无法获取返回的json数据，但post()方法添加后也会出现500错误，很懵逼。这个坑有空再填。
2. 根据设计的前端页面创建分页和文章的 JavaBean
Article
public class Article {
// 序号
private int number;
// 标题
private String title;
// 内容
private String content;
// 作者
private String author;
public int getNumber() {
return number;
}
public void setNumber(int number) {
this.number = number;
}
public String getTitle() {
return title;
}
public void setTitle(String title) {
this.title = title;
}
public String getContent() {
return content;
}
public void setContent(String content) {
this.content = content;
}
public String getAuthor() {
return author;
}
public void setAuthor(String author) {
this.author = author;
}
@Override
public String toString() {
return "Article{" +
"number=" + number +
", title='" + title + '\'' +
", content='" + content + '\'' +
", author='" + author + '\'' +
'}';
}
}
PageBean
// 分页
public class PageBean {
// 当前的页数
private Integer currentPage;
// 共多少页
private Integer totalPage;
// 多少记录
private Integer totalArticles;
// 当前页的文章
private List<Article> articles;
public Integer getCurrentPage() {
return currentPage;
}
public void setCurrentPage(Integer currentPage) {
this.currentPage = currentPage;
}
public Integer getTotalPage() {
return totalPage;
}
public void setTotalPage(Integer totalPage) {
this.totalPage = totalPage;
}
public Integer getTotalArticles() {
return totalArticles;
}
public void setTotalArticles(Integer totalArticles) {
this.totalArticles = totalArticles;
}
public List<Article> getArticles() {
return articles;
}
public void setArticles(List<Article> articles) {
this.articles = articles;
}
@Override
public String toString() {
return "PageBean{" +
"currentPage=" + currentPage +
", totalPage=" + totalPage +
", totalArticles=" + totalArticles +
", articles=" + articles +
'}';
}
}
3. 创建 Dao、Service、Servlet
这里只给出 servlet 的代码，其他查询操作很简单
package com.blog.Servlet;
import com.blog.Domain.PageBean;
import com.blog.Service.ArticlePageServiceImpl;
import com.google.gson.Gson;
import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import java.io.IOException;
import java.io.PrintWriter;
@WebServlet(name = "ArticlesServlet",urlPatterns = "/ArticlesServlet")
public class ArticlesServlet extends HttpServlet {
protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
// 设置编码
request.setCharacterEncoding("UTF-8");
response.setContentType("text/html;charset=utf-8");
String pageNumber = request.getParameter("pageNumber");
System.out.println("页码为"+pageNumber);
PageBean pageBean = new PageBean();
pageBean = new ArticlePageServiceImpl().getPageInfo(Integer.parseInt(pageNumber));
// 将 pageBean 封装成 json
Gson gson = new Gson();
String json = gson.toJson(pageBean);
System.out.println(json);
PrintWriter writer = response.getWriter();
writer.print(json); // 返回数据给前台
writer.close();
}
protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
}
}
注意点
-
response.setContentType("text/html;charset=utf-8");和request.setCharacterEncoding("UTF-8");一定不能忘记写，不然前端显示的数据会乱码 - 利用
dbUtils获取表格总记录数时用ScalarHandler
网友评论