5、jQueryAjax案例：分頁操作

文章目錄

涉及到的技術點

前端使用bootstrap的分頁組件來完成數據的分頁顯示；
服務器端使用javaee經典三層架構；
使用C3P0連接池，dbutils來完成數據庫操作。

分頁的種類

物理分頁：使用數據庫本身的分頁操作來完成數據查詢，查詢到的就是當前頁的信息。例如mysql可以使用limit，oracle數據庫可以使用rownum來完成。優點是性能好，但是存在不通用的問題。
邏輯分頁：利用數據庫的遊標來操作，性能低但是通用。
現在開發中常用物理分頁。

分頁原理

sql語句：select * from table limit(頁碼-1) ×每頁條數，(每頁條數)；
完成分頁操作必備條件：
- 頁碼pageNo默認是1，會根據上一頁、下一頁、首頁、尾頁的選擇變化，通過js來控制；
- 每頁顯示條數人爲控制；
- 總條數；
- 總條數=總條數/每頁顯示條數（要取整）；
- 封裝的當前頁的數據。

javaee三層架構

代碼思路

前期準備
- 工程的目錄結構
- 配置文件、工具類、jar包導入
完成查詢所有列表操作
- 創建查詢頁面，向服務器發送請求（獲取要查詢的信息）。
- 創建servlet接收瀏覽器請求，獲取產品信息（web包下創建）。
- 創建業務層service。
- 創建持久化層dao。dao層進行數據庫查詢-----service----servlet
- servlet將list結果轉換成json響應到瀏覽器。
- 瀏覽器頁面ajax操作，遍歷數據寫入表格。
分頁操作
- 在瀏覽器端設置pageNo和pageSize，將他們作爲參數傳遞到服務器端。
- 服務器處理分頁：
  - 在分頁條中需要總頁數據，也就是說，總頁數我們需要在服務器端查詢獲得到。可以定義一個pageBean對象，在pageBean中封裝分頁需要的數據，將他在服務器端生成。服務器端就不需要直接返回list集合，而是返回一個pageBean的json數據。
在瀏覽器端展示分頁信息
- 判斷處理當前頁高亮顯示
- 點擊頁碼，可以跳轉到指定頁
- 在真正生成分頁數據前將數據清空
- 處理請求參數pageNo
- 實現上一頁、下一頁功能

實現代碼

html頁面操作

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		
		<!-- 最新版本的 Bootstrap 核心 CSS 文件 -->
		<link rel="stylesheet" href="/web08/bootstrap/css/bootstrap.min.css">
		<script src="/web08/jquery/jquery-1.11.3.js"></script>
		<!-- 最新的 Bootstrap 核心 JavaScript 文件 -->
		<script src="/web08/bootstrap/js/bootstrap.min.js"></script>
		<script>
		var pageNo = 1; //默認第一頁
		var pageSize = 5;  //每頁顯示條數
		var totalPage = 0;
		var totalCount = 0;
		<!-- 頁面加載完成後，要向服務器發送請求，來獲取產品信息，在table中顯示出來 -->
		$(function(){
			skipPage(pageNo);
		});
			//處理跳轉頁面
		function skipPage(pageNum){
			pageNo = pageNum;
			var url = "/web08/score";
			$.post(url,{"pageNo":pageNo,"pageSize":pageSize},function(data){
				var json = eval(data);
				var jsonObj = json.content;//得到分頁數據
				//將頁碼 每頁條數 總條數 總頁數與服務器響應的數據同步
				totalPage = json.totalPage;
				totalCount = json.totalCount;
				//將json數據遍歷，轉換成html代碼插入tab
				var html=" ";
				
			for (var i = 0; i < jsonObj.length; i++) {
						html += "<tr><td>" + jsonObj[i].id + "</td><td>"
								+ jsonObj[i].stu_id + "</td><td>"
								+ jsonObj[i].c_name + "</td><td>"
								+ jsonObj[i].greade + "</td></tr>";
					}
			//展示分頁條數據
			var pageMsg="<ul class='pagination'>";
			//實現上一頁功能
			if(pageNo == 1){
				pageMsg += "<li class='disabled'><a href='#'>&laquo;</a></li>";
			}else{
				pageMsg += "<li><a href='javascript:viod(0)' οnclick='skipPage("+(pageNo-1)+")'>&laquo;</a></li>";
			}
			for(var i = 0; i < totalPage; i++){
				//判斷頁碼與（i+1）是否一致，一致就代表當前頁碼要高亮顯示
				if((i+1) == pageNo){
					pageMsg += "<li class='active'><a href='jacascript:void(0)'>"+(i+1)+"</a></li>";
				}else{
					pageMsg += "<li><a href='jacascript:void(0)' οnclick='skipPage("+(i+1)+")'>"+(i+1)+"</a></li>";	
				}
	
			}
			//實現下一頁功能
			if(pageNo == totalPage){
				pageMsg += "<li class='disabled'><a href='#'>&raquo;</a></li>";
			}else{
				pageMsg += "<li><a href='javascript:viod(0)' οnclick='skipPage("+(pageNo+1)+")'>&raquo;</a></li>";
			}
			pageMsg += "</ul>";
					
			//清空頁面數據，避免重複顯示
			$("#tab").html("<tr><td>序號</td><td>學號</td><td>科目</td><td>成績</td></tr><tr><td colspan='4'><nav id='n'></nav></td></tr>");
			$("#n").append(pageMsg);
			$("#tab tr:nth-child(1)").after(html);
		
				},"json");
		}	
		</script>
	</head>
	<body>
	<div class="container">
		<table class="table table-striped" id="tab">
			<tr>
				<td>序號</td>
				<td>學號</td>
				<td>科目</td>
				<td>成績</td>
			</tr>
			<tr>
				<td colspan="4"><nav id="n"></nav></td>	
			</tr>		
		</table>		
	</div>
	</body>
</html>

servlet層操作

public class ScoreServlet extends HttpServlet {
	
	protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
		//處理響應數據中文亂碼
		response.setCharacterEncoding("utf-8");
		//接收請求參數pageNo、pageSize
		int pageNo = Integer.parseInt(request.getParameter("pageNo")); //頁碼
		int pageSize = Integer.parseInt(request.getParameter("pageSize"));//每頁顯示條數
		
		
		try {
			//查詢所有產品
			ScoreService scoreService = new ScoreService();
			PageBean<Score> pageBean = scoreService.selectAll(pageNo,pageSize);
			//將pageBean轉換成json響應到瀏覽器
			String json = JSONObject.toJSONString(pageBean);
			response.getWriter().write(json);
			
		} catch (SQLException e) {
			e.printStackTrace();
			//向瀏覽器發送一條描述錯誤信息的json數據
		}
		
	}
	protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
		doGet(request, response);
	}

}

service層操作

public class ScoreService {
//	public List<Score> selectAll(int pageNo,int pageSize) throws SQLException{
//		ScoreDao scoreDao = new ScoreDao();
//		
//		return scoreDao.selectAll(pageNo,pageSize);
//	}
	//使用pageBean來處理分頁數據
	public PageBean<Score> selectAll(int pageNo,int pageSize) throws SQLException{
		ScoreDao scoreDao = new ScoreDao();
		List<Score> list = scoreDao.selectAll(pageNo,pageSize);
		
		PageBean<Score> pageBean = new PageBean<Score>();
		//將分頁數據封裝到PageBean中
		pageBean.setContent(list);
		pageBean.setPageNo(pageNo);
		pageBean.setPageSize(pageSize);
		//總條數通過selece count（*） from table查詢
		int totalCount = scoreDao.selectCount();
		pageBean.setTotalCount(totalCount);
		//System.out.println(totalCount);
		int totalPage = (int) Math.ceil(totalCount*1.0/pageSize);//向上取整
		//System.out.println(totalPage);
		pageBean.setTotalPage(totalPage);
		
		return pageBean;
	}

}

dao層操作

public class ScoreDao {
	QueryRunner queryRunner = new QueryRunner(JDBCUtils.getDataSource());
	
	public List<Score> selectAll(int pageNo, int pageSize) throws SQLException {
		List<Score> lsit = queryRunner.query("select * from score limit ?,?", new BeanListHandler<Score>(Score.class),
				(pageNo - 1) * pageSize, pageSize);

		return lsit;
	}
	
//查詢總條數
	public int selectCount() throws SQLException {
		Long l = (Long)queryRunner.query("select count(*) from score", new ScalarHandler());		
		return l.intValue();
	}
 
}

bean類的代碼

public class PageBean<T> {
	private int pageNo; //頁碼
	private int pageSize; //每頁顯示條數
	private int totalPage; //總頁數
	private int totalCount;//總條數
	private List<T> content;//當前頁顯示的數據
	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 getTotalPage() {
		return totalPage;
	}
	public void setTotalPage(int totalPage) {
		this.totalPage = totalPage;
	}
	public int getTotalCount() {
		return totalCount;
	}
	public void setTotalCount(int totalCount) {
		this.totalCount = totalCount;
	}
	public List<T> getContent() {
		return content;
	}
	public void setContent(List<T> content) {
		this.content = content;
	}
}

5、jQueryAjax案例：分頁操作

文章目錄

涉及到的技術點

分頁的種類

分頁原理

javaee三層架構

代碼思路

實現代碼

目錄結構

實現效果

一鍵自動化博客發佈工具,用過的人都說好(頭條篇)

實現一個簡陋的服務器（理解服務器的核心容器以及servlet工作原理）

JSP練習（cookie、隱藏域使用等）

EL和JSTL練習

CSS常用樣式整理

計算機網絡——五層參考模型

https://yachay.unat.edu.pe/blog/index.php?comment_area=format_blog&comment_component=blog&comment_co

linux以太網驅動總結