티스토리 뷰

HMLT&CSS&JS/javascript

PAGINATION

turfrain 2023. 2. 28. 11:20

# 넘버링

- 결과

Document

- 소스  

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
  <script src="https://code.jquery.com/jquery-3.6.3.min.js" integrity="sha256-pvPw+upLPUjgMXY0G+8O0xUf+/Im1MZjXxxgOcBQBXU=" crossorigin="anonymous"></script>
</head>
<body>
   <div class="info"></div>
   <div class="page_groupTotal"></div>
   <div class="page_totalArr"></div>   
   <div class="page_groupCurrten"></div>   
   <div class="page_group"></div>
   <br>
   <div class="page_groupArr"></div>
   
</body>

 <script>
    var total     = 324;      // 총 데이터수
    var data_view = 10;       // 한페이지 데이터수
    var page_view = 5;        // 한페이지 페이징수
    var page_current = 31;    // 현재 페이지
    
      $(".page_groupArr").text("page_groupArr : "+ pageViewFN(total, data_view, page_view, page_current)); 
        function pageViewFN(total, data_view, page_view, page_current){

        let page_groupTotal   = Math.ceil(total / data_view);        // 총 페이지수
        let page_totalArr     = groupArray(1, page_groupTotal);      // 전체 페이지
        let page_groupCurrten = Math.ceil(page_current / page_view); // 현재 페이지

        let page_group = [];
        var p_end    = page_groupCurrten * page_view;
        var p_start  = p_end - (page_view - 1);
        if( page_groupTotal <= p_end ){ p_end = page_groupTotal}
        page_group = groupArray(p_start, p_end);

        /* 영역 배열 */
        function groupArray($start, $end){
          var tempArr = [];
          for(var i=$start ; i <= $end ; i++){
            tempArr.push(i);
          }
          return tempArr;
        }

        $(".info").text("total : "+ total + 
        " //        data_view : "+ data_view + 
        " //        page_view : "+ page_view + 
        " //        page_current : "+ page_current );
        $(".page_groupTotal").text("page_groupTotal : "+ page_groupTotal);
        $(".page_totalArr").text("page_totalArr : "+ page_totalArr);
        $(".page_groupCurrten").text("page_groupCurrten : "+ page_groupCurrten);
        $(".page_group").text("page_group : "+ page_group);

         return page_group
      }
 </script>


</html>

 

'HMLT&CSS&JS > javascript' 카테고리의 다른 글

[javascript] 수식  (0) 2024.04.04
[API]scrollIntoView  (0) 2023.10.31
JS [EVENT] 생성  (0) 2021.11.01
[NODE.JS] fs  (0) 2021.01.28
[window.print()] 원하는 영역 인프린트  (0) 2020.04.03
댓글
공지사항
최근에 올라온 글
최근에 달린 댓글
Total
Today
Yesterday