팬더다이녀석들아
296
2020-12-11 14:44:12 작성 2020-12-11 14:51:59 수정됨
4
426

백엔드를 건드리지 않고 순수 자바스크립트만으로 페이징처리를 할수있는 방법이 있을까요??




<style>
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+KR:wght@100;200;300;400;500;700;900&display=swap');
    a {text-decoration: none; color: #000;}
.btn{padding:0;background:transparent;border:0;outline:0}
.clearfix::after{display:block;content:'';clear:both}
    
    #content_area_div {width: 1400px; height:500px; margin:0 auto;}
    #content_area_div > div {float: left; width: 300px; height: 250px; background-color: #bdbdbd; margin: 40px 25px;}
.product_submenu {text-align: center;}

.tab_wrap{width:1920px;height: 500px; margin:50 auto; text-align: center;}
.tab_wrap .btn_tab{width:120px;height:30px;background:#bdbdbd; text-align:center;line-height:30px; margin:5px; cursor: pointer}
.tab_wrap .btn_tab1{width:120px;height:30px; text-align:center;line-height:30px; margin-left:-5px; cursor: pointer}
.tab_wrap .btn_tab1.act{font-weight:bold}
.btn_area1 {border: 1px solid black; width: 900px; height: 50px; margin: 50 auto; line-height: 50px;}
.btn_area1 button {border-right: 1px solid black;}
.btn_area1 button:last-child {border: none;}
.tab_wrap .content_area{display:none; background:#fff; border-radius:0 0 10px 10px; box-sizing:border-box;}
.tab_wrap .content_area.act{display:block; background-color: #fff;}
.tab_wrap *[data-depth="1"]{background:#fff}
   
    *{font-family: 'Noto Sans KR', sans-serif; }
    *[data-depth="1"]:first-child {font-weight: 500;}
    *[data-depth="1"] {font-weight: 100;}
    
    .btn_area1[data-depth="2"] {margin-top:200px;}
    
    .act[data-depth="2"] {background: #000; border-radius: 15px; color:#fff}
    *[data-depth="2"] {background-color: #eeeeee; border-radius: 15px;}
    
    .span_product1 {float: left; font-size: 14px; font-weight: 300;}
    .span_product2 {float: left; font-weight: 500;}
</style>


<div class="product_submenu"><img src="http://widat.cafe24.com//behom/submenu/pro_sub.jpg" alt=""></div>
 <div class="tab_wrap tab_area">
  <div class="btn_area clearfix">
    <button class="btn btn_tab1 act" data-depth="0" data-idx="0" style="color:#ff9215">전체상품</button>
    <button class="btn btn_tab1" data-depth="0" data-idx="1">붙박이장</button>
    <button class="btn btn_tab1" data-depth="0" data-idx="2">주방가구</button>
    <button class="btn btn_tab1" data-depth="0" data-idx="3">바스&판넬</button>
    <button class="btn btn_tab1" data-depth="0" data-idx="4">가구&소품</button>
    <button class="btn btn_tab1" data-depth="0" data-idx="5" style="color:#ff9215">카달로그</button>
  </div>
  
  <div class="content_area act" data-depth="0" data-idx="0">
      <div class="tab_area">
      <div class="btn_area1 clearfix">
        <button class="btn btn_tab1 act" data-depth="1" data-idx="0" style="border-right: none; margin-left:110px;">전체상품</button>
        <button class="btn btn_tab1 act" data-depth="1" data-idx="1">&nbsp;</button>
      </div>

      <div class="content_area act" data-depth="1" data-idx="0" id="content_area_div">
          <div>
              <a href="#"><img src="http://widat.cafe24.com//behom/boot/slide/slide1_fulity.png"></a>
              <span class="span_product1"><a href="#">붙박이장</a> > <a href="#">슬라이드</a> > BE9-155270250</span><br><br>
              <span class="span_product2">퓨리티</span><br>
          </div>
          <div>
              <a href="#"><img src="http://widat.cafe24.com//behom/boot/slide/slide1_fulity.png"></a>
              <span class="span_product1"><a href="#">붙박이장</a> > <a href="#">슬라이드</a> > BE9-155270250</span><br><br>
              <span class="span_product2">퓨리티</span><br>
          </div>
          <div>
              <a href="#"><img src="http://widat.cafe24.com//behom/boot/slide/slide1_fulity.png"></a>
              <span class="span_product1"><a href="#">붙박이장</a> > <a href="#">슬라이드</a> > BE9-155270250</span><br><br>
              <span class="span_product2">퓨리티</span><br>
          </div>
          <div>
              <a href="#"><img src="http://widat.cafe24.com//behom/boot/slide/slide1_fulity.png"></a>
              <span class="span_product1"><a href="#">붙박이장</a> > <a href="#">슬라이드</a> > BE9-155270250</span><br><br>
              <span class="span_product2">퓨리티</span><br>
          </div>
          <div>
              <a href="#"><img src="http://widat.cafe24.com//behom/boot/slide/slide1_fulity.png"></a>
              <span class="span_product1"><a href="#">붙박이장</a> > <a href="#">슬라이드</a> > BE9-155270250</span><br><br>
              <span class="span_product2">퓨리티</span><br>
          </div>
          <div>
              <a href="#"><img src="http://widat.cafe24.com//behom/boot/slide/slide1_fulity.png"></a>
              <span class="span_product1"><a href="#">붙박이장</a> > <a href="#">슬라이드</a> > BE9-155270250</span><br><br>
              <span class="span_product2">퓨리티</span><br>
          </div>
          <div>
              <a href="#"><img src="http://widat.cafe24.com//behom/boot/slide/slide1_fulity.png"></a>
              <span class="span_product1"><a href="#">붙박이장</a> > <a href="#">슬라이드</a> > BE9-155270250</span><br><br>
              <span class="span_product2">퓨리티</span><br>
          </div>
          <div>
              <a href="#"><img src="http://widat.cafe24.com//behom/boot/slide/slide1_fulity.png"></a>
              <span class="span_product1"><a href="#">붙박이장</a> > <a href="#">슬라이드</a> > BE9-155270250</span><br><br>
              <span class="span_product2">퓨리티</span><br>
          </div>
          <div>
              <a href="#"><img src="http://widat.cafe24.com//behom/boot/slide/slide1_fulity.png"></a>
              <span class="span_product1"><a href="#">붙박이장</a> > <a href="#">슬라이드</a> > BE9-155270250</span><br><br>
              <span class="span_product2">퓨리티</span><br>
          </div>
          <div>
              <a href="#"><img src="http://widat.cafe24.com//behom/boot/slide/slide1_fulity.png"></a>
              <span class="span_product1"><a href="#">붙박이장</a> > <a href="#">슬라이드</a> > BE9-155270250</span><br><br>
              <span class="span_product2">퓨리티</span><br>
          </div>
          <div>
              <a href="#"><img src="http://widat.cafe24.com//behom/boot/slide/slide1_fulity.png"></a>
              <span class="span_product1"><a href="#">붙박이장</a> > <a href="#">슬라이드</a> > BE9-155270250</span><br><br>
              <span class="span_product2">퓨리티</span><br>
          </div>
          <div>
              <a href="#"><img src="http://widat.cafe24.com//behom/boot/slide/slide1_fulity.png"></a>
              <span class="span_product1"><a href="#">붙박이장</a> > <a href="#">슬라이드</a> > BE9-155270250</span><br><br>
              <span class="span_product2">퓨리티</span><br>
          </div>
          <div>
              <a href="#"><img src="http://widat.cafe24.com//behom/boot/slide/slide1_fulity.png"></a>
              <span class="span_product1"><a href="#">붙박이장</a> > <a href="#">슬라이드</a> > BE9-155270250</span><br><br>
              <span class="span_product2">퓨리티</span><br>
          </div>
          <div>
              <a href="#"><img src="http://widat.cafe24.com//behom/boot/slide/slide1_fulity.png"></a>
              <span class="span_product1"><a href="#">붙박이장</a> > <a href="#">슬라이드</a> > BE9-155270250</span><br><br>
              <span class="span_product2">퓨리티</span><br>
          </div>
          <div>
              <a href="#"><img src="http://widat.cafe24.com//behom/boot/slide/slide1_fulity.png"></a>
              <span class="span_product1"><a href="#">붙박이장</a> > <a href="#">슬라이드</a> > BE9-155270250</span><br><br>
              <span class="span_product2">퓨리티</span><br>
          </div>
          <div>
              <a href="#"><img src="http://widat.cafe24.com//behom/boot/slide/slide1_fulity.png"></a>
              <span class="span_product1"><a href="#">붙박이장</a> > <a href="#">슬라이드</a> > BE9-155270250</span><br><br>
              <span class="span_product2">퓨리티</span><br>
          </div>
          <div>
              <a href="#"><img src="http://widat.cafe24.com//behom/boot/slide/slide1_fulity.png"></a>
              <span class="span_product1"><a href="#">붙박이장</a> > <a href="#">슬라이드</a> > BE9-155270250</span><br><br>
              <span class="span_product2">퓨리티</span><br>
          </div>
          <div>
              <a href="#"><img src="http://widat.cafe24.com//behom/boot/slide/slide1_fulity.png"></a>
              <span class="span_product1"><a href="#">붙박이장</a> > <a href="#">슬라이드</a> > BE9-155270250</span><br><br>
              <span class="span_product2">퓨리티</span><br>
          </div>
          <div>
              <a href="#"><img src="http://widat.cafe24.com//behom/boot/slide/slide1_fulity.png"></a>
              <span class="span_product1"><a href="#">붙박이장</a> > <a href="#">슬라이드</a> > BE9-155270250</span><br><br>
              <span class="span_product2">퓨리티</span><br>
          </div>
          <div>
              <a href="#"><img src="http://widat.cafe24.com//behom/boot/slide/slide1_fulity.png"></a>
              <span class="span_product1"><a href="#">붙박이장</a> > <a href="#">슬라이드</a> > BE9-155270250</span><br><br>
              <span class="span_product2">퓨리티</span><br>
          </div>
      </div>
    </div>
  </div>
  
  <div class="content_area" data-depth="0" data-idx="1">
    <div class="tab_area">
      <div class="btn_area1 clearfix">
        <button class="btn btn_tab1 act" data-depth="1" data-idx="0">전체</button>
        <button class="btn btn_tab1" data-depth="1" data-idx="1">슬라이드</button>
        <button class="btn btn_tab1" data-depth="1" data-idx="2">여닫이</button>
        <button class="btn btn_tab1" data-depth="1" data-idx="3">드레스룸</button>
        <button class="btn btn_tab1" data-depth="1" data-idx="4">엔드리스</button>
        <button class="btn btn_tab1" data-depth="1" data-idx="5">거실장</button>
        <button class="btn btn_tab1" data-depth="1" data-idx="6">신발장</button>
      </div>

      <div class="content_area act" data-depth="1" data-idx="0" id="content_area_div">
          <div></div>
          <div></div>
          <div></div>
          <div></div>
          <div></div>
          <div></div>
          <div></div>
          <div></div>
          <div></div>
          <div></div>
          <div></div>
          <div></div>
          <div></div>
          <div></div>
          <div></div>
          <div></div>
          <div></div>
          <div></div>
          <div></div>
          <div></div>
      </div>
      <div class="content_area" data-depth="1" data-idx="1" id="content_area_div">
          <div></div>
          <div></div>
          <div></div>
          <div></div>
          <div></div>
          <div></div>
          <div></div>
          <div></div>
          <div></div>
          <div></div>
          <div></div>
          <div></div>
          <div></div>
          <div></div>
          <div></div>
          <div></div>
          <div></div>
          <div></div>
          <div></div>
          <div></div>
      </div>
      <div class="content_area" data-depth="1" data-idx="2" id="content_area_div">
          <div></div>
          <div></div>
          <div></div>
          <div></div>
          <div></div>
          <div></div>
          <div></div>
          <div></div>
          <div></div>
          <div></div>
          <div></div>
          <div></div>
          <div></div>
          <div></div>
          <div></div>
          <div></div>
          <div></div>
          <div></div>
          <div></div>
          <div></div>
      </div>
      <div class="content_area" data-depth="1" data-idx="3" id="content_area_div">
          <div></div>
          <div></div>
          <div></div>
          <div></div>
          <div></div>
          <div></div>
          <div></div>
          <div></div>
          <div></div>
          <div></div>
          <div></div>
          <div></div>
          <div></div>
          <div></div>
          <div></div>
          <div></div>
          <div></div>
          <div></div>
          <div></div>
          <div></div>
      </div>
      <div class="content_area" data-depth="1" data-idx="4" id="content_area_div">
          <div></div>
          <div></div>
          <div></div>
          <div></div>
          <div></div>
          <div></div>
          <div></div>
          <div></div>
          <div></div>
          <div></div>
          <div></div>
          <div></div>
          <div></div>
          <div></div>
          <div></div>
          <div></div>
          <div></div>
          <div></div>
          <div></div>
          <div></div>
      </div>
      <div class="content_area" data-depth="1" data-idx="5" id="content_area_div">
          <div></div>
          <div></div>
          <div></div>
          <div></div>
          <div></div>
          <div></div>
          <div></div>
          <div></div>
          <div></div>
          <div></div>
          <div></div>
          <div></div>
          <div></div>
          <div></div>
          <div></div>
          <div></div>
          <div></div>
          <div></div>
          <div></div>
          <div></div>  
      </div>
      <div class="content_area" data-depth="1" data-idx="6" id="content_area_div">
          <div></div>
          <div></div>
          <div></div>
          <div></div>
          <div></div>
          <div></div>
          <div></div>
          <div></div>
          <div></div>
          <div></div>
          <div></div>
          <div></div>
          <div></div>
          <div></div>
          <div></div>
          <div></div>
          <div></div>
          <div></div>
          <div></div>
          <div></div>
      </div>
    </div>
  </div>
  
  <!-- // 붙박이장 -->
  
  <div class="content_area" data-depth="0" data-idx="2">
    <div class="tab_area">
        <div class="btn_area1 clearfix">
          <button class="btn btn_tab1 act" data-depth="1" data-idx="0">전체</button>
          <button class="btn btn_tab1" data-depth="1" data-idx="1">싱크대</button>
          <button class="btn btn_tab1" data-depth="1" data-idx="2">수납장</button>
          <button class="btn btn_tab1" data-depth="1" data-idx="3">소재</button>
          <button class="btn btn_tab1" data-depth="1" data-idx="4">옵션</button>
        </div>

        <div class="content_area act" data-depth="1" data-idx="0" id="content_area_div">
          <div></div>
          <div></div>
          <div></div>
          <div></div>
          <div></div>
          <div></div>
          <div></div>
          <div></div>
          <div></div>
          <div></div>
          <div></div>
          <div></div>
          <div></div>
          <div></div>
          <div></div>
          <div></div>
          <div></div>
          <div></div>
          <div></div>
          <div></div>
        </div>
        
        <div class="content_area" data-depth="1" data-idx="1" id="content_area_div">
          <div></div>
          <div></div>
          <div></div>
          <div></div>
          <div></div>
          <div></div>
          <div></div>
          <div></div>
          <div></div>
          <div></div>
          <div></div>
          <div></div>
          <div></div>
          <div></div>
          <div></div>
          <div></div>
          <div></div>
          <div></div>
          <div></div>
          <div></div>
        </div>
        
        <div class="content_area" data-depth="1" data-idx="2" id="content_area_div">
          <div></div>
          <div></div>
          <div></div>
          <div></div>
          <div></div>
          <div></div>
          <div></div>
          <div></div>
          <div></div>
          <div></div>
          <div></div>
          <div></div>
          <div></div>
          <div></div>
          <div></div>
          <div></div>
          <div></div>
          <div></div>
          <div></div>
          <div></div>
        </div>
        
        <div class="content_area" data-depth="1" data-idx="3">
            <div class="tab_area" style="margin-top:-25px;">
            <div class="btn_area1 clearfix" style="border: none; margin:0 auto;">
              <button class="btn btn_tab1 act" data-depth="2" data-idx="0" style="border-right:none; margin-right: 10px; width: 90px;">도어</button>
              <button class="btn btn_tab1" data-depth="2" data-idx="1" style="margin-left:10px; width: 90px;">마블</button>
            </div>

            <div class="content_area act" data-depth="2" data-idx="0" id="content_area_div">
              <div></div>
              <div></div>
              <div></div>
              <div></div>
              <div></div>
              <div></div>
              <div></div>
              <div></div>
              <div></div>
              <div></div>
              <div></div>
              <div></div>
              <div></div>
              <div></div>
              <div></div>
              <div></div>
              <div></div>
              <div></div>
              <div></div>
              <div></div>
            </div>
            
            <div class="content_area" data-depth="2" data-idx="1" id="content_area_div">
              <div></div>
              <div></div>
              <div></div>
              <div></div>
              <div></div>
              <div></div>
              <div></div>
              <div></div>
              <div></div>
              <div></div>
              <div></div>
              <div></div>
              <div></div>
              <div></div>
              <div></div>
              <div></div>
              <div></div>
              <div></div>
              <div></div>
              <div></div>
            </div>
          </div>
       </div>
        <div class="content_area" data-depth="1" data-idx="4">
            <div class="tab_area" style="margin-top:-25px;">
            <div class="btn_area1 clearfix" style="border: none; margin: 0 auto;">
              <button class="btn btn_tab1 act" data-depth="2" data-idx="0" style="border-right: none; margin-right: 10px; width: 90px;">싱크볼</button>
              <button class="btn btn_tab1" data-depth="2" data-idx="1" style="border-right: none; margin-left: 10px; width: 90px;">수도</button>
              <button class="btn btn_tab1" data-depth="2" data-idx="2" style="border-right: none; margin-left: 10px; width: 90px;">후드</button>
              <button class="btn btn_tab1" data-depth="2" data-idx="3" style="border-right: none; margin-left: 10px; width: 90px;">쿡탑</button>
              <button class="btn btn_tab1" data-depth="2" data-idx="4" style="margin-left: 10px; width: 90px;">악세사리</button>
            </div>

            <div class="content_area act" data-depth="2" data-idx="0" id="content_area_div">
              <div></div>
              <div></div>
              <div></div>
              <div></div>
              <div></div>
              <div></div>
              <div></div>
              <div></div>
              <div></div>
              <div></div>
              <div></div>
              <div></div>
              <div></div>
              <div></div>
              <div></div>
              <div></div>
              <div></div>
              <div></div>
              <div></div>
              <div></div>
            </div>
            
            <div class="content_area" data-depth="2" data-idx="1" id="content_area_div">
              <div></div>
              <div></div>
              <div></div>
              <div></div>
              <div></div>
              <div></div>
              <div></div>
              <div></div>
              <div></div>
              <div></div>
              <div></div>
              <div></div>
              <div></div>
              <div></div>
              <div></div>
              <div></div>
              <div></div>
              <div></div>
              <div></div>
              <div></div>
            </div>
            
            <div class="content_area" data-depth="2" data-idx="2" id="content_area_div">
              <div></div>
              <div></div>
              <div></div>
              <div></div>
              <div></div>
              <div></div>
              <div></div>
              <div></div>
              <div></div>
              <div></div>
              <div></div>
              <div></div>
              <div></div>
              <div></div>
              <div></div>
              <div></div>
              <div></div>
              <div></div>
              <div></div>
              <div></div>
            </div>
            
            <div class="content_area" data-depth="2" data-idx="3" id="content_area_div">
              <div></div>
              <div></div>
              <div></div>
              <div></div>
              <div></div>
              <div></div>
              <div></div>
              <div></div>
              <div></div>
              <div></div>
              <div></div>
              <div></div>
              <div></div>
              <div></div>
              <div></div>
              <div></div>
              <div></div>
              <div></div>
              <div></div>
              <div></div>
            </div>
            
            <div class="content_area" data-depth="2" data-idx="4" id="content_area_div">
              <div></div>
              <div></div>
              <div></div>
              <div></div>
              <div></div>
              <div></div>
              <div></div>
              <div></div>
              <div></div>
              <div></div>
              <div></div>
              <div></div>
              <div></div>
              <div></div>
              <div></div>
              <div></div>
              <div></div>
              <div></div>
              <div></div>
              <div></div>
            </div>
            
          </div>
      </div>
      </div>
      
      
    </div>
    
  <div class="content_area" data-depth="0" data-idx="3">
    <div class="tab_area">
      <div class="btn_area1 clearfix">
        <button class="btn btn_tab1 act" data-depth="1" data-idx="0">바스</button>
        <button class="btn btn_tab1" data-depth="1" data-idx="1">판넬</button>
      </div>

      <div class="content_area act" data-depth="1" data-idx="0">바스는 준비중입니다.</div>
      <div class="content_area" data-depth="1" data-idx="1">판넬은 준비중입니다.</div>
    </div>
  </div>
  
  <div class="content_area" data-depth="0" data-idx="4">
    <div class="tab_area">
      <div class="btn_area1 clearfix">
        <button class="btn btn_tab1 act" data-depth="1" data-idx="0">가구</button>
        <button class="btn btn_tab1" data-depth="1" data-idx="1">소품</button>
      </div>

      <div class="content_area act" data-depth="1" data-idx="0">가구는 준비중입니다.</div>
      <div class="content_area" data-depth="1" data-idx="1">소품은 준비중입니다.</div>
    </div>
  </div>
  
  <div class="content_area" data-depth="0" data-idx="5">
      <div class="tab_area">
        <div class="btn_area1 clearfix">
          <button class="btn btn_tab1 act" data-depth="1" data-idx="0">2019 카달로그</button>
          <button class="btn btn_tab1" data-depth="1" data-idx="1">2020 카달로그</button>
        </div>

        <div class="content_area act" data-depth="1" data-idx="0" id="content_area_div">
              <div></div>
              <div></div>
              <div></div>
              <div></div>
              <div></div>
              <div></div>
              <div></div>
              <div></div>
              <div></div>
              <div></div>
              <div></div>
              <div></div>
              <div></div>
              <div></div>
              <div></div>
              <div></div>
              <div></div>
              <div></div>
              <div></div>
              <div></div>
        </div>
        <div class="content_area" data-depth="1" data-idx="1" id="content_area_div">
              <div></div>
              <div></div>
              <div></div>
              <div></div>
              <div></div>
              <div></div>
              <div></div>
              <div></div>
              <div></div>
              <div></div>
              <div></div>
              <div></div>
              <div></div>
              <div></div>
              <div></div>
              <div></div>
              <div></div>
              <div></div>
              <div></div>
              <div></div>
        </div>
      </div>
  </div>
  
</div>



<script>
function findParent(el, className){
  let check = el.parentNode.classList.contains(className);
  
  if(check === true){
     return el.parentNode;
  }else{
    return findParent(el.parentNode, className);
  }
}

function bindingTabEvent(wrap){
  let wrapEl = document.querySelectorAll(wrap);
  
  wrapEl.forEach(function(tabArea){
    let btn = tabArea.querySelectorAll('.btn_tab1');
    
    btn.forEach(function(item){
      item.addEventListener('click', function(){
        let parent = findParent(this, 'tab_area');
        let idx = this.dataset['idx'];
        let depth = this.dataset['depth'];
        let btnArr = parent.querySelectorAll('.btn_tab1[data-depth="'+ depth +'"]');
        let contentArr = parent.querySelectorAll('.content_area[data-depth="'+ depth +'"]');
        
        btnArr.forEach(function(btn){ btn.classList.remove('act'); });
        this.classList.add('act');
        contentArr.forEach(function(content){ content.classList.remove('act'); });
        parent.querySelector('.content_area[data-idx="'+ idx +'"][data-depth="'+ depth +'"]').classList.add('act');
      });
    });
  });
}

bindingTabEvent('.tab_wrap');
</script>






코드가 매우 길고 지저분한점 죄송합니다ㅎㅎ;;;;;;;


상품페이지인데 저 div들을 페이징 처리를 하고싶은데 자바스크립트만으로 페이징처리를 할 수 있는 방법이 있을까요?

0
  • 답변 4

  • 컴포지트
    2k
    2020-12-11 15:29:25 작성 2020-12-11 15:29:48 수정됨

    당연히 가능합니다.

    단, 서버단에서 총 레코드 개수와 페이지당 레코드 출력 개수는 반드시 가져와야 합니다.

    라이브러리 사용하면 간단하며, 많은 라이브러리가 있습니다.

    이 중 제가 만든 라이브러리를 쓰거나, 프론트엔드 프레임워크 사용 시 거기에 맞는 페이징 라이브러리를 찾아서 쓸 수 있습니다. (예: bootstrap, vue, react 등)

    jquery 사용 시: https://github.com/composite/jQuery.paging

    독립형 버전: https://github.com/composite/pagings

  • 팬더다이녀석들아
    296
    2020-12-11 15:37:51

    컴포지트 


    선배님 감사합니다 ^-^!! 선배님 덕분에 오늘도 실력상승하고 갑니다! 


    요즘 날씨추운데 감기조심하세요 ^-^!!

  • lkwa201
    584
    2020-12-11 15:59:25

    컴포지트님 처럼 할 수 있는 방법이 있으며, 


    총 레코드 개수와 페이지당 레코드 출력 개수를  자바스크립트에서 구해서 처리 할 수도 있습니다.

    제가 제시한 방법은 처음에 빡세긴 하지만 한 번 만들면 쉽거든요^^

    원리는 다 똑같으니...

  • 팬더다이녀석들아
    296
    2020-12-11 16:01:12

    lkwa201 


    선배님 감사합니다! 여러가지로 시도해보겠습니다 ^-^!!


    선배님도 감기조심하십쇼~


  • 로그인을 하시면 답변을 등록할 수 있습니다.