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 증가시켜야 한다.
아래 그림 참조

detail view page of the board program

'다음 글'의 번호가 현재 페이지의 첫 번째 글의 번호보다 크다면, viewForm 폼에서 page 값을 1 감소시켜야 한다.
아래 그림 참조

detail view page of the board program

자바스크립트에서 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();
});
관련 글 참조