Last Modified 2022.10.25
다음 글, 이전 글 기능 수정
현재 '다음 글' '이전 글' 기능은, 하나를 연이어 사용해서 다른 페이지에 속한 글을 볼 때, 페이지를 변경시키지 못한다.
다음은 글을 보기 위한 폼이다.
<form id="viewForm" action="/bbs/${boardCd }/" method="get"> <input type="hidden" name="page" value="${param.page }" /> <input type="hidden" name="searchWord" value="${param.searchWord }" /> </form>
'이전 글'의 번호가 현재 페이지의 마지막 글의 번호보다 작다면, viewForm 폼에서 page 값을 1 증가시켜야 한다.
아래 그림 참조
'다음 글'의 번호가 현재 페이지의 첫 번째 글의 번호보다 크다면, viewForm 폼에서 page 값을 1 감소시켜야 한다.
아래 그림 참조
자바스크립트에서 viewForm의 page에 쉽게 접근할 수 있도록 id를 아래처럼 추가한다.
<form id="viewForm" action="/bbs/${boardCd }/" method="get"> <input type="hidden" name="page" value="${param.page }" id="viewForm-page" /> <input type="hidden" name="searchWord" value="${param.searchWord }" /> </form>
다음은 관련 HTML 코드다.
View page source
<div class="next-prev"> <p>Next Article : <a href="#" title="9105" id="next-article-link">sysctl vm.swappiness</a></p> <p>Prev Article : <a href="#" title="9103" id="prev-article-link">free -h</a></p> </div> <div class="view-menu" style="margin-bottom: 47px;"> <div class="fl"> <input type="button" value="Modify" class="goModify" /> <input type="button" value="Del" class="goDelete" /> </div> <div class="fr"> <input type="button" value="Next Article" title="9105" class="next-article" /> <input type="button" value="Prev Article" title="9103" class="prev-article" /> <input type="button" value="List" class="goList" /> <input type="button" value="New" class="goWrite" /> </div> </div> <table id="list-table" class="bbs-table"> <tr> <th style="width: 60px;">NO</th> <th>TITLE</th> <th style="width: 84px;">DATE</th> <th style="width: 60px;">HIT</th> </tr> <tr> <td style="text-align: center;"><img src="/resources/images/arrow.gif" alt="You are Here!" /></td> <td><a href="#" title="9104">swapon -s</a></td> <td style="text-align: center;">10/9/22</td> <td style="text-align: center;">9</td> </tr> <!-- omit --> </table> <!-- omit -->
HTML 코드를 참조해 다음 글과 이전 글 링크의 자바스크립트 핸들러를 수정한다.
Before
$('.next-prev a').click(function (e) { e.preventDefault(); var articleNo = this.title; var action = $('#viewForm').attr('action'); action += articleNo; $('#viewForm').attr('action', action); $('#viewForm').submit(); });
After
$('#next-article-link').click(function (e) { e.preventDefault(); var nextArticleNo = this.title; var action = $('#viewForm').attr('action'); action += nextArticleNo; $('#viewForm').attr('action', action); var firstItemNo = $('#list-table tr:nth-child(2) td:nth-child(2) a').attr('title'); if (parseInt(nextArticleNo) > parseInt(firstItemNo)) { $('#viewForm-page').val(${param.page - 1}); } $('#viewForm').submit(); }); $('#prev-article-link').click(function (e) { e.preventDefault(); var prevArticleNo = this.title; var action = $('#viewForm').attr('action'); action += prevArticleNo; $('#viewForm').attr('action', action); var lastItemNo = $('#list-table tr:last-child td:nth-child(2) a').attr('title'); if (parseInt(prevArticleNo) < parseInt(lastItemNo)) { $('#viewForm-page').val(${param.page + 1}); } $('#viewForm').submit(); });
다음 글과 이전 글 버튼에 대한 자바스크립트 코드를 변경한다.
Before
$('.next-article').click(function () { var articleNo = this.title; var action = $('#viewForm').attr('action'); action += articleNo; $('#viewForm').attr('action', action); $('#viewForm').submit(); }); $('.prev-article').click(function () { var articleNo = this.title; var action = $('#viewForm').attr('action'); action += articleNo; $('#viewForm').attr('action', action); $('#viewForm').submit(); });
After
$('.next-article').click(function () { var nextArticleNo = this.title; var action = $('#viewForm').attr('action'); action += nextArticleNo; $('#viewForm').attr('action', action); var firstItemNo = $('#list-table tr:nth-child(2) td:nth-child(2) a').attr('title'); if (parseInt(nextArticleNo) > parseInt(firstItemNo)) { $('#viewForm-page').val(${param.page - 1}); } $('#viewForm').submit(); }); $('.prev-article').click(function () { var prevArticleNo = this.title; var action = $('#viewForm').attr('action'); action += prevArticleNo; $('#viewForm').attr('action', action); var lastItemNo = $('#list-table tr:last-child td:nth-child(2) a').attr('title'); if (parseInt(prevArticleNo) < parseInt(lastItemNo)) { $('#viewForm-page').val(${param.page + 1}); } $('#viewForm').submit(); });참조