這是從練手的小項(xiàng)目中扣出來的，請忽略許多和分頁不相關(guān)的代碼
-
思路
先設(shè)計(jì)前端頁面，運(yùn)用 Jquery 的 .ajax() 方法獲取后端數(shù)據(jù)。給跳轉(zhuǎn)按鈕和分頁鏈接添加點(diǎn)擊事件,點(diǎn)擊事件執(zhí)行 load(pageNumber) 方法，形參為當(dāng)前的頁數(shù)。load 方法中執(zhí)行 .ajax ()方法。第一次加載頁面,默認(rèn)執(zhí)行load(1),以后每次點(diǎn)擊獲取當(dāng)前頁數(shù)，執(zhí)行load()。后端分頁對象轉(zhuǎn)為json格式用的是 google的 gson 包
1. 設(shè)計(jì)前端頁面
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);
// 跳轉(zhuǎn)按鈕點(diǎn)擊事件 獲取輸入頁碼 調(diào)用加載函數(shù)
$("#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);
}
}
});
// 加載數(shù)據(jù)的函數(shù)
function load(pageNumber) {
$.ajax({
url:"${pageContext.request.contextPath }/ArticlesServlet",
type:"post",
dataType:"json",
data:{pageNumber:pageNumber},
success:function (data) {
// 每次重置數(shù)據(jù)
$("#articlesInfo").html("");
//追加數(shù)據(jù) data.list表示需要遍歷的對象 list必須是實(shí)體類 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>");
// 總頁數(shù)
var totalPage = parseInt(data.totalPage);
// 獲取當(dāng)前頁數(shù)
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>");
// 獲取總頁數(shù)
$("#totalPage").html(data.totalPage);
// 獲取總文章數(shù)
$("#totalArticles").html(data.totalArticles);
}
});
// post有問題
/*$.post(
"${pageContext.request.contextPath }/ArticlesServlet",
{pageNumber:pageNumber},
function (data) {
var data = $.parseJSON(data);
// 每次重置數(shù)據(jù)
$("#articlesInfo").html("");
//追加數(shù)據(jù) data.list表示需要遍歷的對象 list必須是實(shí)體類 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="#">聯(lián)系我</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>標(biāo)題</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">跳轉(zhuǎn)</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;
}
下圖是我構(gòu)想的頁面,文章列表和分頁列表都由 bootstrap 完成，每頁的文章為10。頁面的動(dòng)態(tài)數(shù)據(jù)有：當(dāng)前頁面、總文章數(shù)、總頁數(shù)、文章信息。根據(jù)這些信息可以創(chuàng)建對應(yīng)的 javaBean。
前端頁面.png
注意點(diǎn)
-
Jquery的.text() .html()等方法獲取的值為字符型，需要用praseInt()轉(zhuǎn)換成整型 - 點(diǎn)擊事件的監(jiān)聽函數(shù)，是再網(wǎng)頁加載的時(shí)候就指定了對象，而通過
Jquery動(dòng)態(tài)添加的元素，是不能匹配這個(gè)事件的。支持給動(dòng)態(tài)元素和屬性綁定事件的是live和on，其中live在JQUERY 1.7之后就不推薦使用了。現(xiàn)在主要用on，使用on的時(shí)候也要注意，on前面的元素也必須在頁面加載的時(shí)候就存在于dom里面。 - 同理動(dòng)態(tài)添加的代碼無法匹配到類選擇器定義的樣式，需要用后代選擇器
- 在
.ajax()方法中，必須寫上dataType:"json"，否則無法獲取返回的json數(shù)據(jù)，但post()方法添加后也會(huì)出現(xiàn)500錯(cuò)誤，很懵逼。這個(gè)坑有空再填。
2. 根據(jù)設(shè)計(jì)的前端頁面創(chuàng)建分頁和文章的 JavaBean
Article
public class Article {
// 序號
private int number;
// 標(biāo)題
private String title;
// 內(nèi)容
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 {
// 當(dāng)前的頁數(shù)
private Integer currentPage;
// 共多少頁
private Integer totalPage;
// 多少記錄
private Integer totalArticles;
// 當(dāng)前頁的文章
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. 創(chuàng)建 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 {
// 設(shè)置編碼
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); // 返回?cái)?shù)據(jù)給前臺(tái)
writer.close();
}
protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
}
}
注意點(diǎn)
-
response.setContentType("text/html;charset=utf-8");和request.setCharacterEncoding("UTF-8");一定不能忘記寫，不然前端顯示的數(shù)據(jù)會(huì)亂碼 - 利用
dbUtils獲取表格總記錄數(shù)時(shí)用ScalarHandler
