목록 페이징
페이징시 처음 끝 다음 이전 까지 구현하기
boardcontroller
//목록 페이징
@RequestMapping(value = "index" , method = RequestMethod.GET)
public String BoardList(Board board , Model model, String currentPage) {
//페이징 작업
int result=bs.totalList(board);
Paging page = new Paging(result,currentPage);
board.setStart(page.getStart());
board.setEnd(page.getEnd());
//게시글목록조회
List<Board> boardList = bs.boardList(board);
model.addAttribute("boardList",boardList);
model.addAttribute("page",page);
model.addAttribute("result",result);
return "index";
}
boardServiceImpl
@Override
//목록
public List<Board> boardList(Board board) {
List<Board> boardList = null;
boardList=bd.findboardList(board);
System.out.println("서비스 보드리스트"+boardList);
return boardList;
}
//페이징 하기위해 토탈수 구하기
@Override
public int totalList(Board board) {
return bd.totalList(board);
}
boardDaoImpl
@Override
public List<Board> findboardList(Board board) {
List<Board> boardList = null;
try {
boardList=session.selectList("SelList",board);
} catch (Exception e) {
System.out.println("다오오류"+e.getMessage());
e.printStackTrace();
}
return boardList;
}
@Override
public int totalList(Board board) {
return session.selectOne("totalList",board);
}
boardxml
<!-- 목록, 검색, 페이징 -->
<select id="SelList" resultType="board" parameterType="board">
SELECT *
FROM (SELECT rownum rn, a.*
FROM (SELECT BOARD_NO boardNo,
BOARD_TITLE boardTitle,
BOARD_CONTENT boardContent,
BOARD_WRITER boardWriter,
BOARD_REGDATE boardRegdate,
BOARD_UPDATE boardUpdate,
VIEW_COUNT viewCount
FROM BOARD a
where 1=1
<if test="boardTitle != null">
AND BOARD_TITLE like '%' || #{boardTitle} || '%'
</if>
<if test="boardWriter != null">
AND BOARD_CONTENT like '%' || #{boardContent} || '%'
</if>
<if test="boardTitle != null">
AND BOARD_WRITER like '%' || #{boardWriter} || '%'
</if>
ORDER BY BOARD_NO DESC) a)
WHERE rn BETWEEN #{start} and #{end}
</select>
//검색했을대 토탈수 세어주기위해서 검색조건도 걸어놓음
<select id="totalList" resultType="int" parameterType="board">
select count(*) from BOARD
where 1=1
<if test="boardTitle != null">
AND BOARD_TITLE like '%' || #{boardTitle} || '%'
</if>
<if test="boardWriter != null">
AND BOARD_CONTENT like '%' || #{boardContent} || '%'
</if>
<if test="boardTitle != null">
AND BOARD_WRITER like '%' || #{boardWriter} || '%'
</if>
</select>
index.jsp
<body>
<div id="writepage"> </div>
<div id="detailwrite"></div>
<div id="content">
<a id="writeBtn" class="btn btn-outline-success">
<span></span>
<span></span>
<span></span>
<span></span>
글 작성
</a>
<br>
<br>
<!-- <button type="button" class="btn btn-warning">글작성</button> -->
<br>
<table style="table-layout: fixed;" class="table table-hover" >
<thead class="table-dark">
<tr>
<td>게시글번호</td>
<td>게시글제목</td>
<td>게시글내용</td>
<td>게시글작성자</td>
<td>작성날짜</td>
<td>수정날짜</td>
<td>게시글상세보기</td>
<td>조회수</td>
</tr>
</thead>
<tbody id="list" class="table-group-divider">
<c:forEach items="${boardList}" var="boardList">
<tr>
<td>${boardList.boardNo}</td>
<!-- 글자수 너무 많으면 ...으로 나오도록 표현 -->
<td style="text-overflow: ellipsis; overflow:hidden; white-space: nowrap;">${boardList.boardTitle}</td>
<td style="text-overflow: ellipsis; overflow:hidden; white-space: nowrap;" >${boardList.boardContent}</td>
<td>${boardList.boardWriter}</td>
<td><f:formatDate value="${boardList.boardRegdate}" pattern="yyyy-MM-dd HH:mm:ss"/></td>
<td><f:formatDate value="${boardList.boardUpdate}" pattern="yyyy-MM-dd HH:mm:ss"/></td>
<td><button id="${boardList.boardNo}" class="detailBtn w-btn-neon2">click</button></td>
<td>${boardList.viewCount}</td>
</tr>
</c:forEach>
</tbody>
</table>
<div id="result" >총개수 ${result}</div>
<!-- 페이지버튼 -->
<div id="pagingbtn" class="btn-toolbar mb-3 " role="toolbar" aria-label="Toolbar with button groups">
<!-- 현재 페이지블록이 1페이지보다 크면 처음 으로 갈 수있도록 링크를 추가 -->
<c:if test="${page.currentPage>1}">
<button type="button" class="btn btn-outline-secondary"
onclick="location.href='?currentPage=1'">처음</button>
</c:if>
<!-- 시작 페이지블록이 설정한 5페이지보다 크면 이전 으로 갈 수있도록 링크를 추가 -->
<c:if test="${page.startPage>page.pageBlock}">
<button type="button" class="btn btn-outline-secondary"
onclick="location.href='?currentPage=${page.startPage-page.pageBlock}'">이전</button>
</c:if>
<c:forEach var="i" begin="${page.startPage}" end="${page.endPage}">
<c:choose>
<c:when test="${i == page.currentPage}">
<!-- 현재 페이지인 경우 하이퍼링크 제거 -->
<!-- 현재 페이지인 경우에는 링크를 빼고 회색으로 처리를 한다. -->
<span>
<button type="button" class="btn btn-secondary">${i}</button>
</span>
</c:when>
<c:otherwise>
<button type="button" class="btn btn-outline-secondary"
onclick="location.href='?currentPage=${i}'">${i}</button>
</c:otherwise>
</c:choose>
</c:forEach>
<!-- 현재 페이지블록이 총 페이지블록보다 작으면 다음으로 갈 수있도록 링크를 추가 -->
<c:if test="${page.endPage<page.totalPage}">
<button type="button" class="btn btn-outline-secondary"
onclick="location.href='?currentPage=${page.startPage+page.pageBlock}'">다음</button>
</c:if>
<!-- 현재 페이지블록이 총 페이지블록보다 작거나 같으면 끝으로 갈 수 있도록 링크를 추가함-->
<c:if test="${page.currentPage <= page.totalPage}">
<button type="button" class="btn btn-outline-secondary"
onclick="location.href='?currentPage=${page.totalPage}'">끝</button>
</c:if>
</div>
</div>
🎈날짜 시간까지 나오게 하기
dto에는 이렇게 작성했다
jsp에는 이렇게 작성
<td><f:formatDate value="${boardList.boardRegdate}" pattern="yyyy-MM-dd HH:mm:ss"/></td>
<td><f:formatDate value="${boardList.boardUpdate}" pattern="yyyy-MM-dd HH:mm:ss"/></td>
글자수 너무 많이 많이나오면 ...처리
<!-- 글자수 너무 많으면 ...으로 나오도록 표현 -->
<td style="text-overflow: ellipsis; overflow:hidden; white-space: nowrap;">${boardList.boardTitle}</td>
<td style="text-overflow: ellipsis; overflow:hidden; white-space: nowrap;" >${boardList.boardContent}</td>
검색 페이징 ajax
index.jsp
<div style="border: 1px solid; width: 1200px;" class="d-flex" role="search">
<label class="btn btn-secondary disabled" role="button" aria-disabled="true">제목</label>
<input class="form-control me-2" name="boardTitle" style="width: 300px;" type="text" placeholder="제목를 입력하세요." id="boardTitle">
<label class="btn btn-secondary disabled" role="button" aria-disabled="true">내용</label>
<input class="form-control me-2" type="text" name="boardContent" style="width: 300px;" placeholder="내용을 입력하세요." id="boardContent">
<label class="btn btn-secondary disabled" role="button" aria-disabled="true">작성자</label>
<input class="form-control me-2" type="text" name="boardWriter" style="width: 300px;" placeholder="작성자를 입력하세요." id="boardWriter">
<input type="button" id="search_btn" value="조회" onclick="getlistSerch()" />
<button id="listbtn" type="submit" >이전</button>
</div>
<!-- 검색아작스 실행 -->
<script type="text/javascript">
function getlistSerch(currentPage)
{
var boardTitle =document.getElementById("boardTitle").value;
var boardContent =document.getElementById("boardContent").value;
var boardWriter =document.getElementById("boardWriter").value;
var BoardVo = {};
BoardVo.boardTitle = boardTitle;
BoardVo.boardContent = boardContent;
BoardVo.boardWriter = boardWriter;
BoardVo.currentPage = currentPage;
//console.log(JSON.stringify(BoardVo));
$.ajax({
url: "index",
data: JSON.stringify(BoardVo), //맵타입이라서 이렇게 보냄
type: "POST",
dataType : 'json',
contentType: "application/json;charset=UTF-8",
success:function(data){
//alert("가따오기 성공~~~");
// 검색 조회 누를시 기존 데이터 화면에서 삭제
//부모 노드 선택
const parent = document.getElementById("list");
//자식 노드 삭제
while(parent.firstChild)
{
parent.removeChild(parent.firstChild);
}
//테이블 새로 생성
var str='';
$.each
(data.boardList , (index, obj)=>{
str += '<TR>'
str +='<td>' +obj.boardNo +'</td>';
str +='<td style="text-overflow: ellipsis; overflow:hidden; white-space: nowrap;">' +obj.boardTitle +'</td>';
str +='<td style="text-overflow: ellipsis; overflow:hidden; white-space: nowrap;">' +obj.boardContent +'</td>';
str +='<td>' +obj.boardWriter +'</td>';
str +='<td>' +obj.boardRegdate +'</td>';
str +='<td>' +obj.boardUpdate +'</td>';
str += "<td><button id='"+ obj.boardNo +"'class='detailBtn w-btn-neon2'>click</button>";
str +='<td>' +obj.viewCount +'</td>';
});
//토탈수 바꿈
$("#result").html('총개수 :'+data.page.total);
$("#list").append(str);
$("#pagingbtn").empty(); //기존에 있던 페이징 버튼 삭제
var pagingstr = "";
if(data.page.startPage>data.page.pageBlock){
pagingstr += '<button type="button" class="btn btn-outline-secondary" '+
'onclick="getlistSerch('+(data.page.startPage-data.page.pageBlock)+')">[이전]</button>';
}
for(var i = data.page.startPage ; i<data.page.endPage+1; i++){
pagingstr += '<button type="button" class="btn btn-outline-secondary"'+
'onclick="getlistSerch('+i+')">'+i+'</button>';
}
if(data.page.endPage<data.page.totalPage){
pagingstr += '<button type="button" class="btn btn-outline-secondary" '+
'onclick="getlistSerch('+(data.page.startPage+data.page.pageBlock)+')">[다음]</button>';
}
//페이징 버튼에 아작스 페이징 해준거 추가
$("#pagingbtn").append(pagingstr);
}
});
}
</script>제이쿼리 요소 바꿔주기
<div id="result" >총개수 ${result}</div>
<script type="text/javascript">
$("#result").html('검색시 총개수 :'+data.page.total); 💥오류
$("#result").html('검색시 총개수 :'+data.page.result);
하니깐 값이안나옴
내가 paging dto 에서 이렇게 설정해놓앗기 때문
result라는 값이 total안에 들어감
result를 total이라고 바꿔줌 .. 잘뜸 👻
boardcontroller
//검색 페이징 ajax
@ResponseBody
@RequestMapping(value = "index" ,method = RequestMethod.POST)
public Map<String, Object> listSearch(@RequestBody Board board){
//페이징 작업
int result=bs.totalList(board);
Paging page = new Paging(result, board.getCurrentPage());
board.setStart(page.getStart());
board.setEnd(page.getEnd());
board.setCurrentPage(String.valueOf(page.getCurrentPage()));
List<Board> boardList = bs.boardList(board);
Map<String, Object> listSerach = new HashMap<String, Object>();
listSerach.put("boardList", boardList);
listSerach.put("page",page);
return listSerach ;
}참고 pagint dto
@Data
public class Paging {
private int currentPage =1; //현재페이지
private int rowPage = 10; //한 페이지에 보여줄 개수
private int pageBlock =5; //한페이지에 뜰 번호 개수 1부터 5번까지 다음 6부터 10까지
private int start ;
private int end;
private int startPage ;
private int endPage;
private int total;
private int totalPage;
// 25 기본이 1이라고 가정
public Paging(int total, String currentPage1) {
this.total = total; //140
if(currentPage1 != null) {
this.currentPage = Integer.parseInt(currentPage1); //2
}
//1 10
start = (currentPage -1 ) * rowPage +1; //시작시 1 11
end = start +rowPage -1; //시작시 10 20
//25 / 10
totalPage = (int) Math.ceil((double)total/ rowPage); //시작시 3 5 14
//2 2
startPage = currentPage - (currentPage-1) % pageBlock; //시작시 1
endPage =startPage + pageBlock -1; //10
//10 14
//공갈페이지 방지
if(endPage >totalPage ) {
endPage=totalPage;
}
}
}
🔽검색 조회 페이징 완료
.