jQuery 페이징 플러그인 bootpag을 이용한 페이징 예
jQuery 페이징 플러그인 중에서 bootpag 이라는 플러그인을 사용하여 페이징을 구현한 예이다
empList.jsp
<%@ page contentType="text/html; charset=utf-8" pageEncoding="utf-8"%> <%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %> <%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt" %> <fmt:requestEncoding value="utf-8"/>: <jsp:useBean id="dao" class="org.kdea.emp.EmpDAO" scope="page"/> <jsp:useBean id="svc" class="org.kdea.emp.EmpSvc"> <jsp:setProperty name="svc" property="dao" value="${dao}"/> <jsp:setProperty name="svc" property="request" value="<%=request%>"/> <jsp:setProperty name="svc" property="*"/> </jsp:useBean> <c:set var="list" value="${svc.pageList}"/> <!DOCTYPE html> <html> <head> <script src="//code.jquery.com/jquery-2.1.3.min.js"></script> <script src="jquery.bootpag.min.js"></script> <script src="//raw.github.com/botmonster/jquery-bootpag/master/lib/jquery.bootpag.min.js"></script> <link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css"> <style type="text/css"> #content {display:inline-block; width:200px; height:120px; border:1px solid black; margin:0px auto; } </style> <script> // init bootpag $(function(){ $('#page-selection').bootpag({ total: ${totalPages}, <!-- total pages --> page: ${currPage}, <!-- current page --> maxVisible: 2, <!-- links per page --> leaps: true, firstLastUse: true, first: '←', last: '→', wrapClass: 'pagination', activeClass: 'active', disabledClass: 'disabled', nextClass: 'next', prevClass: 'prev', lastClass: 'last', firstClass: 'first' }).on("page", function(event, num){ //$(".content").html("Page " + num); // or some ajax content loading... location.href="empList.jsp?rpp=5&page="+num; // 한 페이지에 5행씩 클릭한 페이지의 리스트 요청 }); }); </script> </head> <body> <div id="content"> <c:forEach var="e" items="${list}" > <div>${e.empno} ${e.ename} ${e.mgr}</div> </c:forEach> </div> <div id="page-selection"><!-- Pagination goes here --></div> </body> </html>
EmpSvc.java
package org.kdea.emp;
import java.util.*;
import javax.servlet.http.*;
public class EmpSvc
{
private HttpServletRequest request;
private int page; // Current Page
private int rpp; // Rows Pre Page
private EmpDAO dao;
public EmpSvc(){}
public List<EmpVO> getPageList(){
page = (page==0) ? 1 : page;
rpp = (rpp==0) ? 5 : rpp;
request.getSession().setAttribute("currPage", page);
List<EmpVO> list = dao.getPageList(page,rpp);
int totalPages = (int)Math.ceil(EmpVO.getTotalRows()/(rpp+0.0));
request.getSession().setAttribute("totalPages", totalPages);
return list;
}
public int getPage() {
return page;
}
public void setPage(int page) {
this.page = page;
}
public EmpDAO getDao() {
return dao;
}
public void setDao(EmpDAO dao) {
this.dao = dao;
}
public HttpServletRequest getRequest() {
return request;
}
public void setRequest(HttpServletRequest request) {
this.request = request;
}
public int getRpp() {
return rpp;
}
public void setRpp(int rpp) {
this.rpp = rpp;
}
}EmpDAO.java
package org.kdea.emp;
import java.sql.*;
import java.util.*;
public class EmpDAO
{
private Connection conn;
private PreparedStatement pstmt;
private ResultSet rs;
private String jdbc_driver = "oracle.jdbc.OracleDriver";
private String db_url = "jdbc:oracle:thin:@localhost:1521:xe";
private Connection getConn() {
try{
Class.forName(jdbc_driver);
conn = DriverManager.getConnection(db_url,"scott", "TIGER");
return conn;
}catch(Exception ex){
ex.printStackTrace();
}
return null;
}
public List<EmpVO> getPageList(int page, int rpp){
String sql =
"WITH t1(empno,ename,mgr,lvl, totalRows)AS "+
"("+
"SELECT empno, ename, mgr, 0 AS lvl, (SELECT COUNT(*) FROM emp) totalRows "+
"FROM emp "+
"WHERE mgr IS NULL "+
"UNION ALL "+
"SELECT e.empno, e.ename, e.mgr, t1.lvl+1 AS lvl, t1.totalRows "+
"FROM emp e "+
"JOIN t1 "+
"ON e.mgr = t1.empno "+
") "+
"SEARCH DEPTH FIRST BY empno SET ordering "+
"SELECT * FROM "+
"( "+
"SELECT empno, LPAD(' ', lvl*3, ' ')||ename AS ename, mgr, totalRows, TRUNC((ordering-1)/?)+1 AS page "+
"FROM t1 "+
"ORDER BY ordering "+
") "+
"WHERE page=?";
conn = getConn();
try {
pstmt = conn.prepareStatement(sql);
pstmt.setInt(1, rpp);
pstmt.setInt(2, page);
rs = pstmt.executeQuery();
List<EmpVO> list = new ArrayList<>();
while(rs.next()){
EmpVO emp = new EmpVO();
emp.setEmpno(rs.getInt("EMPNO"));
emp.setEname(rs.getString("ENAME"));
emp.setMgr(rs.getInt("MGR"));
emp.setTotalRows(rs.getInt("TOTALROWS"));
list.add(emp);
}
return list;
} catch (SQLException e) {
e.printStackTrace();
} finally{
closeAll();
}
return null;
}
private void closeAll(){
try{
if(rs!=null) rs.close();
if(pstmt!=null) pstmt.close();
if(conn!=null) conn.close();
}catch(Exception ex){
ex.printStackTrace();
}
}
}EmpVO.java
package org.kdea.emp;
public class EmpVO
{
private int empno;
private String ename;
private int mgr;
private static int totalRows;
public int getEmpno() {
return empno;
}
public void setEmpno(int empno) {
this.empno = empno;
}
public String getEname() {
return ename;
}
public void setEname(String ename) {
this.ename = ename;
}
public int getMgr() {
return mgr;
}
public void setMgr(int mgr) {
this.mgr = mgr;
}
public static int getTotalRows() {
return totalRows;
}
public static void setTotalRows(int totalRows) {
EmpVO.totalRows = totalRows;
}
}