[ajax로 페이징처리(정석적인 방식)]
<body>
<h3>리스트 페이지</h3>
<fieldset>
페이지 당 보여줄 게시물 수 :
<select id="pagePerNum">
<option value="5">5</option>
<option value="10">10</option>
<option value="15">15</option>
<option value="20">20</option>
</select>
</fieldset>
<table>
<thead>
<tr>
<td>번호</td>
<td>제목</td>
<td>작성자</td>
<td>작성일</td>
<td>조회수</td>
</tr>
</thead>
<tbody id="list">
<!-- 불러온 데이터 뿌리는 영역-->
</tbody>
<tr>
<td id="paging" colspan="6"></td>
</tr>
</table>
</body>
<script>
var showPage = 1;
//몇개를 보여줄 것인지 / 몇페이지
listCall(showPage); //시작하자마자 이 함수를 호출
$("#pagePerNum").change(function(){ //select box의 값을 변경 할 때 마다 실행
listCall(showPage);
});
function listCall(reqPage){
//Restful service는 ajax를 통해 호출하여 사용하는 경우가 많지만
//restful service가 곧 ajax라고 생각해서는 안된다.
var reqUrl = './list/'+$("#pagePerNum").val()+"/"+reqPage;
$.ajax({
url:reqUrl,
type:'GET',
data:{},
dataType:'JSON',
success:function(data){
console.log(data);
showPage =data.currPage;
//listPrint(data.list);
//pagePrint(data.range);
},
error:function(error){
console.log(error);
}
});
}
//정석적인 방법(요즘 잘안씀)
function pagePrint(range){
console.log($("#pagePerNum").val());
console.log("생성가능페이지 : "+ range);
console.log("현재페이지 : "+showPage);
var content ="";
var start = 1;
var end = range >= 5 ? 5 : range;
//이전(5페이지가 넘어 갔을 때 나타남)
if(showPage>5){
end = Math.ceil(showPage/5)*5
if(end>range){
end=range
}
start= end-4
content += "<a href='#' onclick='listCall("+(start-1)+")'>이전</a> | "
}
//1 ~ 5
console.log(start+"~"+end)
for(var i=start; i<=end; i++){
if(i==showPage){
content += "<b style='color:blue'>"+i+"</b> ";
}else{
content += "<a href='#' onclick='listCall("+i+")'>"+i+"</a> ";
}
}
//다음(range가 현재 마지막 페이지 (5) 보다 더 있을 경우 나타남)
if(end<range){
content += "| <a href='#' onclick='listCall("+(end+1)+")'>다음</a> "
}
$('#paging').empty();
$('#paging').append(content);
}
function listPrint(list){
var content="";
for (var i = 0; i < list.length;i++) {
content += "<tr>"
content += "<td>"+list[i].boardIdx+"</td>"
content += "<td>"+list[i].subject+"</td>"
content += "<td>"+list[i].id+"</td>"
//java에서 가끔 날짜가 milliseconds로 나올 경우..
var date = new Date(list[i].reg_date);
content += "<td>"+date.toLocaleDateString("ko-KR")+"</td>"
content += "<td>"+list[i].bHit+"</td>"
content += "</tr>"
}
$('#list').empty();//계속 더해지는것을 방지하기 위해 내용 비우기
$('#list').append(content);
}
</script>[ajax로 페이징처리(부트스트랩이용)]
<body>
<h3>리스트 페이지</h3>
<fieldset>
페이지 당 보여줄 게시물 수 : <select id="pagePerNum">
<option value="5">5</option>
<option value="10">10</option>
<option value="15">15</option>
<option value="20">20</option>
</select>
</fieldset>
<table>
<thead>
<tr>
<td>번호</td>
<td>제목</td>
<td>작성자</td>
<td>작성일</td>
<td>조회수</td>
</tr>
</thead>
<tbody id="list">
<!-- 불러온 데이터 뿌리는 영역-->
</tbody>
<tr>
<td id="paging" colspan="6">
<!-- 플러그인 사용 -->
<div class="container">
<nav aria-label="page navigation" style="text-align: center">
<ul class="pagination" id="pagination"></ul>
</nav>
</div>
</td>
</tr>
</table>
</body>
<script>
var showPage = 1;
//몇개를 보여줄 것인지 / 몇페이지
listCall(showPage); //시작하자마자 이 함수를 호출
$("#pagePerNum").change(function() { //select box의 값을 변경 할 때 마다 실행
//이구문이 없으면 페이지당 개수 조정시 페이징 변경이 일어나지 않음.
$('#pagination').twbsPagination('destroy');
listCall(showPage);
});
function listCall(reqPage) {
//Restful service는 ajax를 통해 호출하여 사용하는 경우가 많지만
//restful service가 곧 ajax라고 생각해서는 안된다.
var reqUrl = './list/' + $("#pagePerNum").val() + "/" + reqPage;
$.ajax({
url : reqUrl,
type : 'GET',
data : {},
dataType : 'JSON',
success : function(data) {
console.log(data);
showPage = data.currPage;
listPrint(data.list);
//pagePrint(data.range);//플러그인 미사용 페이징 처리
//플러그인 사용
$('#pagination').twbsPagination({
startPage : data.currPage, //시작 페이지
totalPages : data.range, //생성가능 최대 페이지
visiblePages : 5,//5개씩 보여주겠다
onPageClick : function(evt, page) {//각 페이지를 눌렀을 경우
console.log(evt);
console.log(page);
listCall(page);
}
});
},
error : function(error) {
console.log(error);
}
});
}
//정석적인 방법(요즘 잘안씀)
function pagePrint(range) {
console.log($("#pagePerNum").val());
console.log("생성가능페이지 : " + range);
console.log("현재페이지 : " + showPage);
var content = "";
var start = 1;
var end = range >= 5 ? 5 : range;
//이전(5페이지가 넘어 갔을 때 나타남)
if (showPage > 5) {
end = Math.ceil(showPage / 5) * 5
if (end > range) {
end = range
}
start = end - 4
content += "<a href='#' onclick='listCall(" + (start - 1)
+ ")'>이전</a> | "
}
//1 ~ 5
console.log(start + "~" + end)
for (var i = start; i <= end; i++) {
if (i == showPage) {
content += "<b style='color:blue'>" + i + "</b> ";
} else {
content += "<a href='#' onclick='listCall(" + i + ")'>" + i
+ "</a> ";
}
}
//다음(range가 현재 마지막 페이지 (5) 보다 더 있을 경우 나타남)
if (end < range) {
content += "| <a href='#' onclick='listCall(" + (end + 1)
+ ")'>다음</a> "
}
$('#paging').empty();
$('#paging').append(content);
}
function listPrint(list) {
var content = "";
for (var i = 0; i < list.length; i++) {
content += "<tr>"
content += "<td>" + list[i].boardIdx + "</td>"
content += "<td>" + list[i].subject + "</td>"
content += "<td>" + list[i].id + "</td>"
//java에서 가끔 날짜가 milliseconds로 나올 경우..
var date = new Date(list[i].reg_date);
content += "<td>" + date.toLocaleDateString("ko-KR") + "</td>"
content += "<td>" + list[i].bHit + "</td>"
content += "</tr>"
}
$('#list').empty();//계속 더해지는것을 방지하기 위해 내용 비우기
$('#list').append(content);
}
</script>
</script>
개발이좋아요