ページ区切りでフィルタリングするコンテンツ

Question

私は列をフィルタリングするチェックボックスフィルタを持っていますが、ページ付けも含んでいます。しかし、ページネーションはそれほどうまくいきません。 たとえば、 'tag 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>