使用分页过滤内容

时间：2017-08-01 07:22:46

标签： jquery

我有一个用于过滤列的复选框过滤器，还包括一个分页。但是分页效果并不好。 例如，我过滤了标记12＆＃39;并且剩下一些列，因此分页必须调整为仅显示结果列。 如果有更多结果，则必须将结果拆分到更多页面上，如果未选中，则恢复列。

必须将列限制为仅显示页面上的4列。 取消选中复选框后，他们仍需要在页面上显示4列。

你们能帮助我完成我的分页吗？

＆＃13;
＆＃13; 
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
		var totalContent = $(".col-md-4").length;
		var onePageContent = 4;

		  $(".items-leading .col-md-4:gt(" + (onePageContent - 1) + ")").hide();
		var totalPage = Math.round(totalContent / onePageContent);

		  for(i= 1; i <= totalPage; i++) {
		    $(".pagination").append("<a href='javascript:void(0)'>" + i + "</a>");
		  }

		  $(".pagination a:first").addClass("active");

		  $(".pagination a").on("click", function() {
		      var index = $(this).index() + 1;
		      var gt = onePageContent * index;

		      $(".pagination a").removeClass("active");
		      $(this).addClass("active");
		      $(".items-leading .col-md-4").hide();

		      for(i = gt - onePageContent; i < gt; i++) {
		        $(".items-leading .col-md-4:eq(" + i + ")").show();
		      }
		  }); // pagination
});
＆＃13; 
.pagination li {
  display: inline-block
}

.pagination a {
 padding: 5px;
}
＆＃13; 
<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>
＆＃13;
＆＃13;
＆＃13;

1 个答案:

答案 0 :(得分：0)

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

这是通过将结果元素拆分为chunks来完成的。

我希望这是你正在寻找的东西。这是工作小提琴：

＆＃13;
＆＃13; 
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() {
	    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();
}
＆＃13; 
.pagination li {
  display: inline-block
}
＆＃13; 
<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">
  <li><a href="#">1</a></li>
</div>

<div class="col-md-4">
		<ul class="tags inline">
			<li class="tag-10" itemprop="keywords">
				<a href="/component/tags/tag/jeugdhulp" 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="/component/tags/tag/jeugdhulp" class="label label-info">Tag 11</a>
			</li>
			<li class="tag-13" itemprop="keywords">
				<a href="/component/tags/tag/jeugdhulp" 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="/component/tags/tag/jeugdhulp" 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="/component/tags/tag/jeugdhulp" class="label label-info">Tag 13</a>
			</li>
			<li class="tag-10" itemprop="keywords">
				<a href="/component/tags/tag/jeugdhulp" 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="/component/tags/tag/jeugdhulp" 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="/component/tags/tag/jeugdhulp" class="label label-info">Tag 11</a>
			</li>
			<li class="tag-13" itemprop="keywords">
				<a href="/component/tags/tag/jeugdhulp" 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="/component/tags/tag/jeugdhulp" class="label label-info">Tag 11</a>
			</li>
			<li class="tag-13" itemprop="keywords">
				<a href="/component/tags/tag/jeugdhulp" 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="/component/tags/tag/jeugdhulp" 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="/component/tags/tag/jeugdhulp" 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="/component/tags/tag/jeugdhulp" class="label label-info">Tag 11</a>
			</li>
		</ul>
		<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
</div>
＆＃13;
＆＃13;
＆＃13;

相关问题
最新问题