페이지네이션 관련 질문
본문
페이지네이션을 보여줄수 있는 코드를 작성하고자 합니다.
1. 드롭다운 목록에서 선택한 수 만금 테이블 데이터가 보이기
2. 현재 보여지고 있는 데이터 수를 기준으로 페이지네이션 페이지 숫자가 자동으로 바뀌기
=> 현재 페이지네이션 페이지 숫자가 전혀 보이지 않습니다.
아래 코드를 보시고 잘못된점 있으면 알려주세요ㅠㅠ
<section class="content">
<div class="row">
<div class="col-md-12">
<div class="box">
<div class="box-header">
<div class="row">
<div class="col-md-2">
Total : <%= datas.length %>
</div>
<div class="col-md-10 text-right">
<form method="get" action="/customer_notice_list" name="frm" id="frm" class="form-inline">
<div class="form-inline">
<select name="s_where" id="s_where" class="form-control">
<option value="">전체</option>
<option value="subject">제목</option>
<option value="content">내용</option>
</select>
<div class="input-group form-inline">
<input type="text" name="s_keyword" id="s_keyword" value="" class="form-control"/>
<span class="input-group-btn">
<button type="submit" class="btn btn-md btn-primary" style="margin: 5px;">검색</button>
<a href="/customer_notice_list" class="btn btn-md btn-default">초기</a>
</span>
<!-- 드롭다운 목록 시작 -->
<select id="rows" onchange="updateRowsPerPage(this.value)">
<option value="10" selected>10개</option>
<option value="20">20개</option>
<option value="30">30개</option>
</select>
<!-- 드롭다운 목록 끝 -->
</div>
</div>
</form>
</div>
</div>
</div>
<div class="box-body table-responsive no-padding">
<form action="/customer_notice_delete" name="list_form" id="list_form" method="post">
<table class="table table-hover table-bordered tb-list" id="myTable">
<thead>
<tr> <!-- 관리자일 경우 체크박스 보이기 시작 -->
<% if (ability==900) { %>
<th style="width: 50px;">
<input type="checkbox" class="" name="chAll" id="chAll"/>
</th>
<% } %>
<!-- 관리자일 경우 체크박스 보이기 끝 -->
<th style="width: 50px;">No</th>
<th>제목</th>
<th style="width: 110px;">작성자</th>
<th style="width: 170px;">등록일</th>
<!-- 관리자일 경우 수정버튼 보이기 시작 -->
<% if (ability==900) { %>
<th style="width: 75px;">수정</th>
<% } %>
<!-- 관리자일 경우 수정버튼 보이기 끝 -->
</tr>
</thead>
<tbody>
<!--데이터 갯수만큼 for 돌리기 시작-->
<% for (let i=0; i < datas.length; i++) {
const v = datas[i]; %>
<tr>
<!-- 관리자일 경우 체크박스 보이기 시작 -->
<% if (ability==900) { %>
<td>
<input type="checkbox" class="chList" name="chList" value="<%= v.idx %>"/>
</td>
<% } %>
<!-- 관리자일 경우 체크박스 보이기 끝 -->
<td><%= datas.length-i %></td> <!-- No -->
<td style="text-align: left !important;"><a href="<%= '/customer_notice/' + v.idx %>"><%= v.subject %></a></td> <!-- 제목 클릭시 상세 화면 이동[인덱스+제목] -->
<td><%= v.usernm %></td> <!-- 유저 네임 -->
<td><%= v.cDate %></td> <!-- 등록일 cDate -->
<!-- 관리자일 경우 수정 버튼 시작 -->
<% if (ability==900) { %>
<td><a href="<%= '/customer_notice_update/' + v.idx %>" class="btn btn-sm btn-success">수정</a></td>
<% } %>
<!-- 관리자일 경우 수정 버튼 끝 -->
</tr>
<% } %>
<!--데이터 갯수만큼 for 돌리기 끝-->
</tbody>
</table>
<div class="box-footer">
<div class="pagination" id="pagination"></div>
<button onclick="updateTotalRows()">데이터 갱신</button>
<!-- 관리자일 경우 삭제, 등록 버튼 보이기 시작 -->
<% if (ability==900) { %>
<button type="submit" class="btn btn-danger btn-list-del" style="float: left;">삭제</button>
<a href="/customer_notice_add" class="btn btn-primary pull-right">등록</a>
<% } %>
<!-- 관리자일 경우 삭제, 등록 버튼 보이기 끝 -->
</div>
</form>
</div>
</div>
</div>
</div>
<script>
var currentPage = 1;
var rowsPerPage = 10;
var totalRows = 100;
var totalPages = Math.ceil(totalRows / rowsPerPage);
window.onload = function () {
showRows(currentPage, rowsPerPage);
renderPagination();
};
function showRows(pageNum, pageSize) {
var table = document.getElementById('myTable');
var rows = table.getElementsByTagName('tbody')[0].getElementsByTagName('tr');
var startIndex = (pageNum - 1) * pageSize;
var endIndex = Math.min(startIndex + pageSize, rows.length);
for (var i = 0; i < rows.length; i++) {
if (i >= startIndex && i < endIndex) {
rows[i].style.display = 'table-row';
} else {
rows[i].style.display = 'none';
}
}
}
function updatePagination() {
var pagination = document.getElementById("pagination");
pagination.innerHTML = "";
totalPages = Math.ceil(totalRows / rowsPerPage); // 페이지 수 업데이트
for (var i = 1; i <= totalPages; i++) {
var link = document.createElement("a");
link.href = "#";
link.textContent = i;
link.onclick = function() {
currentPage = parseInt(this.textContent);
showRows(currentPage, rowsPerPage);
updatePagination();
};
pagination.appendChild(link);
}
}
function updateTotalRows() {
var table = document.getElementById("myTable");
var rows = table.getElementsByTagName("tbody")[0].getElementsByTagName("tr");
totalRows = rows.length;
currentPage = 1;
showRows(currentPage, rowsPerPage);
updatePagination();
}
function updateRowsPerPage(value) {
rowsPerPage = parseInt(value);
currentPage = 1;
showRows(currentPage, rowsPerPage);
updatePagination();
}
</script>
</section>
</div>
</div>
</section>
답변을 작성하시기 전에 로그인 해주세요.
