I implemented search filter and pagination both but the problem is that the search filter only search the divs that are present on the particular page number , not on all the divs that are present as because the pagination code hide the other divs ..but i want the search filter code to search the hidden divs as well so should I make changes in the pagination code or the search filter code
//search filter jquery
$(document).ready(function(){
var $btns = $('.btn').click(function() {
$btns.removeClass('active');
$(this).addClass('active');
})
var $search = $("#search").on('input',function(){
$btns.removeClass('active');
var matcher = new RegExp($(this).val(), 'gi');
$('.box').show().not(function(){
return matcher.test($(this).find('.name').text())
}).hide();
})
})
//pagination jquery
'use strict';
var numberOfItems = $('#page .list-group').length; // Get total number of the items that should be paginated
var limitPerPage = 2; // Limit of items per each page
$('#page .list-group:gt(' + (limitPerPage - 1) + ')').hide(); // Hide all items over page limits (e.g., 5th item, 6th item, etc.)
var totalPages = Math.round(numberOfItems / limitPerPage); // Get number of pages
$(".pagination").append("<li class='page-item current-page'><a class='page-link' href='javascript:void(0)'>" + 1 + "</a></li>"); // Add first page marker
// Loop to insert page number for each sets of items equal to page limit (e.g., limit of 4 with 20 total items = insert 5 pages)
for (var i = 2; i <= totalPages; i++) {
$(".pagination").append("<li class='page-item current-page'><a class='page-link' href='javascript:void(0)'>" + i + "</a></li>"); // Insert page number into pagination tabs
}
// Add next button after all the page numbers
$(".pagination").append("<li class='page-item' id='next-page'><a class='page-link' href='javascript:void(0)' aria-label='Next'><span aria-hidden='true'>»</span></a></li>");
// Function that displays new items based on page number that was clicked
$(".pagination li.current-page").on("click", function() {
// Check if page number that was clicked on is the current page that is being displayed
if ($(this).hasClass('active')) {
return false; // Return false (i.e., nothing to do, since user clicked on the page number that is already being displayed)
} else {
var currentPage = $(this).index(); // Get the current page number
$(".pagination li").removeClass('active'); // Remove the 'active' class status from the page that is currently being displayed
$(this).addClass('active'); // Add the 'active' class status to the page that was clicked on
$("#page .list-group").hide(); // Hide all items in loop, this case, all the list groups
var grandTotal = limitPerPage * currentPage; // Get the total number of items up to the page number that was clicked on
// Loop through total items, selecting a new set of items based on page number
for (var i = grandTotal - limitPerPage; i < grandTotal; i++) {
$("#page .list-group:eq(" + i + ")").show(); // Show items from the new page that was selected
}
}
});
// Function to navigate to the next page when users click on the next-page id (next page button)
$("#next-page").on("click", function() {
var currentPage = $(".pagination li.active").index(); // Identify the current active page
// Check to make sure that navigating to the next page will not exceed the total number of pages
if (currentPage === totalPages) {
return false; // Return false (i.e., cannot navigate any further, since it would exceed the maximum number of pages)
} else {
currentPage++; // Increment the page by one
$(".pagination li").removeClass('active'); // Remove the 'active' class status from the current page
$("#page .list-group").hide(); // Hide all items in the pagination loop
var grandTotal = limitPerPage * currentPage; // Get the total number of items up to the page that was selected
// Loop through total items, selecting a new set of items based on page number
for (var i = grandTotal - limitPerPage; i < grandTotal; i++) {
$("#page .list-group:eq(" + i + ")").show(); // Show items from the new page that was selected
}
$(".pagination li.current-page:eq(" + (currentPage - 1) + ")").addClass('active'); // Make new page number the 'active' page
}
});
// Function to navigate to the previous page when users click on the previous-page id (previous page button)
$("#previous-page").on("click", function() {
var currentPage = $(".pagination li.active").index(); // Identify the current active page
// Check to make sure that users is not on page 1 and attempting to navigating to a previous page
if (currentPage === 1) {
return false; // Return false (i.e., cannot navigate to a previous page because the current page is page 1)
} else {
currentPage--; // Decrement page by one
$(".pagination li").removeClass('active'); // Remove the 'activate' status class from the previous active page number
$("#page .list-group").hide(); // Hide all items in the pagination loop
var grandTotal = limitPerPage * currentPage; // Get the total number of items up to the page that was selected
// Loop through total items, selecting a new set of items based on page number
for (var i = grandTotal - limitPerPage; i < grandTotal; i++) {
$("#page .list-group:eq(" + i + ")").show(); // Show items from the new page that was selected
}
$(".pagination li.current-page:eq(" + (currentPage - 1) + ")").addClass('active'); // Make new page number the 'active' page
}
});</script><script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script><section class="wrapper" style="margin-top:40px;"><div class="container-fostrap"><div class="content"> <div class="container" id="page"><div class="row list-group"><div class="col-xs-12 col-sm-4 box"><div class="card"><a class="img-card" href="arsd"><img src="assets/images/arsd.jpg"></a><div class="card-content"><h4 class="card-title name">
ARSD College</h4><p style="color: #606060;">Atma Ram Sanatan Dharma College, formerly Sanatan Dharma College, is a co-educational constituent college of the University of Delhi. The college was founded on August 3, 1959, by the Sanatan Dharma Sabha, Delhi.</p></div><div class="card-read-more"><a href="clients" class="btn btn-link btn-block">
Connect your society</a><a href="arsd" class="btn btn-link btn-block">
Check out Socities</a></div></div></div><div class="col-xs-12 col-sm-4 box"><div class="card"><a class="img-card" href="venky"><img src="assets/college/venky/venky.jfif"></a><div class="card-content"><h4 class="card-title name">
Sri Venkateswara College</h4><p style="color: #606060;">Sri Venkateswara College is a co-ed constituent college of the University of Delhi established in 1962 in New Delhi, India. It is being administered by Tirumala Tirupati Devasthanams and awards degrees under the purview of the university and offers courses both at the undergraduate level and the postgraduate level. </p></div><div class="card-read-more"><a href="clients" class="btn btn-link btn-block">
Connect your society</a><a href="venky" class="btn btn-link btn-block">
Check out Socities</a></div></div></div><div class="col-xs-12 col-sm-4 box"><div class="card"><a class="img-card" href="motilal"><img src="assets/college/motilal/motilal.jpg"></a><div class="card-content"><h4 class="card-title name">
Motilal College</h4><p style="color: #606060;">Motilal Nehru College is one of the largest constituent colleges of the University of Delhi. It awards degrees under the purview of the university and offers courses in science, humanities and commerce disciplines at the undergraduate level.</p></div><div class="card-read-more"><a href="clients" class="btn btn-link btn-block">
Connect your society</a><a href="motilal" class="btn btn-link btn-block">
Check out Socities</a></div></div></div></div><div class="row list-group"><div class="col-xs-12 col-sm-4 box"><div class="card"><a class="img-card" href="aurobindo"><img src="assets/society/aurobindo/logo.jpg"></a><div class="card-content"><h4 class="card-title name">
Sri Aurobindo College </h4><p style="color: #606060;">Sri Aurobindo College, (Evening) is a co-ed constituent college of the University of Delhi in New Delhi, India. The College is situated on Basant Kaur Marg and is well connected by Delhi's public bus transport system. It is a 2-minute walk from the Malviya Nagar Metro station.</p></div><div class="card-read-more"><a href="clients" class="btn btn-link btn-block">
Connect your society</a><a href="aurobindo" class="btn btn-link btn-block">
Check out Socities</a></div></div></div><div class="col-xs-12 col-sm-4 box"><div class="card"><a class="img-card" href=""><img src="assets/images/comingsoon.jpg"></a><div class="card-content"><h4 class="card-title name ">
Delhi College of Arts and Commerce (DCAC) </h4><p style="color: #606060;">This colleges didn't put up their societies . If you want to add your college society then contact us or send us information through our website.</p></div><div class="card-read-more"><a href="clients" class="btn btn-link btn-block">
Connect your society</a><a href="" class="btn btn-link btn-block">
Check out Socities</a></div></div></div><div class="col-xs-12 col-sm-4 box"><div class="card"><a class="img-card" href=""><img src="assets/images/comingsoon.jpg"></a><div class="card-content"><h4 class="card-title name">
Shaheed Bhagat Singh College (SBSC) </h4><p style="color: #606060;">This colleges didn't put up their societies . If you want to add your college society then contact us or send us information through our website.</p></div><div class="card-read-more"><a href="clients" class="btn btn-link btn-block">
Connect your society</a><a href="" class="btn btn-link btn-block">
Check out Socities</a></div></div></div></div><div class="row list-group"><div class="col-xs-12 col-sm-4 box"><div class="card"><a class="img-card" href=""><img src="assets/images/comingsoon.jpg"></a><div class="card-content"><h4 class="card-title name">
College of Vocational Studies (CVS) </h4><p style="color: #606060;">This colleges didn't put up their societies . If you want to add your college society then contact us or send us information through our website.</p></div><div class="card-read-more"><a href="clients" class="btn btn-link btn-block">
Connect your society</a><a href="" class="btn btn-link btn-block">
Check out Socities</a></div></div></div><div class="col-xs-12 col-sm-4 box"><div class="card"><a class="img-card" href=""><img src="assets/images/comingsoon.jpg"></a><div class="card-content"><h4 class="card-title name">
Maitreyi College </h4><p style="color: #606060;">This colleges didn't put up their societies . If you want to add your college society then contact us or send us information through our website.</p></div><div class="card-read-more"><a href="clients" class="btn btn-link btn-block">
Connect your society</a><a href="" class="btn btn-link btn-block">
Check out Socities</a></div></div></div><div class="col-xs-12 col-sm-4 box"><div class="card"><a class="img-card" href=""><img src="assets/images/comingsoon.jpg"></a><div class="card-content"><h4 class="card-title name">
Hindu College</h4><p style="color: #606060;">This colleges didn't put up their societies . If you want to add your college society then contact us or send us information through our website.</p></div><div class="card-read-more"><a href="clients" class="btn btn-link btn-block">
Connect your society</a><a href="" class="btn btn-link btn-block">
Check out Socities</a></div></div></div></div><div class="row list-group"><div class="col-xs-12 col-sm-4 box"><div class="card"><a class="img-card" href=""><img src="assets/images/comingsoon.jpg"></a><div class="card-content"><h4 class="card-title name">
Hansraj College</h4><p style="color: #606060;">This colleges didn't put up their societies . If you want to add your college society then contact us or send us information through our website.</p></div><div class="card-read-more"><a href="clients" class="btn btn-link btn-block">
Connect your society</a><a href="" class="btn btn-link btn-block">
Check out Socities</a></div></div></div><div class="col-xs-12 col-sm-4 box"><div class="card"><a class="img-card" href=""><img src="assets/images/comingsoon.jpg"></a><div class="card-content"><h4 class="card-title name">
Kirori Mal College
z </h4><p style="color: #606060;">This colleges didn't put up their societies . If you want to add your college society then contact us or send us information through our website.</p></div><div class="card-read-more"><a href="clients" class="btn btn-link btn-block">
Connect your society</a><a href="" class="btn btn-link btn-block">
Check out Socities</a></div></div></div><div class="col-xs-12 col-sm-4 box"><div class="card"><a class="img-card" href=""><img src="assets/images/comingsoon.jpg"></a><div class="card-content"><h4 class="card-title name">
Shri Ram College of Commerce</h4><p style="color: #606060;">This colleges didn't put up their societies . If you want to add your college society then contact us or send us information through our website.</p></div><div class="card-read-more"><a href="clients" class="btn btn-link btn-block">
Connect your society</a><a href="" class="btn btn-link btn-block">
Check out Socities</a></div></div></div></div><div class="row list-group"><div class="col-xs-12 col-sm-4 box"><div class="card"><a class="img-card" href=""><img src="assets/images/comingsoon.jpg"></a><div class="card-content"><h4 class="card-title name">
Sri Aurobindo College (SAC) </h4><p style="color: #606060;">This colleges didn't put up their societies . If you want to add your college society then contact us or send us information through our website.</p></div><div class="card-read-more"><a href="clients" class="btn btn-link btn-block">
Connect your society</a><a href="" class="btn btn-link btn-block">
Check out Socities</a></div></div></div><div class="col-xs-12 col-sm-4 box"><div class="card"><a class="img-card" href=""><img src="assets/images/comingsoon.jpg"></a><div class="card-content"><h4 class="card-title name">
Gargi College</h4><p style="color: #606060;">This colleges didn't put up their societies . If you want to add your college society then contact us or send us information through our website.</p></div><div class="card-read-more"><a href="clients" class="btn btn-link btn-block">
Connect your society</a><a href="" class="btn btn-link btn-block">
Check out Socities</a></div></div></div><div class="col-xs-12 col-sm-4 box"><div class="card"><a class="img-card" href=""><img src="assets/images/comingsoon.jpg"></a><div class="card-content"><h4 class="card-title name">
Deen Dayal upadhyay college</h4><p style="color: #606060;">This colleges didn't put up their societies . If you want to add your college society then contact us or send us information through our website.</p></div><div class="card-read-more"><a href="clients" class="btn btn-link btn-block">
Connect your society</a><a href="" class="btn btn-link btn-block">
Check out Socities</a></div></div></div></div></div><nav aria-label="Page navigation example"><ul class="pagination"><li class="page-item" id="previous-page"><a class="page-link" href="javascript:void(0)" aria-label="Previous"><span aria-hidden="true">«</span></a></li></ul></nav></div></div></section>