1. 程式人生 > >利用ajax技術實現通用分頁,在jsp頁面呈現

利用ajax技術實現通用分頁,在jsp頁面呈現

package com.softeem.dto;//dto資料傳輸物件


import java.util.ArrayList;
import java.util.List;


public class PageBean<T> {
private int currentPage; // 當前頁碼
private int pageSize; // 每頁記錄條數


private int totalNum; // 總資料條數
private int totalPage; // 總頁碼數
private int first = 1; // 首頁
private int pre; // 上一頁
private int next; // 下一頁
private int last; // 尾頁


private List<T> list = new ArrayList<>(); // 資料集


public int getCurrentPage() {
return currentPage;
}


public void setCurrentPage(int currentPage) {
this.currentPage = currentPage;
}


public int getPageSize() {
return pageSize;
}


public void setPageSize(int pageSize) {
this.pageSize = pageSize;
}


public int getTotalNum() {
return totalNum;
}


public void setTotalNum(int totalNum) {
this.totalNum = totalNum;
}


public int getTotalPage() {
return totalPage;
}


public void setTotalPage(int totalPage) {
this.totalPage = totalPage;
}


public int getFirst() {
return first;
}


public void setFirst(int first) {
this.first = first;
}


public int getPre() {
return pre;
}


public void setPre(int pre) {
this.pre = pre;
}


public int getNext() {
return next;
}


public void setNext(int next) {
this.next = next;
}


public int getLast() {
return last;
}


public void setLast(int last) {
this.last = last;
}


public List<T> getList() {
return list;
}


public void setList(List<T> list) {
this.list = list;
}


}
package com.softeem.dao;//資料訪問物件


import java.sql.ResultSet;
import java.sql.SQLException;
import java.util.ArrayList;
import java.util.List;


import com.softeem.ac.dbutils.DBUtils;
import com.softeem.ac.dbutils.DBUtils.CallBack;
import com.softeem.dto.Daily;
import com.softeem.dto.PageBean;




public class DailyDAO implements BaseDAO<Daily> {


@Override
public List<Daily> findByPage(PageBean bean) {
String sql = "select _id,content,submitTime,lastTime from daily limit ?,?";
int start = (bean.getCurrentPage() - 1) * bean.getPageSize();
return DBUtils.queryList(sql, new CallBack<Daily>() {
@Override
public List<Daily> getDatas(ResultSet rs) {
List<Daily> list = new ArrayList<Daily>();
try {
Daily daily = null;
while (rs.next()) {
daily = new Daily(rs.getInt("_id"), rs
.getString("content"), rs
.getTimestamp("submitTime"), rs
.getTimestamp("lastTime"));


list.add(daily);
}
} catch (SQLException e) {
e.printStackTrace();
} finally {
try {
if (rs != null)
rs.close();
} catch (SQLException e) {
e.printStackTrace();
}
}
return list;
}
}, start, bean.getPageSize());
}


@Override
public int getCount() {//獲取總頁數
String sql = "select count(*) from daily";
return DBUtils.queryOne(sql, new CallBack<Integer>() {
@Override
public Integer getData(ResultSet rs) {
try {
if (rs.next()) {
return rs.getInt(1);
}
} catch (SQLException e) {
// TODO Auto-generated catch block
e.printStackTrace();
}
return 0;
}
});
}


}


package com.softeem.service;//業務邏輯層


import java.util.List;


import com.softeem.dao.BaseDAO;
import com.softeem.dto.PageBean;


public class PaginationService<T> {
private BaseDAO<T> dao;


public PaginationService(BaseDAO<T> dao) {
this.dao = dao;
}


public PageBean<T> paging(PageBean<T> bean) {
int totalNum = dao.getCount();//獲取總頁數
if (totalNum % bean.getPageSize() == 0) {//記錄當前頁數
bean.setTotalPage(totalNum / bean.getPageSize());
} else {
bean.setTotalPage(totalNum / bean.getPageSize() + 1);
}


if (bean.getCurrentPage() < 1) {//當前頁不能小於1
bean.setCurrentPage(1);
}
if (bean.getCurrentPage() > totalNum) {//當前頁不能大於頁面總數
bean.setCurrentPage(totalNum);
}
bean.setTotalNum(totalNum);
bean.setTotalPage(bean.getTotalPage());
bean.setPre(bean.getCurrentPage() - 1);
bean.setNext(bean.getCurrentPage() + 1);
bean.setLast(bean.getTotalPage());
List<T> list = dao.findByPage(bean);
bean.setList(list);//把資料裝進集合
return bean;
}
}
package com.softeem.servlet;


import java.io.IOException;
import java.io.PrintWriter;


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 com.alibaba.fastjson.JSON;
import com.softeem.dao.DailyDAO;
import com.softeem.dto.Daily;
import com.softeem.dto.PageBean;
import com.softeem.service.PaginationService;




/**
 * Servlet implementation class DailyServlet
 */
@WebServlet("/DailyServlet")
public class DailyServlet extends HttpServlet {
private static final long serialVersionUID = 1L;
       
  
    public DailyServlet() {
        super();
    }
protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
doPost(request, response);
}
protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {

String cp = request.getParameter("cp");
int currentPage = cp == null?1:Integer.parseInt(cp);//判斷獲取的頁數不為空,防止空指標異常

PageBean<Daily> bean = new PageBean<Daily>();
bean.setCurrentPage(currentPage);
bean.setPageSize(5);//每5條資料分一頁

PaginationService<Daily> service = new PaginationService<Daily>(new DailyDAO());
bean = service.paging(bean);

String json = JSON.toJSONString(bean);//把java物件轉成json物件
response.setCharacterEncoding("utf-8");
PrintWriter out = response.getWriter();
out.print(json);
out.flush();
}


}
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html >
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<link rel="stylesheet" href="bootstrap-3.3.7/css/bootstrap.css">
<script type="text/javascript" src="js/myajax.js"></script>
</head>
<body>
<div class="container">
<table class="table table-striped table-bordered">
<thead>
<tr>
<th>編號</th>
<th>日誌內容</th>
<th>提交時間</th>
<th>修改時間</th>
</tr>
</thead>
<tbody id="tbody"></tbody>
</table>
<nav id="paging" class="text-center">
<!-- <ul class="pagination"> -->
<!-- <li class="disabled"><a href="">&laquo;</a></li> -->
<!-- <li class="active"><a href="">1</a></li> -->
<!-- <li><a href="">2</a></li> -->
<!-- <li><a href="">3</a></li> -->
<!-- <li><a href="">&raquo;</a></li> -->
<!-- </ul> -->
</nav>
</div>
<script>
goPage(1);
function goPage(cp) {//把ajax封裝為一句話
ajax('get', 'DailyServlet?cp=' + cp, null, function(data) {
// alert(data);
data = JSON.parse(data);
var list = data.list;
// console.info(list);
var tabData = '';
for (var i = 0; i < list.length; i++) {
tabData += '<tr>';
tabData += '<td>' + list[i].dyid + '</td>'
tabData += '<td>' + list[i].content + '</td>'
tabData += '<td>' + list[i].submitTime + '</td>'
tabData += '<td>' + list[i].lastTime + '</td>'
tabData += '</tr>';
}
$('tbody').innerHTML = tabData;
genPageLink(data);
});
}
function genPageLink(pb){
//拼接分頁的超連結
var ul = '<ul class="pagination">';
if(pb.currentPage == 1){
ul += '<li class="disabled"><a href="javascript:goPage('+pb.pre+')">&laquo;</a></li>';
}else{
ul += '<li><a href="javascript:goPage('+pb.pre+')">&laquo;</a></li>';
}
for(var i = 1;i<=pb.totalPage;i++){
//如果當前遍歷到的頁碼數等於當前頁,則當前頁碼被啟用class="active"
if(pb.currentPage == i){
ul += '<li class="active"><a href="javascript:goPage('+i+')">'+i+'</a></li>';
}else{
ul += '<li><a href="javascript:goPage('+i+')">'+i+'</a></li>';
}
}
if(pb.currentPage == pb.totalPage){
ul += '<li class="disabled"><a href="javascript:goPage('+pb.next+')">&raquo;</a></li>';
}else{
ul += '<li><a href="javascript:goPage('+pb.next+')">&raquo;</a></li>';
}

ul += '</ul>';
//將連線寫入指定區域
$('paging').innerHTML = ul;
}
function $(id) {
return document.getElementById(id);


}
</script>
</body>
</html>