Spring 홈페이지 - (13) 게시판 페이징 작업

오늘은 게시판 페이징을 해보겠습니다.

제가 한 방식은 전자정부프레임워크에서 사용되는 방식을 변형하여 만들었습니다.

제가 사용하던 방식이라 복습차원이기도하고 실제로도 다른 방식보다 편리합니다.

 

 

---

 

새로 작성한 AJAX 페이징 방식 글입니다!! 구현하실 분들은 참고해주세요!

https://chobopark.tistory.com/249

AJAX 페이징 구현 방법!! (영상 有)

 

---

 

 

우선 페이징을 하기 위해서는 파라미터를 통해 페이징 처리를 하기 때문에 클래스를 만들어 변수를 생성하고 파라미터를 지정해줍니다.

클래스 이름은 아무렇게나 만들어도 상관없습니다~~

저는 직관적으로 Pagination이란 클래스를 만들겠습니다.

 

그리고 아래와 같이 각각의 변수를 만들어줍니다.

currentPageNo (int)	현재 페이지 번호
recordCountPerPage (int)	한 페이지당 게시되는 게시물 수
pageSize (int)	페이지 리스트에 게시되는 페이지 수
totalRecordCount (int)	전체 게시물 수
firstPageNoOnPageList (int)	페이지 리스트의 첫 페이지 번호
lastPageNoOnPageList (int)	페이지 리스트의 마지막 페이지 번호
firstRecordIndex (int)	페이징 sql의 조건절에 사용되는 시작 rownum
xprev (boolean)	이전버튼
xnext (boolean)	다음버튼
realEnd	페이징 마지막 숫자

 

좀 많네요..

pagination이란 클래스에서 처리해줄 부분이 많이 있습니다.

 

 

 

 

firstPageNoOnPageList (페이지 리스트의 첫 페이지 번호)

 

여기서는 우선적으로 마지막페이지번호를 선언한 후에 여기에

현재 페이지 번호에서 10.0을 나눈뒤에 10을 곱해줍니다.

그리고 마지막페이지에서 - 9를 빼주면 첫번째 페이지 번호가 나옵니다.

예를들어 현재페이지 번호가 10이라고 가정했을 경우

ex)

((10/10.0) * 10)  - 9 = 1이 되는거죠!

 

public int getFirstPageNoOnPageList() {
		lastPageNoOnPageList = (int)(Math.ceil(currentPageNo/10.0)) * 10;
		
		firstPageNoOnPageList = lastPageNoOnPageList - 9;
		return firstPageNoOnPageList;
	}

 

 

 

lastPageNoOnPageList (페이지 리스트의 마지막 페이지 번호)

 

마지막 페이지번호도 위에와 같이 현재 페이지 번호에서 10.0을 나눈뒤에 10을 곱해줍니다.

다만 현재페이지번호가 10이하일 경우가 있기 때문에 realEnd라는 변수에 다시한번 계산을 해줘야합니다.

realEnd라는 변수는 전체게시물수 * 1.0 나누기 한 페이지당 게시되는 게시물 수 입니다.

그리고 realEnd 변수가 마지막 페이지 번호보다 작을 경우 마지막 페이지번호와 같도록 합니다.

ex)

lastPageNoOnPageList = (5/10.0) * 10 = 5

realEnd = (140 * 1.0) / 20 =  7

 

 

public int getLastPageNoOnPageList() {
		lastPageNoOnPageList = (int)(Math.ceil(getCurrentPageNo()/10.0)) * 10;
		
		int realEnd = (int)(Math.ceil((getTotalRecordCount() * 1.0) / getRecordCountPerPage()));
		
		if(realEnd < lastPageNoOnPageList) {
			lastPageNoOnPageList = realEnd;
		}
		
		return lastPageNoOnPageList;
	}

 

 

 

firstRecordIndex (페이지 sql의 조건절에 사용되는 시작 rownumber)

 

sql에 사용될 firstRecordIndex은 (현재페이지 - 1) * 한 페이지당 게시되는 게시물 수 입니다.

ex)

(5 - 1) * 20 = 80

 

public int getFirstRecordIndex() {
		firstRecordIndex = (getCurrentPageNo() - 1) * getRecordCountPerPage();
		return firstRecordIndex;
	}

 

 

 

xprev(이전 버튼)

 

이전 버튼은 리스트의 첫 페이지번호가 1보다 크면 보이도록 합니다.

 

public boolean getXprev() {
		xprev= getFirstPageNoOnPageList() > 1;
		return xprev;
	}

 

 

 

xnext(다음 버튼)

 

다음 버튼은 realEnd변수를 구해서 리스트의 마지막 페이지 번호보다 크면 다음 버튼이 보이도록 합니다.

ex)

realEnd = (5 * 1.0) * 20 = 100

if ( glastPageNoOnPageList 의 결과 값 < realEnd ) = 다음 버튼 생성

 

public boolean getXnext() {
		
		int realEnd = (int)(Math.ceil((getTotalRecordCount() * 1.0) / getRecordCountPerPage()));
		
		xnext = getLastPageNoOnPageList() < realEnd;
		return xnext;
	}

 

 

 

realEnd (페이징 마지막 숫자)

 

public int getRealEnd() {
    
    realEnd = (int)(Math.ceil((getTotalRecordCount() * 1.0) / getRecordCountPerPage()));
    
    return realEnd;
}

페이징 마지막 숫자를 계산합니다.

 

 

 

 

pagination 전체소스

 

package com.bsite.gnb01.service.impl;

public class Pagination {
	
	private int currentPageNo;			//현재 페이지 번호
	private int recordCountPerPage;		//한 페이지당 게시되는 게시물 수
	private int pageSize;				//페이지 리스트에 게시되는 페이지 수
	private int totalRecordCount;		//전체 게시물 수
	private int realEnd;				//페이징 마지막 숫자
	
	public int getCurrentPageNo() {
		return currentPageNo;
	}
	public void setCurrentPageNo(int currentPageNo) {
		this.currentPageNo = currentPageNo;
	}
	public int getRecordCountPerPage() {
		return recordCountPerPage;
	}
	public void setRecordCountPerPage(int recordCountPerPage) {
		this.recordCountPerPage = recordCountPerPage;
	}
	public int getPageSize() {
		return pageSize;
	}
	public void setPageSize(int pageSize) {
		this.pageSize = pageSize;
	}
	public int getTotalRecordCount() {
		return totalRecordCount;
	}
	public void setTotalRecordCount(int totalRecordCount) {
		this.totalRecordCount = totalRecordCount;
	}
	
	private int firstPageNoOnPageList;	//페이지 리스트의 첫 페이지 번호
	private int lastPageNoOnPageList;	//페이지 리스트의 마지막 페이지 번호
	private int firstRecordIndex; 		//페이징 sql의 조건절에 사용되는 시작 rownum
	
	private boolean xprev;		//이전버튼
	private boolean xnext;		//다음버튼
	

	public int getFirstPageNoOnPageList() {
		lastPageNoOnPageList = (int)(Math.ceil(currentPageNo/10.0)) * 10;
		
		firstPageNoOnPageList = lastPageNoOnPageList - 9;
		return firstPageNoOnPageList;
	}
	
	public void setFirstPageNoOnPageList(int firstPageNoOnPageList) {
		this.firstPageNoOnPageList = firstPageNoOnPageList;
	}
	
	public int getLastPageNoOnPageList() {
		lastPageNoOnPageList = (int)(Math.ceil(getCurrentPageNo()/10.0)) * 10;
		
		int realEnd = (int)(Math.ceil((getTotalRecordCount() * 1.0) / getRecordCountPerPage()));
		
		
		if(realEnd < lastPageNoOnPageList) {
			lastPageNoOnPageList = realEnd;
		}
		
		return lastPageNoOnPageList;
	}
	
	public void setLastPageNoOnPageList(int lastPageNoOnPageList) {
		this.lastPageNoOnPageList = lastPageNoOnPageList;
	}
	
	public int getFirstRecordIndex() {
		firstRecordIndex = (getCurrentPageNo() - 1) * getRecordCountPerPage();
		return firstRecordIndex;
	}
	
	public void setFirstRecordIndex(int firstRecordIndex) {
		this.firstRecordIndex = firstRecordIndex;
	}
	
	public boolean getXprev() {
		xprev= getFirstPageNoOnPageList() > 1;
		return xprev;
	}
	
	public void setXprev(boolean xprev) {
		this.xprev = xprev;
	}
	
	public boolean getXnext() {
		
		int realEnd = (int)(Math.ceil((getTotalRecordCount() * 1.0) / getRecordCountPerPage()));
		
		xnext = getLastPageNoOnPageList() < realEnd;
		return xnext;
	}
	
	public void setXnext(boolean xnext) {
		this.xnext = xnext;
	}
	
	public int getRealEnd() {
		
		realEnd = (int)(Math.ceil((getTotalRecordCount() * 1.0) / getRecordCountPerPage()));
		
		return realEnd;
	}
	public void setRealEnd(int realEnd) {
		this.realEnd = realEnd;
	}
	
	

}

 

 

반응형

 

 

Pagination 작업이 끝났으면 Pagination을 받아줄 변수가 필요합니다.

boardVO에서 직접 받는 것보다 PageVO란 클래스를 만들어 boardVO에 상속한 다음 사용하도록 하겠습니다.

 

여기서는 페이징에 맞게 사용될 변수들을 선언해줍니다.

pageIndex	현재페이지
pageUnit	페이지갯수
pageSize	페이지사이즈
firstIndex	첫번째 인덱스
recordCountPerPage	한페이지당 게시되는 게시물 수
totCnt	총갯수
startDate	시작데이터
endDate	종료데이터
prev, next	prev, next
realEnd	페이징 마지막 숫자

 

 

 

여기서 현재페이지 갯수라던지 페이지갯수 페이지 사이즈 등을 default 값으로 지정해줍니다.

package com.spring.web.vo;

import java.io.UnsupportedEncodingException;
import java.net.URLEncoder;

public class PageVO {
	
	private int pageIndex = 1;				    //현재페이지
	private int pageUnit = 10;				    //페이지갯수
	private int pageSize = 10;	    			//페이지사이즈
	private int firstIndex = 1;		    		//firstIndex
	private int recordCountPerPage = 10;		//recordCountPerPage
	private int totCnt = 0;				      	//총갯수
	private int startDate = 0;			    	//시작데이터
	private int endDate = 0;				    //종료데이터
    private int realEnd = 0;				    //페이징 마지막 숫자
		
	private boolean prev, next;	    			//이전,다음버튼
	
	
	//getter&setter
  	public int getPageIndex() {
		return pageIndex;
	}

	public void setPageIndex(int pageIndex) {
		this.pageIndex = pageIndex;
	}

	public int getPageUnit() {
		return pageUnit;
	}

	public void setPageUnit(int pageUnit) {
		this.pageUnit = pageUnit;
	}

	public int getPageSize() {
		return pageSize;
	}

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

	public int getFirstIndex() {
		return firstIndex;
	}

	public void setFirstIndex(int firstIndex) {
		this.firstIndex = firstIndex;
	}

	public int getRecordCountPerPage() {
		return recordCountPerPage;
	}

	public void setRecordCountPerPage(int recordCountPerPage) {
		this.recordCountPerPage = recordCountPerPage;
	}

	public boolean isPrev() {
		return prev;
	}

	public void setPrev(boolean prev) {
		this.prev = prev;
	}

	public boolean isNext() {
		return next;
	}

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

	public int getTotCnt() {
		return totCnt;
	}

	public void setTotCnt(int totCnt) {
		this.totCnt = totCnt;
	}

	public int getStartDate() {
		return startDate;
	}

	public void setStartDate(int startDate) {
		this.startDate = startDate;
	}

	public int getEndDate() {
		return endDate;
	}

	public void setEndDate(int endDate) {
		this.endDate = endDate;
	}
    
    public int getRealEnd() {
		return realEnd;
	}

	public void setRealEnd(int realEnd) {
		this.realEnd = realEnd;
	}

	
	
}

 

 

boardVO

그리고 boardVO에 extends를 하고 PageVO를 선언하여 사용할 수 있도록 해줍니다.

 

public class boardVO extends PageVO {

 

 

BoardController

그럼 조금 전 만들었던 Pagination과 PageVO를 가지고 페이징 작업을 하도록 합니다.

pagination의 현재페이지번호(currentPageNo)에 pageindex의 값을 넣어줍니다.

pagination의 한페이지당 게시되는 게시물수(recordCountPerPage)에 pageunit의 디폴트 값 10을 넣어줍니다.

pagination의 페이지 리스트에 게시되는 페이지 수(pageSize)는 pageSize의 디폴트 값 10을넣어줍니다.

 

이렇게 pagination의 변수들에게 값을 넣어준 다음,  firstPageNoOnPageList 계산을 한 다음, firstIndex에 넣어줍니다.

 

searchVO의 (sql value)첫 인덱스 값(firstIndex)은 계산된 firstPageNoOnPageList의 값을 넣어줍니다.

searchVO의 (sql value)한 페이지당 게시되는 게시물 수(recordCountPerPage)는 recordCountPerPage의 값을 넣어줍니다.

그리고 getListCnt를 통해 게시판의 총 갯수를 구해주고,  totalRecordCount란 변수에 수를 넣어줍니다.

 

그리고 pagination에서 끝나는데이터와 시작하는데이터, 이전버튼, 다음버튼을 전부 계산한뒤에 pageVO의 값들로

넣어줍니다. 그리고 아래 model.addattribute로 빼주면 됩니다.

게시판 현황카운트로 사용될 totalPageCnt는 게시글 전체 값에서 한 페이지의 글 갯수를 나눠준 값을 해줍니다. 

 

//페이징[s]
Pagination pagination = new Pagination();
pagination.setCurrentPageNo(searchVO.getPageIndex());
pagination.setRecordCountPerPage(searchVO.getPageUnit());
pagination.setPageSize(searchVO.getPageSize());

searchVO.setFirstIndex(pagination.getFirstRecordIndex());
searchVO.setRecordCountPerPage(pagination.getRecordCountPerPage());

List<boardVO> boardList = boardService.getList(searchVO);
int totCnt = boardService.getListCnt(searchVO);

pagination.setTotalRecordCount(totCnt);

searchVO.setEndDate(pagination.getLastPageNoOnPageList());
searchVO.setStartDate(pagination.getFirstPageNoOnPageList());
searchVO.setPrev(pagination.getXprev());
searchVO.setNext(pagination.getXnext());
searchVO.setRealEnd(paginationInfo.getRealEnd());

model.addAttribute("boardList",boardList);
model.addAttribute("totCnt",totCnt);
model.addAttribute("totalPageCnt",(int)Math.ceil(totCnt / (double)searchVO.getPageUnit()));
model.addAttribute("pagination",pagination);
//페이징[e]

 

board.list 의 전체 소스

 

@RequestMapping(value = "/board/list", method = RequestMethod.GET)
public String list(@ModelAttribute("searchVO") boardVO searchVO, HttpServletRequest request, Model model) throws UnsupportedEncodingException {
    
    Map<String, ?> inputFlashMap = RequestContextUtils.getInputFlashMap(request);
    if(null != inputFlashMap) {
        
        model.addAttribute("msg",(String) inputFlashMap.get("msg"));
        
    }
    
    //페이징[s]
    Pagination pagination = new Pagination();
    pagination.setCurrentPageNo(searchVO.getPageIndex());
    pagination.setRecordCountPerPage(searchVO.getPageUnit());
    pagination.setPageSize(searchVO.getPageSize());
    
    searchVO.setFirstIndex(pagination.getFirstRecordIndex());
    searchVO.setRecordCountPerPage(pagination.getRecordCountPerPage());
    
    List<boardVO> boardList = boardService.getList(searchVO);
    int totCnt = boardService.getListCnt(searchVO);
    
    pagination.setTotalRecordCount(totCnt);
    
    searchVO.setEndDate(pagination.getLastPageNoOnPageList());
    searchVO.setStartDate(pagination.getFirstPageNoOnPageList());
    searchVO.setPrev(pagination.getXprev());
    searchVO.setNext(pagination.getXnext());
    
    model.addAttribute("boardList",boardList);
    model.addAttribute("totCnt",totCnt);
    model.addAttribute("totalPageCnt",(int)Math.ceil(totCnt / (double)searchVO.getPageUnit()));
    model.addAttribute("pagination",pagination);
    //페이징[e]
    
    searchVO.setQustr();
    
    return "/board/list";
}
 

 

 

 

 

 

 

게시글 리스트 불러오는 과정

 

 

controller

List<boardVO> boardList = boardService.getList(searchVO);
int totCnt = boardService.getListCnt(searchVO);

service

List<boardVO> getList(boardVO searchVO);
int getListCnt(boardVO searchVO);

serviceimpl

@Override
public List<boardVO> getList(boardVO searchVO) {
	 return mapper.getList(searchVO); 
}

@Override
public int getListCnt(boardVO searchVO) {
	return mapper.getListCnt(searchVO);
}

dao

public List<boardVO>getList(boardVO searchVO);
public int getListCnt(boardVO searchVO);

 

xml

 

xml에서 get 리스트는

searchVO의 firstIndex와 recordCountPerPage는 sql중, 리스트 마지막 부분에 사용됩니다.

limit 이 부분인데요  

예를 들어 recordCountPerPage가 10이고 firstIndex가 0이면

0번째 인덱스부터 10개를 보여준다는 의미입니다.

<select id="getList" parameterType="com.spring.web.vo.boardVO" resultType="com.spring.web.vo.boardVO">
<![CDATA[
	select
		*
	from
		tbl_board
]]>
<include refid="boardtWhere"/>
<![CDATA[			
	Order by board_idx desc
	LIMIT #{recordCountPerPage} OFFSET #{firstIndex}
]]>	
</select>

<select id="getListCnt" parameterType="com.spring.web.vo.boardVO" resultType="java.lang.Integer">
	select
		count(*)
	from
		tbl_board
	<include refid="boardtWhere"/>	
</select>

 

 

 

 

 

list.jsp

길고 긴 셋팅이 끝났습니다...

이젠 뷰에서 대입해보도록 하겠습니다.

 

테이블 바로 위에 스펜으로 총게시물 현황을 만들어줍니다.

그리고 페이징에서는 조건물을 사용해서

만약에 이전버튼이 있다면 fn_go_page 함수를 만들어 시작데이터에서 1를 빼줍니다.

foreach함수를 통해서 시작데이터부터 종료데이터까지 돌도록 만들어 놓고, fn_go_page 함수에 현재 숫자를 넣어줍니다.

그리고 다음버튼이 있다면  fn_go_page 함수를 만들어 종료데이터에 1를 더해줍니다.

function fn_go_page(pageNo) {
	$("#pageIndex").val(pageNo);
	$("#listForm").submit();
	return false;
}

<span>총게시물 ${totCnt} / 페이지 (${searchVO.pageIndex} / ${totalPageCnt})</span>
</div></div>
<div class="card-body">
<div class="table-responsive">
<table class="table table-bordered" width="100%" cellspacing="0" style="text-align:center;">
  <thead>
      <tr>
          <th>번호</th>
          <th>제목</th>
          <th>작성자</th>
          <th>등록일</th>
      </tr>
  </thead>
  <c:forEach var="list" items="${boardList}">
  	<tr>
  		<td><c:out value="${list.board_idx}" /></td>
  		<td>
  		<a href="/board/read?board_idx=${list.board_idx}&${searchVO.qustr}" >
  		<c:out value="${list.board_title}" />
  		</a>
  		</td>
  		<td><c:out value="${list.board_writer}" /></td>
  		<td><c:out value="${list.board_regdate}" /></td>
  	</tr>
  </c:forEach>
  </tbody>
</table>

<!-- Paging[s] -->

<div class="col-sm-12 col-md-7" style="text-align:right">
<div class="dataTables_paginate paging_simple_numbers" id="dataTable_paginate">
  <ul class="pagination">
  
  <c:if test="${searchVO.prev}">
  <li class="paginate_button page-item previous" id="dataTable_previous">
 		 <a href="javascript:void(0);" onclick="fn_go_page(${searchVO.startDate - 1}); return false;" aria-controls="dataTable" data-dt-idx="0" tabindex="0" class="page-link">Previous</a>
  </li>
  </c:if>
  
  <c:forEach var="num" begin="${searchVO.startDate}" end="${searchVO.endDate}">
  <li class="paginate_button page-item">
 		 <a href="javascript:void(0);" onclick="fn_go_page(${num}); return false;" aria-controls="dataTable" data-dt-idx="0" tabindex="0" class="page-link">${num}</a>
  </li>
  </c:forEach>
  
  <c:if test="${searchVO.next}">
  <li class="paginate_button page-item next" id="dataTable_next">
 		 <a href="javascript:void(0);" onclick="fn_go_page(${searchVO.endDate + 1}); return false;" aria-controls="dataTable" data-dt-idx="0" tabindex="0" class="page-link">Next</a>
  </li>
  </c:if>
  </ul>
</div>
</div>
<!-- Paging[e] -->

그리고 반드시!!! form안에 input hidden으로 pageIndex 값을 넣어줘야 서버로 들고갈 수 있습니다.

<form method="get"  id="listForm" action="/board/list">
	<input type="hidden" id="pageIndex" name="pageIndex" val="" />
    .
    .
    .
    .
    .
    .
    .
    .
</form>

</form>은 가장 밑에있는 </div> 아래에 넣어주세요! (include<footer.jsp> 위)

그래서 페이지 버튼을 누를때마다 fn_go_page의 함수를 타서 submit을 하기 때문에 url이나 인덱스값이 변할 수 있는 겁니다.

 

function fn_search(){
	$("#pageIndex").val("1");
	$("#listForm").submit();
	return false;
}

그리고 pageIndex 가 생겼기때문에 검색 함수인 fn_search도 pageIndex기본값을 1로 설정해줍니다. 

 

 

 

(페이징 버튼 클릭 시, 활성화 기능을 추가하였습니다. 2021년 5월 13일)

 

여기서 추가로 페이징 버튼을 누를 경우 강조효과(활성화)가 나타나도록 해보겠습니다.

 

 

 

list.jsp

 

우선 숫자가 나타나는 부분에 title값을 추가하여 ${num}을 넣어줍니다.

그리고 제이쿼리에서 코드를 작성합니다.

thisIndex에 서버에서 가지고온 서버값을 넣고,

페이징 부분을 each로 하여 반복합니다.

idx에 li에 대한 index를 넣어주고

thistitle에 title값을 가지고 옵니다.

만약 thisIndex값이 thistitle과 같다면,

페이지의 li의 해당 인덱스에 active를 클래스에 추가하여 활성화하도록 합니다.

(active에 대한 스타일은 해당 부트스트랩 css에 내장되어 있습니다.)

$(document).ready(function() {
	
var thisIndex = "${searchVO.pageIndex}"
$(".pagination li a").each(function(){
	var idx = $(this).parent().index();
	var thistitle = $(this).attr("title");
	if(thistitle == thisIndex){
		$(".pagination").find("li").eq(idx).addClass("active");
	}
});

});



<ul class="pagination">

<c:if test="${searchVO.prev}">
<li class="paginate_button page-item previous" id="dataTable_previous">
	 <a href="javascript:void(0);" onclick="fn_go_page(${searchVO.startDate - 1}); return false;" aria-controls="dataTable" data-dt-idx="0" tabindex="0" class="page-link">Previous</a>
</li>
</c:if>

<c:forEach var="num" begin="${searchVO.startDate}" end="${searchVO.endDate}">
<li class="paginate_button page-item">
	 <a href="javascript:void(0);" onclick="fn_go_page(${num}); return false;" aria-controls="dataTable" data-dt-idx="0" tabindex="0" class="page-link" title="${num}">${num}</a>
</li>
</c:forEach>

<c:if test="${searchVO.next}">
<li class="paginate_button page-item next" id="dataTable_next">
	 <a href="javascript:void(0);" onclick="fn_go_page(${searchVO.endDate + 1}); return false;" aria-controls="dataTable" data-dt-idx="0" tabindex="0" class="page-link">Next</a>
</li>
</c:if>
</ul>

그럼 페이징버튼 부분에 active, 즉 강조효과가 잘 나타는 것을 알 수 있습니다.

 

 

 

 

글이 너무 길어져서 페이징 쿼리스트링은 다음 포스팅에서 하도록 하겠습니다....

 

 

---

 

항목을 클릭하시면 해당 페이지로 이동합니다.
Spring 웹 홈페이지 개발 과정 리스트	(1) 자바설치 및 환경변수 설정
	(2) 이클립스 및 스프링 설치
	(3) 톰캣설치 방법
	(4) 이클립스 자바 환경설정 및 인코딩 설정방법
	(5) 데이터베이스(Mysql) 설치
	(6) 프로젝트 환경설정
	(7) 홈페이지 디자인 적용
	(8) 게시판 목록 페이지 작업
	(9) 게시판 등록 페이지 작업
	(10) 게시판 상세보기 페이지 작업
	(11) 게시판 수정/삭제 페이지 작업
	(12) 게시판 검색 페이지 작업
	(13) 게시판 페이징 작업
	(14) 게시판 페이징 쿼리스트링 작업
	(15) 회원가입 작업 (feat.아이디 중복체크/비밀번호 암호화)
	(16) 로그인/로그아웃 작업 (feat.아이디 기억하기)
	(17) 아이디&비밀번호 찾기
	(18) 마이페이지 정보&비밀번호 수정

 

 

 

 

---

 

새로 작성한 AJAX 페이징 방식 글입니다!! 구현하실 분들은 참고해주세요!

https://chobopark.tistory.com/249

AJAX 페이징 구현 방법!! (영상 有)

 

---