javascript - 搜索过滤器将仅在当前页面上进行过滤
问题描述
我有一个带分页的搜索过滤器，它只会过滤当前页面上的内容，而不是我拥有的所有页面上的内容。
简介：假设我在第一页，我有内容 1 到 14。现在我要搜索位于第二页的内容 12....当我搜索时，它不会过滤内容从第二页开始。
我用于过滤和分页的 JS
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>
<script src="js/filter/filter.js"></script>
<script src="js/pagination/page.js"></script>
</body>
</html>
//过滤脚本
$(function() {
var $grid = $('#container');
$grid.isotope({
itemSelector: '.item'
});
var filters = []; // A convenient bucket for all the filter options,
// Search event handlers
// BUTTON-SEARCH
$('#btn').on('click', function() {
filters[0] = $('#search')[0].value;
runFilter();
});
$('#filter-select').on('change', function() {
filters[1] = 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 was selected; filter out others:
if (!($(this).hasClass(filters[1]))) {
return false;
}
}
// etcetera, for any other filters
// successfully passed all conditions, so:
return true;
}
});
}
});
//Pagination 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)
});});解决方案
推荐阅读
- kubernetes - 推出后不尊重 K8s Pod 拓扑扩展？
- kotlin - 如何在不抛出异常的情况下检查参数？
- paypal - 在结算周期结束时取消 PayPal 订阅
- javascript - Javascript：用于解析包含逗号的 Google 表格数据的正则表达式
- nuxt.js - Vuetify：如何获取当前的主题颜色？
- javascript - DropZoneDialog - 如何获取所选文件的内容类型？
- mongodb - mongod --repair 导致回溯
- swift - SwiftUI 和使用 Core Data 保存
- php - 有替换头功能吗？在 PHP 中
- javascript - 3 行网格图像库的分页