Можно ли совместить работу двух скриптов? Судя по коду разбиения на страницы, он скрывает содержимое с моим div, но по какой-то причине поиск по этим div не работает, и обработка идет только на страницу, которая сейчас открыта. Если div с ключевым словом находится на второй странице, то тупо его не находит. Любые идеи? :)
<link href="//cdnjs.cloudflare.com/ajax/libs/font-awesome/5.13.0/css/all.min.css" rel="stylesheet">
<style>
tovar {
background: #ffc500;
padding: 10px;
font-weight: 700;
text-transform: uppercase;
text-align:center;
margin: 20px 10px;
width: 100%;
border-radius: 8px;
}
.input {
margin-bottom: 50px;
width: 200px;
}
.easyPaginateNav {
width: 100%;
margin-top: 10px;
display: flex;
}
.easyPaginateNav a {
background-color: white;
border-radius: 8px;
padding: 8px;
display: block;
flex: 1;
margin: 0 10px;
text-align: center;
font-weight: 700;
}
.easyPaginateNav a:hover {
background-color: #ffc500;
}
.easyPaginateNav a:first-child {
margin-right: 10px;
margin-left: 0px;
}
.easyPaginateNav a:last-child {
margin-right: 0px;
margin-left: 10px;
}
</style>
<input class="input" type="text" id="search-input">
<div id="tovar-list">
<tovar>Bike</tovar>
<tovar>Panties</tovar>
<tovar>Flowers</tovar>
<tovar>Hello</tovar>
<tovar>Computers</tovar>
<tovar>Beyonce</tovar>
<tovar>T-shirt</tovar>
</div>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script>
(function($){
$.fn.easyPaginate = function (options) {
var defaults = {
paginateElement: 'li',
hashPage: 'page',
elementsPerPage: 10,
effect: 'default',
slideOffset: 200,
firstButton: true,
firstButtonText: '<<',
lastButton: true,
lastButtonText: '>>',
prevButton: true,
prevButtonText: '<',
nextButton: true,
nextButtonText: '>'
}
return this.each (function (instance) {
var plugin = {};
plugin.el = $(this);
plugin.el.addClass('easyPaginateList');
plugin.settings = {
pages: 0,
objElements: Object,
currentPage: 1
}
var getNbOfPages = function() {
return Math.ceil(plugin.settings.objElements.length / plugin.settings.elementsPerPage);
};
var displayNav = function() {
htmlNav = '<div class="easyPaginateNav">';
if(plugin.settings.firstButton) {
htmlNav += '<a href="#'+plugin.settings.hashPage+':1" title="First page" rel="1" class="first">'+plugin.settings.firstButtonText+'</a>';
}
if(plugin.settings.prevButton) {
htmlNav += '<a href="" title="Previous" rel="" class="prev">'+plugin.settings.prevButtonText+'</a>';
}
for(i = 1;i <= plugin.settings.pages;i++) {
htmlNav += '<a href="#'+plugin.settings.hashPage+':'+i+'" title="Page '+i+'" rel="'+i+'" class="page">'+i+'</a>';
};
if(plugin.settings.nextButton) {
htmlNav += '<a href="" title="Next" rel="" class="next">'+plugin.settings.nextButtonText+'</a>';
}
if(plugin.settings.lastButton) {
htmlNav += '<a href="#'+plugin.settings.hashPage+':'+plugin.settings.pages+'" title="Last page" rel="'+plugin.settings.pages+'" class="last">'+plugin.settings.lastButtonText+'</a>';
}
htmlNav += '</div>';
plugin.nav = $(htmlNav);
plugin.nav.css({
'width': plugin.el.width()
});
plugin.el.after(plugin.nav);
var elSelector = '#' + plugin.el.get(0).id + ' + ';
$(elSelector + ' .easyPaginateNav a.page,'
+ elSelector + ' .easyPaginateNav a.first,'
+ elSelector + ' .easyPaginateNav a.last').on('click', function(e) {
e.preventDefault();
displayPage($(this).attr('rel'));
});
$(elSelector + ' .easyPaginateNav a.prev').on('click', function(e) {
e.preventDefault();
page = plugin.settings.currentPage > 1?parseInt(plugin.settings.currentPage) - 1:1;
displayPage(page);
});
$(elSelector + ' .easyPaginateNav a.next').on('click', function(e) {
e.preventDefault();
page = plugin.settings.currentPage < plugin.settings.pages?parseInt(plugin.settings.currentPage) + 1:plugin.settings.pages;
displayPage(page);
});
};
var displayPage = function(page, forceEffect) {
if(plugin.settings.currentPage != page) {
plugin.settings.currentPage = parseInt(page);
offsetStart = (page - 1) * plugin.settings.elementsPerPage;
offsetEnd = page * plugin.settings.elementsPerPage;
if(typeof(forceEffect) != 'undefined') {
eval("transition_"+forceEffect+"("+offsetStart+", "+offsetEnd+")");
}else {
eval("transition_"+plugin.settings.effect+"("+offsetStart+", "+offsetEnd+")");
}
plugin.nav.find('.current').removeClass('current');
plugin.nav.find('a.page:eq('+(page - 1)+')').addClass('current');
switch(plugin.settings.currentPage) {
case 1:
$('.easyPaginateNav a', plugin).removeClass('disabled');
$('.easyPaginateNav a.first, .easyPaginateNav a.prev', plugin).addClass('disabled');
break;
case plugin.settings.pages:
$('.easyPaginateNav a', plugin).removeClass('disabled');
$('.easyPaginateNav a.last, .easyPaginateNav a.next', plugin).addClass('disabled');
break;
default:
$('.easyPaginateNav a', plugin).removeClass('disabled');
break;
}
}
};
var transition_default = function(offsetStart, offsetEnd) {
plugin.currentElements.hide();
plugin.currentElements = plugin.settings.objElements.slice(offsetStart, offsetEnd).clone();
plugin.el.html(plugin.currentElements);
plugin.currentElements.show();
};
var transition_fade = function(offsetStart, offsetEnd) {
plugin.currentElements.fadeOut();
plugin.currentElements = plugin.settings.objElements.slice(offsetStart, offsetEnd).clone();
plugin.el.html(plugin.currentElements);
plugin.currentElements.fadeIn();
};
var transition_slide = function(offsetStart, offsetEnd) {
plugin.currentElements.animate({
'margin-left': plugin.settings.slideOffset * -1,
'opacity': 0
}, function() {
$(this).remove();
});
plugin.currentElements = plugin.settings.objElements.slice(offsetStart, offsetEnd).clone();
plugin.currentElements.css({
'margin-left': plugin.settings.slideOffset,
'display': 'block',
'opacity': 0,
'min-width': plugin.el.width() / 2
});
plugin.el.html(plugin.currentElements);
plugin.currentElements.animate({
'margin-left': 0,
'opacity': 1
});
};
var transition_climb = function(offsetStart, offsetEnd) {
plugin.currentElements.each(function(i) {
var $objThis = $(this);
setTimeout(function() {
$objThis.animate({
'margin-left': plugin.settings.slideOffset * -1,
'opacity': 0
}, function() {
$(this).remove();
});
}, i * 200);
});
plugin.currentElements = plugin.settings.objElements.slice(offsetStart, offsetEnd).clone();
plugin.currentElements.css({
'margin-left': plugin.settings.slideOffset,
'display': 'block',
'opacity': 0,
'min-width': plugin.el.width() / 2
});
plugin.el.html(plugin.currentElements);
plugin.currentElements.each(function(i) {
var $objThis = $(this);
setTimeout(function() {
$objThis.animate({
'margin-left': 0,
'opacity': 1
});
}, i * 200);
});
};
plugin.settings = $.extend({}, defaults, options);
plugin.currentElements = $([]);
plugin.settings.objElements = plugin.el.find(plugin.settings.paginateElement);
plugin.settings.pages = getNbOfPages();
if(plugin.settings.pages > 1) {
plugin.el.html();
// Here we go
displayNav();
page = 1;
if(document.location.hash.indexOf('#'+plugin.settings.hashPage+':') != -1) {
page = parseInt(document.location.hash.replace('#'+plugin.settings.hashPage+':', ''));
if(page.length <= 0 || page < 1 || page > plugin.settings.pages) {
page = 1;
}
}
displayPage(page, 'default');
}
});
};
})(jQuery);
</script>
<script>
$('#tovar-list').easyPaginate({
paginateElement: 'tovar',
elementsPerPage: 4,
effect: 'fade',
firstButtonText: '<i class="fas fa-angle-double-left"></i>',
lastButtonText: '<i class="fas fa-angle-double-right"></i>',
prevButtonText: '<i class="fas fa-chevron-left"></i>',
nextButtonText: '<i class="fas fa-chevron-right"></i>'
});
$('#search-input').keyup(function() {
var filter = $(this).val(),
count = 0;
$('#tovar-list tovar').each(function() {
if ($(this).text().search(new RegExp(filter, "i")) < 0) {
$(this).hide();
} else {
$(this).show();
count++;
}
});
});
</script>
PS Я вставил скрипт Easypaginate. Js прямо в код, так как не нашел CDN: (