Jquery AJAX 페이지네이션(pagination) 구현

AJAX를 통해 데이터를 통신하고 이를 통해 화면의 UI를 구현할 경우 데이터가 들어갈 템플릿을 만들고 데이터를 뿌려주게 됩니다

백엔드에서 페이징된 api를 구성하여 준다고 가정하였을경우 페이징을 하는 코드를 구현하였습니다

 

AJAX GET통신을 하기 위한 코드 예시를 보겠습니다

 

HTML

<button> 페이지 더보기 </button>

<h1> 제목이 들어갑니다 </h1>
<p> 본문이 들어갑니다 </p>

먼저 데이터가 들어오게될 HTML 코드를 작성했습니다

HTML 태그의 클래스를 부여하여 스크립트가 동작할 수 있는 준비를 해주어야 합니다

<button class="add-page-btn"> 페이지 더보기 </button>

<div class="box">
    <h1 class="title"> 제목이 들어갑니다 </h1>
    <p class="contents"> 본문이 들어갑니다 </p>
</div>

다음 AJAX를 사용하는 코드를 예시로 보겠습니다

 

Script

cosnt city = [
    {
        title : "서울",
        contents : "연남동",
    },
    {
        title : "부산",
        contents "반여동",
    },
    {
        title : "부천",
        contents: "중동",
    }
]

$('.add-page-btn').on('click', () => {
	$.get("http://localhost:3000/city?page=0")
    	.done((result) => {
        	console.log(result);
        })
        .fail((error) => {
        	console.log(error)
        })
})

AJAX를 호출할 코드입니다 예시이기에 실제로 호출 주소는 다릅니다

이걸 Jquery의 방식으로 템플릿을 만들어 데이터를 뿌려주는 코드를 만들어 보자면

 

$('.add-page-btn').on('click', () => {
	$.get("http://localhost:3000/city?page=0")
    	.done((result) => {
			result.forEach((cityData) => {
            	let cityTemplate = `
                	<h1 class="title"> ${cityData.title} </h1>
    			<p class="contents"> ${cityData.contents} </p>
                `
                $('.box').append(cityTemplate);
            })
        })
        .fail((error) => {
        	console.log(error);
        })
})

AJAX의 api주소를 보면 page=0에 해당하는 데이터를 가져왔습니다 버튼을 누르면 page=1, 또 한번 누르면 page=2가 되어 다른 데이터를 보여주어야 한다고 가정해보겠습니다

 

const cityAjax = () => {
	const paging = 0;
    $('.add-page-btn').on('click', () => {
    	paging += 1;
        $.get(`http://localhost:3000/city?page=${paging}`)
            .done((result) => {
                result.forEach((cityData) => {
                    let cityTemplate = `
                        <h1 class="title"> ${cityData.title} </h1>
                    <p class="contents"> ${cityData.contents} </p>
                    `
                    $('.box').append(cityTemplate);
                })
            })
            .fail((error) => {
                console.log(error);
            })
    })
}

이렇게하면 될거 같습니다 버튼을 누를때마다 paging 숫자가 올라가면서 api주소의 page 숫자도 같이 올라가게 하면 됩니다