페이지네이션 관련 질문
페이지네이션을 보여줄수 있는 코드를 작성하고자 합니다.
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></p>
<p> <script>
var currentPage = 1;
var rowsPerPage = 10;
var totalRows = 100;
var totalPages = Math.ceil(totalRows / rowsPerPage);</p>
<p> window.onload = function () {
showRows(currentPage, rowsPerPage);
renderPagination();
};</p>
<p> function showRows(pageNum, pageSize) {
var table = document.getElementById('myTable');
var rows = table.getElementsByTagName('tbody')[0].getElementsByTagName('tr');</p>
<p> var startIndex = (pageNum - 1) * pageSize;
var endIndex = Math.min(startIndex + pageSize, rows.length);</p>
<p> 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';
}
}
}</p>
<p> function updatePagination() {
var pagination = document.getElementById("pagination");
pagination.innerHTML = "";</p>
<p> totalPages = Math.ceil(totalRows / rowsPerPage); // 페이지 수 업데이트</p>
<p> 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();
};</p>
<p> pagination.appendChild(link);
}
}</p>
<p> function updateTotalRows() {
var table = document.getElementById("myTable");
var rows = table.getElementsByTagName("tbody")[0].getElementsByTagName("tr");
totalRows = rows.length;
currentPage = 1;
showRows(currentPage, rowsPerPage);
updatePagination();
}</p>
<p> function updateRowsPerPage(value) {
rowsPerPage = parseInt(value);
currentPage = 1;
showRows(currentPage, rowsPerPage);
updatePagination();
}
</script>
</section>
</div>
</div>
</section></p>
<p>
댓글을 작성하려면 로그인이 필요합니다.
답변 1개
댓글을 작성하려면 로그인이 필요합니다.
답변을 작성하려면 로그인이 필요합니다.
로그인전체 질문 목록
채택
채택
채택
답변대기
채택
채택
채택
답변대기
답변대기
답변대기
채택
채택
채택
채택
채택
채택
채택
답변대기