ajax 如何實現分頁功能
阿新 • • 發佈：2019-02-02
這裡用ajax簡單的實現一下分頁功能，作為一個例子
ajax實現分頁，首先需要工具類，Page.java，如下：
package com.feelingsys.bean;
/**
* Page
* @author LIU
* @version 1.0 2017-09-28
*/
public class Page {
/**
* 總記錄數
*/
private int totalCount;
/**
* 每頁顯示的記錄數
*/
private int currCount;
/**
* 總頁數
*/ ajax實現分頁，需要兩個jsp檔案，currList.jsp 和 showAll.jsp檔案。
showAll.jsp如下：
<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<base href="<%=basePath%>">
<title>My JSP 'index.jsp' starting page</title>
<meta http-equiv="pragma" content="no-cache">
<meta http-equiv="cache-control" content="no-cache">
<meta http-equiv="expires" content="0">
<script type="text/javascript" src="js/jquery-1.8.3.js"></script>
<script type="text/javascript" src="js/showAll.js"></script>
</head>
<body>
<div id="all">
<p>心情足跡</p>
<a href="add.jsp">記錄心情</a>
<div id="fun">
<table border="1" cellspacing="0">
<tr>
<th>心情日記</th>
<th>日誌分類</th>
<th>編寫日期</th>
<th>操作</th>
</tr>
<c:forEach var="f" items="${feelingList }">
<tr>
<td>${f.ftitle }</td>
<c:choose>
<c:when test="${f.ftype==1 }"><td>踩腳印</td></c:when>
<c:when test="${f.ftype==2 }"><td>有感而發</td></c:when>
<c:when test="${f.ftype==3 }"><td>雜七雜八</td></c:when>
</c:choose>
<td>${f.fdate }</td>
<td><a href="ShowOneServlet?fid=${f.fid }">檢視</a></td>
</tr>
</c:forEach>
</table>
<p class="ppage">
當前頁數[<span id="currPage">${page.currPage }</span>/<span id="sumPage">${page.sumPage }</span>]
<span class="pages">首頁</span> <span class="pages">上一頁</span> <span class="pages">下一頁</span> <span class="pages">尾頁</span>
</p>
</div>
</div>
</body>
</html>
currList.jsp如下：
<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<base href="<%=basePath%>">
<title>My JSP 'index.jsp' starting page</title>
<meta http-equiv="pragma" content="no-cache">
<meta http-equiv="cache-control" content="no-cache">
<meta http-equiv="expires" content="0">
<script type="text/javascript" src="js/jquery-1.8.3.js"></script>
<script type="text/javascript" src="js/showAll.js"></script>
</head>
<body>
<div id="all">
<table border="1" cellspacing="0">
<tr>
<th>心情日記</th>
<th>日誌分類</th>
<th>編寫日期</th>
<th>操作</th>
</tr>
<c:forEach var="f" items="${feelingList }">
<tr>
<td>${f.ftitle }</td>
<c:choose>
<c:when test="${f.ftype==1 }"><td>踩腳印</td></c:when>
<c:when test="${f.ftype==2 }"><td>有感而發</td></c:when>
<c:when test="${f.ftype==3 }"><td>雜七雜八</td></c:when>
</c:choose>
<td>${f.fdate }</td>
<td><a href="ShowOneServlet?fid=${f.fid }">檢視</a></td>
</tr>
</c:forEach>
</table>
<p class="ppage">
當前頁數[<span id="currPage">${page.currPage }</span>/<span id="sumPage">${page.sumPage }</span>]
<span class="pages">首頁</span> <span class="pages">上一頁</span> <span class="pages">下一頁</span> <span class="pages">尾頁</span>
</p>
</div>
</body>
</html>
show.js的程式碼如下：
$(function(){
// 點選頁面處理
$(".pages").unbind("click").bind("click", function(){
var op = $(this).html();
var curr = $("#currPage").html();
if(op == "首頁"){
curr = 1;
}else if(op == "尾頁"){
curr = $("#sumPage").html();
}else if(op == "上一頁"){
if($("#currPage").html() == 1){
curr = 1;
}else{
curr = $("#currPage").html() - 1;
}
}else if(op == "下一頁"){
if($("#currPage").html() == $("#sumPage").html()){
curr == $("#sumPage").html();
}else{
curr = parseInt($("#currPage").html()) + 1;
}
}
// 分頁顯示請求
$.ajax({
url:"ShowAllServlet",
type:"post",
data:{"curr":curr},
dataType:"html",
async:true,
success:function(result){
$("#fun").html(result);
}
});
});
});
控制器ShowAllServlet.java的doPost方法如下：
public void doPost(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {
response.setContentType("text/html;charset=utf-8");
request.setCharacterEncoding("utf-8");
response.setCharacterEncoding("utf-8");
FeelingService feelingService = new FeelingServiceImpl();
Page page = new Page();
page.setCurrCount(4);
page.setTotalCount(feelingService.getAllCounts());
if(request.getParameter("curr") == null){
page.setCurrPage(1);
List<Feeling> feelingList = feelingService.showAll(page);
request.setAttribute("feelingList", feelingList);
request.setAttribute("page", page);
request.getRequestDispatcher("showAll.jsp").forward(request, response);
}else{
page.setCurrPage(Integer.parseInt(request.getParameter("curr")));
List<Feeling> feelingList = feelingService.showAll(page);
request.setAttribute("feelingList", feelingList);
request.setAttribute("page", page);
request.getRequestDispatcher("currList.jsp").forward(request, response);
}
}資料對映檔案 FeelingMapper.xml：
<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE mapper
PUBLIC "-//mybatis.org//DTD Mapper 3.0//EN"
"http://mybatis.org/dtd/mybatis-3-mapper.dtd">
<mapper namespace="com.feelingsys.mapper.FeelingMapper">
<resultMap id="FeelingResultMap" type="com.feelingsys.bean.Feeling">
<id property="fid" column="fid" />
<result property="ftitle" column="ftitle"/>
<result property="fcontent" column="fcontent"/>
<result property="fdate" column="fdate"/>
<result property="ftype" column="ftype"/>
</resultMap>
<select id="getAllCounts" resultType="int">
select count(fid) from feeling
</select>
<select id="showAll" parameterType="com.feelingsys.bean.Page" resultMap="FeelingResultMap">
select fid,ftitle,fcontent,fdate,ftype from feeling order by fdate desc limit #{start},#{currCount}
</select>
</mapper>資料訪問實現類 FeelingMapperImpl.java 查詢方法如下：
/**
* 分頁顯示全部心情日誌
*TODO
*LIU
* @param page
* @return
*上午10:26:18
*/
@Override
public List<Feeling> showAll(Page page) {
// TODO Auto-generated method stub
List<Feeling> feelingList = new ArrayList<Feeling>();
SqlSession session = null;
try {
session = getSession(path);
feelingList = session.selectList("com.feelingsys.mapper.FeelingMapper.showAll", page);
} catch (Exception e) {
e.printStackTrace();
}finally{
session.close();
}
return feelingList;
}
/**
* 獲取所有記錄數
*TODO
*LIU
* @return
*上午10:30:35
*/
@Override
public int getAllCounts() {
// TODO Auto-generated method stub
SqlSession session = null;
int result = 0;
try {
session = getSession(path);
result = session.selectOne("com.feelingsys.mapper.FeelingMapper.getAllCounts");
} catch (Exception e) {
e.printStackTrace();
}finally{
session.close();
}
return result;
}
本例是使用單獨的 mybatis 實現的資料庫連線，mybatis.xml 和web.xml 檔案如何配置不在討論範圍之內。