Фильтр поиска работает только для текущих страниц Не для всех остальных страниц - PullRequest
Новая
       1

Фильтр поиска работает только для текущих страниц Не для всех остальных страниц

0 голосов
/ 26 марта 2020

У меня есть поисковый фильтр с разбиением на страницы, он будет фильтровать контент только на текущей странице, а не на всех страницах, которые у меня есть.

Вкратце: предположим, что я на первой странице и У меня есть контент с 1 по 14. Теперь я собираюсь искать контент 12, который находится на второй странице .... При поиске он не будет фильтровать контент со второй страницы.

Мой Скрипт для фильтра и нумерации страниц и Code Pen Link введите описание ссылки здесь 

body{
	background-color: #333642;
	margin: 0;
}

/* CONTENT STYLING */

.red .content{
	background-color: tomato;
	padding: 10px;
	color: white;
	border:none;
	border-radius: 8px 8px 0px 0px;
	text-align: center;
}

.blue .content{
	background-color: dodgerblue;
	padding: 10px;
	color: white;
	border:none;
	border-radius: 8px 8px 0px 0px;
	text-align: center;
}

.green .content{
	background-color: green;
	padding: 10px;
	color: white;
	border:none;
	border-radius: 8px 8px 0px 0px;
	text-align: center;
}

.comedy .content{
	background-color: #131417;
	padding: 10px;
	color: white;
	border:none;
	border-radius: 8px 8px 0px 0px;
	text-align: center;
}


.content-title{
	background-color: white;
	border-radius: 0 0 8px 8px;
	text-align: center;
	padding: 8px;
}

/* SEARCH & fILTER */


/* PAGINATION */

.pagination a{
    margin: 5px 10px;
    border-radius: 6px 6px 6px 6px;
}

.pagination ul li{
    text-align: center;
}

.page-link {
  color: white;
  background-color: #333642;
  border: 2px solid #346767;
}
 
.page-item.disabled .page-link {
  color: white;
  background-color: #333642;
  border-color: #346767;
}
 
.page-item.active .page-link {
  z-index: 1;
  color: #fff; 
  background-color: #131417;
  border-color: #346767;
 
}
 
.page-link:focus, .page-link:hover {
  color: black;
  text-decoration: none;
  background-color: #fff; 
}

.count{
  color: white;
}



/*

#333642
#131417

*/
<html>
<head>
  <title>My Website</title>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
</head>

<body style="background-color:#333642;">
  <!-- FILTER-SCRIPT -->
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
  <script src="https://unpkg.com/isotope-layout@3/dist/isotope.pkgd.min.js"></script>
  <!-- PAGINATION-SCRIPT -->
  <script src="https://cdnjs.cloudflare.com/ajax/libs/twbs-pagination/1.4.2/jquery.twbsPagination.js"></script>

  	<div class="container section">
      <div class="row mt-4">
        <div class="col-9">
          <input type="text" id="search" class="form-control" placeholder="Search"></input>          
        </div>
        <div class="col-3">
          <button type="submit" id="btn" class="btn btn-block btn-primary">Search</button>        
        </div>
    </div>
		  <div id="filters" class="row mt-4">
        <div class="col-6 col-sm-6 col-md-6 col-lg-3 col-xl-3">
  		    <select id="filter-select1" class="form-control">
  		      <option value="">All</option>
  		      <option value="red">Red</option>
  		      <option value="green">Green</option>
  		      <option value="blue">Blue</option>
  		      <option value="comedy">Comedy</option>
  		    </select>
        </div>
        <div class="col-6 col-sm-6 col-md-6 col-lg-3 col-xl-3">
          <select id="filter-select2" class="form-control">
            <option value="">All</option>
            <option value="der">Red</option>
            <option value="green">Green</option>
            <option value="blue">Blue</option>
            <option value="comedy">Comedy</option>
          </select>
        </div>
        <div class="col-6 col-sm-6 col-md-6 col-lg-3 col-xl-3">
          <select id="filter-select3" class="form-control">
            <option value="">All</option>
            <option value="red">Red</option>
            <option value="green">Green</option>
            <option value="blue">Blue</option>
            <option value="comedy">Comedy</option>
          </select>
        </div>
        <div class="col-6 col-sm-6 col-md-6 col-lg-3 col-xl-3">
          <select id="filter-select4" class="form-control">
            <option value="">All</option>
            <option value="red">Red</option>
            <option value="green">Green</option>
            <option value="blue">Blue</option>
            <option value="comedy">Comedy</option>
          </select>
        </div>

		  </div>
	</div>

  <nav class="paginator text-center mt-4">
      <ul class="pagination flex-wrap justify-content-center"></ul>
  </nav>

  <div class="container">
  	<div id="container">
    <div class="row">
      <div class="item red der col-6 col-xl-6 col-lg-6 col-md-6">
        <div class="content mt-4">
          <h1>content</h1>
        </div>
        <div class="content-title">
          <h3>fy Title 1</h3>
        </div>
      </div>
      <div class="blue item col-6 col-xl-6 col-lg-6 col-md-6">
        <div class="content mt-4">
          <h1>content</h1>
        </div>
        <div class="content-title">
          <h3>My Title Qz 2</h3>
        </div>
      </div>
      <div class="green item col-6 col-xl-6 col-lg-6 col-md-6">
        <div class="content mt-4">
          <h1>content</h1>
        </div>
        <div class="content-title">
          <h3>My Title 3</h3>
        </div>
      </div>
      <div class="red item col-6 col-xl-6 col-lg-6 col-md-6">
        <div class="content mt-4">
          <h1>content</h1>
        </div>
        <div class="content-title">
          <h3>My Title 4</h3>
        </div>
      </div>
      <div class="comedy item col-6 col-xl-6 col-lg-6 col-md-6">
        <div class="content mt-4">
          <h1>content</h1>
        </div>
        <div class="content-title">
          <h3>My Title 5</h3>
        </div>
      </div>
      <div class="comedy item col-6 col-xl-6 col-lg-6 col-md-6">
        <div class="content mt-4">
          <h1>content</h1>
        </div>
        <div class="content-title">
          <h3>My Title 6</h3>
        </div>
      </div>
      <div class="green item col-6 col-xl-6 col-lg-6 col-md-6">
        <div class="content mt-4">
          <h1>content</h1>
        </div>
        <div class="content-title">
          <h3>My Title 7</h3>
        </div>
      </div>
      <div class="blue item col-6 col-xl-6 col-lg-6 col-md-6">
        <div class="content mt-4">
          <h1>content</h1>
        </div>
        <div class="content-title">
          <h3>My Title 8</h3>
        </div>
      </div>
      <div class="green item col-6 col-xl-6 col-lg-6 col-md-6">
        <div class="content mt-4">
          <h1>content</h1>
        </div>
        <div class="content-title">
          <h3>My Title 9</h3>
        </div>
      </div>
      <div class="red item col-6 col-xl-6 col-lg-6 col-md-6">
        <div class="content mt-4">
          <h1>content</h1>
        </div>
        <div class="content-title">
          <h3>My Title 10</h3>
        </div>
      </div>
      <div class="comedy item col-6 col-xl-6 col-lg-6 col-md-6">
        <div class="content mt-4">
          <h1>content</h1>
        </div>
        <div class="content-title">
          <h3>My Title 11</h3>
        </div>
      </div>
      <div class="blue item col-6 col-xl-6 col-lg-6 col-md-6">
        <div class="content mt-4">
          <h1>content</h1>
        </div>
        <div class="content-title">
          <h3>My Title 12</h3>
        </div>
      </div>
      <div class="blue item col-6 col-xl-6 col-lg-6 col-md-6">
        <div class="content mt-4">
          <h1>content</h1>
        </div>
        <div class="content-title">
          <h3>My Title 13</h3>
        </div>
      </div>
      <div class="red item col-6 col-xl-6 col-lg-6 col-md-6">
        <div class="content mt-4">
          <h1>content</h1>
        </div>
        <div class="content-title">
          <h3>My Title 14</h3>
        </div>
      </div>
    </div>
    </div>
  </div>

  <h3 class="count text-center mt-4"></h3>

  <nav class="paginator text-center">
      <ul class="pagination flex-wrap justify-content-center"></ul>
  </nav>

<!--SEARCH FILTER SCRIPT-->
  <script>
  $(function() {

  var $grid = $('#container');
  $grid.isotope({
    itemSelector: '.item'
  });

  var filters = []; // A convenient bucket for all the filter options, 

  
  // BUTTON-SEARCH 
  $('#btn').on('click', function() {
      filters[0] = $('#search')[0].value;
      runFilter();
  });

  $('#filter-select1').on('change', function() {
    filters[1] = this.value;
    runFilter();
  });

  $('#filter-select2').on('change', function() {
    filters[2] = this.value;
    runFilter();
  });

  $('#filter-select3').on('change', function() {
    filters[3] = this.value;
    runFilter();
  });

  $('#filter-select4').on('change', function() {
    filters[4] = this.value;
    runFilter();
  });

  // and so on if more filters needed

  // The filter itself
  var runFilter = function() {
    $grid.isotope({
      filter: function() {
        if (filters[0]) {
          // at least some search text was entered:
          var qsRegex = new RegExp(filters[0], 'gi');

          // if the title doesn't match, eliminate it:
          if (!$(this).find('.content-title').text().match(qsRegex)) {
            return false;
          }
        }

        if (filters[1]) {
          // a category 1 was selected; filter out others:
          if (!($(this).hasClass(filters[1]))) {
            return false;
          }
        }

        if (filters[2]) {
          // a category 2 was selected; filter out others:
          if (!($(this).hasClass(filters[2]))) {
            return false;
          }
        }

        if (filters[3]) {
          // a category 3 was selected; filter out others:
          if (!($(this).hasClass(filters[3]))) {
            return false;
          }
        }

        if (filters[4]) {
          // a category 4 was selected; filter out others:
          if (!($(this).hasClass(filters[4]))) {
            return false;
          }
        }
        // etcetera, for any other filters 

        // successfully passed all conditions, so:
        return true;
      }
    });
  }
});
  </script>
  
 <!--PAGINATION SCRIPT-->
  <script>
  var detect = function(width) {
if (width < 992) {
    callPagination(8);
}else if (width >= 992) {
    callPagination(12);
}};


var callPagination = function(pageSize) {
pageSize = pageSize;
pagesCount = $('.item').length;
var totalPages = Math.ceil(pagesCount / pageSize);

$('.pagination').twbsPagination({
    totalPages: totalPages,
    visiblePages: 3,
    onPageClick: function(event, page) {
        var startIndex = pageSize * (page - 1);
        var endIndex = startIndex + pageSize;
        $('.item')
            .hide()
            .filter(function() {
                var idx = $(this).index();
                return idx >= startIndex && idx < endIndex;
            })
            .show();
        $('.count').text('Page ' + page);
    }
});};

$(document).ready(function() {
var width = window.innerWidth;
detect(width)

$(window).resize(function() {
    var width = window.innerWidth;
    detect(width)
});});
  </script>

</body>

</html>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...