0
我有一個複選框過濾器過濾列,也包括分頁。但分頁不能很好地工作。 例如,我過濾'標籤12',剩下一些列,所以分頁必須調整爲僅顯示結果列。 如果有更多結果,它必須將結果分成多個頁面,如果未選中,則還原列。過濾內容與分頁
的列必須被限制爲僅顯示例如在網頁上4列。 當複選框仍未選中時,仍然需要顯示4個頁面。
你們可以幫我完成我的分頁?
jQuery(document).ready(function($) {
var $filterChecks = $('.tag-filters :checkbox');
$filterChecks.change(function() {
var classSelectors = $filterChecks.filter(':checked').map(function() {
return '.' + this.value;
}).get();
var $cont = $('.col-md-4');
if (classSelectors.length) {
$cont.hide().has(classSelectors.join()).show();
} else {
$cont.show();
}
});
// pagination
\t \t var totalContent = $(".col-md-4").length;
\t \t var onePageContent = 4;
\t \t $(".items-leading .col-md-4:gt(" + (onePageContent - 1) + ")").hide();
\t \t var totalPage = Math.round(totalContent/onePageContent);
\t \t for(i= 1; i <= totalPage; i++) {
\t \t $(".pagination").append("<a href='javascript:void(0)'>" + i + "</a>");
\t \t }
\t \t $(".pagination a:first").addClass("active");
\t \t $(".pagination a").on("click", function() {
\t \t var index = $(this).index() + 1;
\t \t var gt = onePageContent * index;
\t \t $(".pagination a").removeClass("active");
\t \t $(this).addClass("active");
\t \t $(".items-leading .col-md-4").hide();
\t \t for(i = gt - onePageContent; i < gt; i++) {
\t \t $(".items-leading .col-md-4:eq(" + i + ")").show();
\t \t }
\t \t }); // pagination
});
.pagination li {
display: inline-block
}
.pagination a {
padding: 5px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<form class="form-inline" action="<?php $this ?>">
<div class="tag-filters">
<div class="checkbox">
<label><input type="checkbox" value="tag-10" />Tag 10</label>
<label><input type="checkbox" value="tag-11" />Tag 11</label>
<label><input type="checkbox" value="tag-12" />Tag 12</label>
<label><input type="checkbox" value="tag-13" />Tag 13</label>
</div>
</div>
</form>
<br /> Pagination:
<div class="pagination">
</div>
<div class="items-leading">
<div class="col-md-4">
<ul class="tags inline">
<li class="tag-10" itemprop="keywords">
<a href="#" class="label label-info">Tag 10</a>
</li>
</ul>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
</div>
<div class="col-md-4">
<ul class="tags inline">
<li class="tag-11" itemprop="keywords">
<a href="#" class="label label-info">Tag 11</a>
</li>
<li class="tag-13" itemprop="keywords">
<a href="#" class="label label-info">Tag 13</a>
</li>
</ul>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
</div>
<div class="col-md-4">
<ul class="tags inline">
<li class="tag-12" itemprop="keywords">
<a href="#" class="label label-info">Tag 12</a>
</li>
</ul>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
</div>
<div class="col-md-4">
<ul class="tags inline">
<li class="tag-13" itemprop="keywords">
<a href="#" class="label label-info">Tag 13</a>
</li>
<li class="tag-10" itemprop="keywords">
<a href="#" class="label label-info">Tag 10</a>
</li>
</ul>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
</div>
<div class="col-md-4">
<ul class="tags inline">
<li class="tag-11" itemprop="keywords">
<a href="#" class="label label-info">Tag 11</a>
</li>
</ul>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
</div>
<div class="col-md-4">
<ul class="tags inline">
<li class="tag-10" itemprop="keywords">
<a href="#" class="label label-info">Tag 11</a>
</li>
<li class="tag-13" itemprop="keywords">
<a href="#" class="label label-info">Tag 12</a>
</li>
</ul>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
</div>
<div class="col-md-4">
<ul class="tags inline">
<li class="tag-12" itemprop="keywords">
<a href="#" class="label label-info">Tag 11</a>
</li>
<li class="tag-13" itemprop="keywords">
<a href="#" class="label label-info">Tag 12</a>
</li>
</ul>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
</div>
<div class="col-md-4">
<ul class="tags inline">
<li class="tag-11" itemprop="keywords">
<a href="#" class="label label-info">Tag 12</a>
</li>
</ul>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
</div>
<div class="col-md-4">
<ul class="tags inline">
<li class="tag-10" itemprop="keywords">
<a href="#" class="label label-info">Tag 11</a>
</li>
</ul>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
</div>
<div class="col-md-4">
<ul class="tags inline">
<li class="tag-12" itemprop="keywords">
<a href="#" class="label label-info">Tag 11</a>
</li>
</ul>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
</div>
</div>
爵士,這是驚人的。非常感謝你。我學到了很多比較舊代碼和新代碼的情況。乾杯! – Rovi
不客氣。但請記住,有更好的方法來實現你想要的。我的回答是解決您以前的代碼,但有更好的方法;-)。但我很高興能夠提供幫助。 – hallleron