페이지네이션 관련 질문

페이지네이션 관련 질문

QA

페이지네이션 관련 질문

답변 1

본문

페이지네이션을 보여줄수 있는 코드를 작성하고자 합니다.

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>

이 질문에 댓글 쓰기 :

답변 1

답변을 작성하시기 전에 로그인 해주세요.
QA 내용 검색
질문등록
전체 95
© SIRSOFT
현재 페이지 제일 처음으로