如何在轮播表中创建分页？

时间：2019-12-17 12:58:46

标签： javascript jquery html css

如何创建carosal表分页。我需要分页看起来像只有“ <”和“>” carosal箭头。

示例：我的表中有8行，我只想显示剩余的4行，请转到carosal的下一页，所以我单击“>”箭头，然后只希望显示剩余的4行。

  

注意：分页应仅适用于骨弓箭头

这是我的小提琴。

FIDDLE HERE

这是我的代码。

$(document).ready(function() {
  $("#myCarousel").carousel({
    interval: false
  });
});

pageSize = 3
incremSlide = 4
startPage = 0;
numberPage = 0;

var pageCount = $(".line-content").length / pageSize;
var totalSlidepPage = Math.floor(pageCount / incremSlide);

for (var i = 0; i < pageCount; i++) {
  $("#pagin").append('<li><a href="#">' + (i + 1) + '</a></li> ');
  if (i > pageSize) {
    $("#pagin li").eq(i).hide();
  }
}

var prev = $("<li/>").addClass("<").html(">").click(function() {
  startPage -= 3
  incremSlide -= 3
  slide();
});

prev.hide();

var next = $("<li/>").addClass("<").html(">").click(function() {
  startPage += 3;
  incremSlide += 3;
  slide();
});

$("#pagin").prepend(prev).append(next);

$("#pagin li").first().find("a").addClass("current");

slide = function(sens) {
  $("#pagin li").hide();

  for (t = startPage; t < incremSlide; t++) {
    $("#pagin li").eq(t + 1).show();
  }
  if (startPage == 0) {
    next.show();
    prev.hide();
  } else if (numberPage == totalSlidepPage) {
    next.hide();
    prev.show();
  } else {
    next.show();
    prev.show();
  }
}

showPage = function(page) {
  $(".line-content").hide();
  $(".line-content").each(function(n) {
    if (n >= pageSize * (page - 1) && n < pageSize * page)
      $(this).show();
  });
}

showPage(1);
$("#pagin li a").eq(0).addClass("current");

$("#pagin li a").click(function() {
  $("#pagin li a").removeClass("current");
  $(this).addClass("current");
  showPage(parseInt($(this).text()));
});
#preModal .viewing {
  -webkit-transform: translate(0, -50%);
  -o-transform: translate(0, -50%);
  transform: translate(0, -50%);
  top: 50%;
  margin: 0 auto;
}

input[type=checkbox] {
  /* left: 23px; */
  width: 15px;
}

.carousel-control-prev {
  height: fit-content;
  width: fit-content;
}

.carousel-control-next {
  right: -20px;
  height: fit-content;
  width: fit-content;
}

.contd {
  /* width: 160%;
            right: 30%; */
  width: 132%;
  right: 16%;
}

.predefineModal {
  padding-bottom: 0px;
  padding-top: 0px;
}

.carousel-control-prev-icon,
.carousel-control-next-icon {
  display: none;
}

.contd:hover .carousel-control-next-icon {
  display: block;
}

.contd:hover .carousel-control-prev-icon {
  display: block;
}

.second {
  position: relative;
  right: 6%;
}

.skip {
  color: #fff;
  background-color: #007bff;
  border-color: #007bff;
  box-shadow: none;
  display: inline-block;
  font-weight: 400;
  border: 1px solid transparent;
  padding: 3px .75rem;
  font-size: 1rem;
  border-radius: .25rem;
}

.skip:hover {
  background-color: #77b2f1;
}

.btn {
  padding: 3px .75rem !important;
}

.periodTime {
  padding: 15px;
  padding-bottom: 0px;
}

.carousel {
  /* background: #2f4357; */
  margin-top: 20px;
}

.carousel-control-prev-icon {
  background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%23680f79' viewBox='0 0 8 8'%3E%3Cpath d='M5.25 0l-4 4 4 4 1.5-1.5-2.5-2.5 2.5-2.5-1.5-1.5z'/%3E%3C/svg%3E") !important;
  position: relative;
  right: 2%;
}

.carousel-control-next-icon {
  background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%23680f79' viewBox='0 0 8 8'%3E%3Cpath d='M2.75 0l-1.5 1.5 2.5 2.5-2.5 2.5 1.5 1.5 4-4-4-4z'/%3E%3C/svg%3E") !important;
  position: relative;
}

.carousel-item {
  min-height: 280px;
  filter: blur(.0px) !important;
  /* transform: translateZ(0) !important; */
  backface-visibility: hidden !important;
  /* Prevent carousel from being distorted if for some reason image doesn't load */
}

.bs-example {
  margin: 20px;
  margin-bottom: 0px;
  margin-top: 0px;
}

.carousel-indicators li {
  background-color: #9C27B0 !important;
}
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>



<div class="modal-body predefineModal">
  <div class="bs-example">
    <div id="myCarousel" class="carousel slide">
      <!-- Carousel indicators -->
      <ol class="carousel-indicators">
        <li data-target="#myCarousel" data-slide-to="0" class="active"></li>
        <li data-target="#myCarousel" data-slide-to="1"></li>
      </ol>
      <!-- Wrapper for carousel items -->
      <div class="carousel-inner">
        <div class="carousel-item active">
          <div class="table-responsive">
            <table class="table table-bordered">
              <thead class="party_head">
                <tr>
                  <th>#</th>
                  <th>S.No</th>
                  <th>Trans.Type</th>
                  <th>Voucher Date</th>
                  <th>To A/c Name</th>
                  <th>Narration</th>
                  <th>Debit</th>
                  <th>Credit</th>
                </tr>
              </thead>
              <tbody>
                <tr class="line-content">
                  <td><input id="indeterminate-checkbox" type="checkbox" /></td>
                  <td>1</td>
                  <td>CP</td>
                  <td>DD-MM-YYYY</td>
                  <td>JOE</td>
                  <td>Narration</td>
                  <td>Debit</td>
                  <td>Credit</td>
                </tr>
                <tr class="line-content">
                  <td>
                    <input type="checkbox" id="indeterminate-checkbox" />
                  </td>
                  <td>2</td>
                  <td>BP</td>
                  <td>DD-MM-YYYY</td>
                  <td>PLUMZ</td>
                  <td>Narration</td>
                  <td>Debit</td>
                  <td>Credit</td>
                </tr>
                <tr class="line-content">
                  <td><input id="indeterminate-checkbox" type="checkbox" /></td>
                  <td>3</td>
                  <td>CR</td>
                  <td>DD-MM-YYYY</td>
                  <td>text</td>
                  <td>Narration</td>
                  <td>Debit</td>
                  <td>Credit</td>
                </tr>
                <tr class="line-content">
                  <td><input id="indeterminate-checkbox" type="checkbox" /></td>
                  <td>4</td>
                  <td>CR</td>
                  <td>DD-MM-YYYY</td>
                  <td>text</td>
                  <td>Narration</td>
                  <td>Debit</td>
                  <td>Credit</td>
                </tr>
                <tr class="line-content">
                  <td><input id="indeterminate-checkbox" type="checkbox" /></td>
                  <td>5</td>
                  <td>CR</td>
                  <td>DD-MM-YYYY</td>
                  <td>text</td>
                  <td>Narration</td>
                  <td>Debit</td>
                  <td>Credit</td>
                </tr>
                <tr class="line-content">
                  <td><input id="indeterminate-checkbox" type="checkbox" /></td>
                  <td>6</td>
                  <td>CR</td>
                  <td>DD-MM-YYYY</td>
                  <td>text</td>
                  <td>Narration</td>
                  <td>Debit</td>
                  <td>Credit</td>
                </tr>
              </tbody>
            </table>
          </div>
        </div>
      </div>
      <!-- Carousel controls -->
      <ul id="pagin">
        <a class="carousel-control-prev" data-slide="prev">
          <span class="carousel-control-prev-icon"></span>
        </a>
        <a class="carousel-control-next" data-slide="next">
          <span class="carousel-control-next-icon"></span>
        </a>
      </ul>
    </div>
  </div>
</div>

1 个答案:

答案 0 :(得分：0)

尝试使用此代码

import itertools

 $(document).ready(function() {
   $("#myCarousel").carousel({
     interval: false
   });
 });

pageSize = 3
incremSlide = 4
startPage = 0;
numberPage = 0;

var pageCount =  $(".line-content").length / pageSize;
var totalSlidepPage = Math.floor(pageCount / incremSlide);
    
for(var i = 0 ; i<pageCount;i++){
    $("#pagin").append('<li><a href="#">'+(i+1)+'</a></li> ');
    if(i>pageSize){
       $("#pagin li").eq(i).hide();
    }
}

var prev = $("<li/>").addClass("<").html(">").click(function(){
   startPage-=3
   incremSlide-=3
   slide();
});

prev.hide();

var next = $("<li/>").addClass("<").html(">").click(function(){
   startPage+=3;
   incremSlide+=3;
   slide();
});

$("#pagin").prepend(prev).append(next);

$("#pagin li").first().find("a").addClass("current");

slide = function(sens){
   $("#pagin li").hide();
   
   for(t=startPage;t<incremSlide;t++){
     $("#pagin li").eq(t+1).show();
   }
   if(startPage == 0){
     next.show();
     prev.hide();
   }else if(numberPage == totalSlidepPage ){
     next.hide();
     prev.show();
   }else{
     next.show();
     prev.show();
   } 
}

showPage = function(page) {
	  $(".line-content").hide();
	  $(".line-content").each(function(n) {
	      if (n >= pageSize * (page - 1) && n < pageSize * page)
	          $(this).show();
	  });        
}
    
showPage(1);
$("#pagin li a").eq(0).addClass("current");

$("#pagin li a").click(function() {
	 $("#pagin li a").removeClass("current");
	 $(this).addClass("current");
	 showPage(parseInt($(this).text()));
});
$('.carousel-control-prev').click(function(e){
  	var currentPage = parseInt($("#pagin li a.current").text());
    var prevPage = currentPage - 1;
    if(prevPage < pageSize){
    	 showPage(prevPage);
       var currentObj = $("#pagin li a.current");
       $("#pagin li a.current").parent().prev().find('a').addClass('current');
       currentObj[0].className = "";
       
    }
   else{
    e.preventDefault();
   }
});
$('.carousel-control-next').click(function(e){
	var currentPage = parseInt($("#pagin li a.current").text());
  var nextPage = currentPage + 1;
  if(nextPage < pageSize){
      showPage(nextPage);
      $("#pagin li a.current").parent().next().find('a').addClass('current');
      var currentObj = $("#pagin li a.current");
      currentObj[0].className = ""; 
  }
  else {
  	e.preventDefault();
  }
});
 #preModal .viewing {
   -webkit-transform: translate(0, -50%);
   -o-transform: translate(0, -50%);
   transform: translate(0, -50%);
   top: 50%;
   margin: 0 auto;
 }

 input[type=checkbox] {
   /* left: 23px; */
   width: 15px;
 }

 .carousel-control-prev {
   height: fit-content;
   width: fit-content;
 }

 .carousel-control-next {
   right: -20px;
   height: fit-content;
   width: fit-content;
   
 }

 .contd {
   /* width: 160%;
            right: 30%; */
   width: 132%;
   right: 16%;
 }

 .predefineModal {
   padding-bottom: 0px;
   padding-top: 0px;
 }

 .carousel-control-prev-icon,
 .carousel-control-next-icon {
   display: none;
 }

 .contd:hover .carousel-control-next-icon {
   display: block;
 }

 .contd:hover .carousel-control-prev-icon {
   display: block;
 }

 .second {
   position: relative;
   right: 6%;
 }

 .skip {
   color: #fff;
   background-color: #007bff;
   border-color: #007bff;
   box-shadow: none;
   display: inline-block;
   font-weight: 400;
   border: 1px solid transparent;
   padding: 3px .75rem;
   font-size: 1rem;
   border-radius: .25rem;
 }

 .skip:hover {
   background-color: #77b2f1;
 }

 .btn {
   padding: 3px .75rem !important;
 }

 .periodTime {
   padding: 15px;
   padding-bottom: 0px;
 }

 .carousel {
   /* background: #2f4357; */
   margin-top: 20px;
 }

 .carousel-control-prev-icon {
   background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%23680f79' viewBox='0 0 8 8'%3E%3Cpath d='M5.25 0l-4 4 4 4 1.5-1.5-2.5-2.5 2.5-2.5-1.5-1.5z'/%3E%3C/svg%3E") !important;
   position: relative;
   right: 2%;
 }

 .carousel-control-next-icon {
   background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%23680f79' viewBox='0 0 8 8'%3E%3Cpath d='M2.75 0l-1.5 1.5 2.5 2.5-2.5 2.5 1.5 1.5 4-4-4-4z'/%3E%3C/svg%3E") !important;
   position: relative;
 }

 .carousel-item {
   min-height: 280px;
   filter: blur(.0px) !important;
   /* transform: translateZ(0) !important; */
   backface-visibility: hidden !important;
   /* Prevent carousel from being distorted if for some reason image doesn't load */
 }

 .bs-example {
   margin: 20px;
   margin-bottom: 0px;
   margin-top: 0px;
 }

 .carousel-indicators li {
   background-color: #9C27B0 !important;
 }

相关问题
最新问题