Hey, I'm trying to get my pagination numbers to update when the user uses the filter options at the side.
Here is what I'm talking about: When you click the color - Yellow - you should only get 1 result(Giant) and only 1 page number should display. however the pagination is not updating properly and still displays all page numbers.
Here is the page (View page source to see all code including jquery)
I'm assuming I have to put the pagination function -> paginateIt() <- somewhere in the filter script when the filter is started, but im unsure where to properly place it if that's the case.
Thanks for any help on this.
P.S. here are the two jquery files from the project if you want to quickly take a glance at it:
Filter jquery:
(function($) {
$.fn.randomize = function(){
return $(this).sort(function() {return 0.5 - Math.random()});
}
$.fn.filterprojects = function(settings) {
settings = $.extend({
animationSpeed: 900,
animationPulse: 100,
animationEase: "linear",
activeClass: "active",
allTag: "all",
randomize: true,
show: { width: "show", opacity: "show" },
hide: { width: "hide", opacity: "hide" },
filterTagSelector: [] // specify at least one
}, settings);
$(this).each(function(i, o){
var _elements = $(this).children();
/* Binding the filter */
$(this).bind("filter", function(){
var _groups = [];
var _filtered_elements = _elements;
$.each(settings.filterTagSelector, function(k, j){
_groups[k] = [];
$(this + "." + settings.activeClass).each(function(){
if(!$(this).hasClass(settings.allTag) && this.hash != undefined) { _groups[k].push(this.hash.substring(1)); }
});
if(_groups[k].length > 0){
_filtered_elements = _filtered_elements.filter("." + _groups[k].join(",."));
}
});
/* Randomize */
if(settings.randomize){
_filtered_elements = _filtered_elements.randomize();
_elements = _elements.randomize();
}
/* Show */
_filtered_elements.each(function(i,o){
$(this).queue(function(){
$(this).animate({left: "+0"}, (settings.animationPulse*i)); // dirty trick :)
$(this).animate(settings.show, settings.animationSpeed);
$(this).dequeue()
});
});
/* Hide */
_elements.not(_filtered_elements).each(function(i,o){
$(this).queue(function(){
$(this).animate({left: "+0"}, (settings.animationPulse*i)); // dirty trick :)
$(this).animate(settings.hide, settings.animationSpeed);
$(this).dequeue()
});
});
});
/* Setup filter selectors */
$.each(settings.filterTagSelector, function(k, j){
$(""+this).click(function(e){
e.preventDefault();
if($(this).hasClass(settings.allTag)){
$(j).removeClass(settings.activeClass);
$(this).addClass(settings.activeClass);
} else {
$(this).hasClass(settings.activeClass) ? $(this).removeClass(settings.activeClass) : $(this).addClass(settings.activeClass);
$(j+"."+settings.activeClass).length > 0 ? $(j+"."+settings.allTag).removeClass(settings.activeClass) : $(j+"."+settings.allTag).addClass(settings.activeClass);
}
/* Triggering the filter */
$(o).trigger("filter");
})
});
});
return this
};
})(jQuery);
Pagination jquery:
$(document).ready(function(){
function paginateIt(){
//how much items per page to show
var show_per_page = 3;
//getting the amount of elements inside content div
var number_of_items = $('#content ul').children().size();
//calculate the number of pages we are going to have
var number_of_pages = Math.ceil(number_of_items/show_per_page);
//set the value of our hidden input fields
$('#current_page').val(0);
$('#show_per_page').val(show_per_page);
//now when we got all we need for the navigation let's make it '
/*
what are we going to have in the navigation?
- link to previous page
- links to specific pages
- link to next page
*/
var navigation_html = '<a class="previous_link" href="javascript:previous();">Prev</a>';
var current_link = 0;
while(number_of_pages > current_link){
navigation_html += '<a class="page_link" href="javascript:go_to_page(' + current_link +')" longdesc="' + current_link +'">'+ (current_link + 1) +'</a>';
current_link++;
}
navigation_html += '<a class="next_link" href="javascript:next();">Next</a>';
$('#page_navigation').html(navigation_html);
//add active_page class to the first page link
$('#page_navigation .page_link:first').addClass('active_page');
//hide all the elements inside content div
$('#content ul').children().css('display', 'none');
//and show the first n (show_per_page) elements
$('#content ul').children().slice(0, show_per_page).css('display', 'block');
}
paginateIt();
});
function previous(){
new_page = parseInt($('#current_page').val()) - 1;
//if there is an item before the current active link run the function
if($('.active_page').prev('.page_link').length==true){
go_to_page(new_page);
}
}
function next(){
new_page = parseInt($('#current_page').val()) + 1;
//if there is an item after the current active link run the function
if($('.active_page').next('.page_link').length==true){
go_to_page(new_page);
}
}
function go_to_page(page_num){
//get the number of items shown per page
var show_per_page = parseInt($('#show_per_page').val());
//get the element number where to start the slice from
start_from = page_num * show_per_page;
//get the element number where to end the slice
end_on = start_from + show_per_page;
//hide all children elements of content div, get specific items and show them
$('#content ul').children().css('display', 'none').slice(start_from, end_on).css('display', 'block');
/*get the page link that has longdesc attribute of the current page and add active_page class to it
and remove that class from previously active page link*/
$('.page_link[longdesc=' + page_num +']').addClass('active_page').siblings('.active_page').removeClass('active_page');
//update the current page input field
$('#current_page').val(page_num);
}