페이징처리 - 3 (html수정, 자바스크립트 , ajax)

프레임워크 : 마이바티스 (mybatis) 

view템플릿 : 타임리프 thymleaf

 

1.board_list.html에 페이징을 추가해보자 

 

폼 제일 끝 부분에 currentPage 값을 넣는다. 폼 제출시마다 currentPage가 설정되어야하고 사용자가 함부로 변경되어서는 안되기 때문에 hidden 타입으로 넣어주고 디폴트는 1로 해준다 . 디폴트는 currentPage가 바뀔 떄마다 변경된다 .

</table>

                <input type="hidden" name="currentPage" id="currentPage" value="1">
            </form>

 

페이징을 넣을 자리에 자바스크립트 id 부분을 넣는다.

            <div id = "pagingNation">

자바 스크립트 부분에서 페이징을 추가하기

자바스크립트 문법 :

$('input').val();

input의 value값을 가져온다. 주로 변경할 값을 변경할 때 씀

 

id값이 currentPage인 currentPage 를 가져온다 . 변경하려고 가져옴

<script>
function getBoard(currentPage){
$('#currentPage').val(currentPage);

ajax에서도 url을 추가해준다 .

$.ajax({
            url: '/api/board/list?currentPage='+currentPage,
            type : 'GET',
            dataType : 'json',
            data : null

ajax 성공시 실행될 함수 result

function(result)는ajax에서 쓰는 콜백함수이다. 앞에 로딩이 성공했을 때 result가 실행된다.

   }).done(function (result){
           var tbody = $('#boardRows');
           tbody.empty();
           $.each(result.data, function(index,obj){
               var tr = $('<tr></tr>')
               var td = '';
               td += '<td style = "text-align:center">' + obj.boardNo+'</td>';
               td += '<td style = "text-align:left">' + obj.title+'</td>';
               td += '<td style = "text-align:left">' + obj.writer+'</td>';
               td += '<td style = "text-align:left">' + obj.regDate+'</td>';
                tr.append(td);
                tbody.append(tr);
           });

start는 웹 페이지 하단 페이지 시작부분

end는 웹 페이지 하단 페이지 마지막 부분

  var start = result.pager.pageRangeStart;
           var end = result.pager.pageRangeEnd;

id값이 pagingNation이 시작되면

기존 내용을 지운다 . 로드 될 때 이전 데이터 말고

현재 데이터를 써야하기 때문

           var pagingNationDiv = $('#pagingNation');
           pagingNationDiv.empty(); 


           var currentPage = $('#currentPage').val();

처음을 누르면 1로 감

   pagingNationDiv.append('[<a href= "#" onclick="getBoard(1)">'+'처음</a>]' )

 for(let i = start; i<=end; i++){
               if(currentPage == i) {
                  pagingNationDiv.append('<strong>' +i+ '</strong>');
               }else{
                  pagingNationDiv.append("  <a href=\"javascript:getBoard('"+i+"')\">" +i +"</a>");
               }
            }

totalpage의 갯수는 마지막 페이지의 갯수와 같다 .

  pagingNationDiv.append("  <a href=\"javascript:getBoard('"+result.pager.totalPage+"')\">" +"마지막</a>");

       });
    }