过滤内容与分页

Question

我有一个复选框过滤器过滤列，也包括分页。但分页不能很好地工作。 例如，我过滤'标签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>

Answer 1

你去那里。我创建了一个名为createPagination(data)的函数，它接受结果元素的集合。该功能处理分页创建以及每页上4个结果的限制。

这是由分裂导致元素融入chunks完成。

我希望这是你要找的。这里是工作提琴：

var size = 4; 
 
var $cont,chunks; 
 
var html = ''; 
 
jQuery(document).ready(function($) { 
 

 
    $cont = $('.col-md-4'); 
 
    var filterChecks = $('.tag-filters :checkbox'); 
 
    createPagination($cont); 
 
    filterChecks.change(function() { 
 
    html = ''; 
 
    var results = []; 
 
    var classSelectors = filterChecks.filter(':checked').map(function() { 
 
\t  return '.' + this.value; 
 
    }).get(); 
 
    
 
    if(classSelectors.length){ 
 
     for(var x = 0; x < $cont.has(classSelectors.join()).length; x++){ 
 
     results.push($cont.has(classSelectors.join())[x]); 
 
     } 
 
     createPagination(results); 
 
    } else { 
 
     createPagination($cont); 
 
    } 
 
    }); 
 

 
    $('div.pagination').on('click', 'a', function(){ 
 
    $cont.hide(); 
 
    $(chunks[parseInt($(this).text())-1]).show(); 
 
    }); 
 

 
}); 
 

 
function createPagination(data){ 
 
    chunks = new Array(Math.ceil(data.length/size)).fill("").map(function() { 
 
    return this.splice(0, size) 
 
    }, data.slice()); 
 
    
 
    $cont.hide(); 
 
    
 
    for(var i = 0; i < chunks.length; i++){ 
 
    html += '<li><a href="#">'+(i+1)+'</li>'; 
 
    } 
 

 
    $('div.pagination').html(html); 
 
    $(chunks[0]).show(); 
 
}

.pagination li { 
 
    display: inline-block 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script> 
 
<form class="form-inline" action="<?php $this ?>"> 
 
\t <div class="tag-filters"> 
 
\t \t <div class="checkbox"> 
 
     <label><input type="checkbox" value="tag-10" />Tag 10</label> 
 
\t \t \t <label><input type="checkbox" value="tag-11" />Tag 11</label> 
 
\t \t \t <label><input type="checkbox" value="tag-12" />Tag 12</label> 
 
\t \t \t <label><input type="checkbox" value="tag-13" />Tag 13</label> 
 
\t \t </div> 
 
\t </div> 
 
</form> 
 
<br /> 
 
Pagination: 
 
<div class="pagination"> 
 
    <li><a href="#">1</a></li> 
 
</div> 
 

 
<div class="col-md-4"> 
 
\t \t <ul class="tags inline"> 
 
\t \t \t <li class="tag-10" itemprop="keywords"> 
 
\t \t \t \t <a href="/component/tags/tag/jeugdhulp" class="label label-info">Tag 10</a> 
 
\t \t \t </li> 
 
\t \t </ul> 
 
\t \t <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p> 
 
</div> 
 
<div class="col-md-4"> 
 
\t \t <ul class="tags inline"> 
 
\t \t \t <li class="tag-11" itemprop="keywords"> 
 
\t \t \t \t <a href="/component/tags/tag/jeugdhulp" class="label label-info">Tag 11</a> 
 
\t \t \t </li> 
 
\t \t \t <li class="tag-13" itemprop="keywords"> 
 
\t \t \t \t <a href="/component/tags/tag/jeugdhulp" class="label label-info">Tag 13</a> 
 
\t \t \t </li> 
 
\t \t </ul> 
 
\t \t <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p> 
 
</div> 
 
<div class="col-md-4"> 
 
\t \t <ul class="tags inline"> 
 
\t \t \t <li class="tag-12" itemprop="keywords"> 
 
\t \t \t \t <a href="/component/tags/tag/jeugdhulp" class="label label-info">Tag 12</a> 
 
\t \t \t </li> 
 
\t \t </ul> 
 
\t \t <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p> 
 
</div> 
 
<div class="col-md-4"> 
 
\t \t <ul class="tags inline"> 
 
\t \t \t <li class="tag-13" itemprop="keywords"> 
 
\t \t \t \t <a href="/component/tags/tag/jeugdhulp" class="label label-info">Tag 13</a> 
 
\t \t \t </li> 
 
\t \t \t <li class="tag-10" itemprop="keywords"> 
 
\t \t \t \t <a href="/component/tags/tag/jeugdhulp" class="label label-info">Tag 10</a> 
 
\t \t \t </li> 
 
\t \t </ul> 
 
\t \t <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p> 
 
</div><div class="col-md-4"> 
 
\t \t <ul class="tags inline"> 
 
\t \t \t <li class="tag-11" itemprop="keywords"> 
 
\t \t \t \t <a href="/component/tags/tag/jeugdhulp" class="label label-info">Tag 11</a> 
 
\t \t \t </li> 
 
\t 
 
\t \t </ul> 
 
\t \t <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p> 
 
</div> 
 
<div class="col-md-4"> 
 
\t \t <ul class="tags inline"> 
 
\t \t \t <li class="tag-10" itemprop="keywords"> 
 
\t \t \t \t <a href="/component/tags/tag/jeugdhulp" class="label label-info">Tag 11</a> 
 
\t \t \t </li> 
 
\t \t \t <li class="tag-13" itemprop="keywords"> 
 
\t \t \t \t <a href="/component/tags/tag/jeugdhulp" class="label label-info">Tag 12</a> 
 
\t \t \t </li> 
 
\t \t </ul> 
 
\t \t <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p> 
 
</div> 
 
<div class="col-md-4"> 
 
\t \t <ul class="tags inline"> 
 
\t \t \t <li class="tag-12" itemprop="keywords"> 
 
\t \t \t \t <a href="/component/tags/tag/jeugdhulp" class="label label-info">Tag 11</a> 
 
\t \t \t </li> 
 
\t \t \t <li class="tag-13" itemprop="keywords"> 
 
\t \t \t \t <a href="/component/tags/tag/jeugdhulp" class="label label-info">Tag 12</a> 
 
\t \t \t </li> 
 
\t \t </ul> 
 
\t \t <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p> 
 
</div> 
 
<div class="col-md-4"> 
 
\t \t <ul class="tags inline"> 
 
\t \t \t <li class="tag-11" itemprop="keywords"> 
 
\t \t \t \t <a href="/component/tags/tag/jeugdhulp" class="label label-info">Tag 12</a> 
 
\t \t \t </li> 
 
\t \t </ul> 
 
\t \t <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p> 
 
</div> 
 
<div class="col-md-4"> 
 
\t \t <ul class="tags inline"> 
 
\t \t \t <li class="tag-10" itemprop="keywords"> 
 
\t \t \t \t <a href="/component/tags/tag/jeugdhulp" class="label label-info">Tag 11</a> 
 
\t \t \t </li> 
 
\t \t </ul> 
 
\t \t <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p> 
 
</div> 
 
<div class="col-md-4"> 
 
\t \t <ul class="tags inline"> 
 
\t \t \t <li class="tag-12" itemprop="keywords"> 
 
\t \t \t \t <a href="/component/tags/tag/jeugdhulp" class="label label-info">Tag 11</a> 
 
\t \t \t </li> 
 
\t \t </ul> 
 
\t \t <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p> 
 
</div>