Pagination displaying elements as block - CSS Jquery

Question

I am trying to implement a pagination with my content and allow the user to filter out results.

Here is what I have created: Click Here

The Problem: When filtering out content, for example taking out the colors black and green should display 4 results in total. However when doing this the pagination numbers do not update do to a CSS problem im guessing since those 4 results should display on the first page, instead they are on 3 pages.

Looking at the HTML using Firebug, you can clearly see whats happening. I set the pagination to show 5 site names per page. So when filtering out the results it hides the content but the pagination still displays them as a 'block' which is why the pagination is still displaying on 3 pages as opposed to 1 (when unchecking the the colors black and green).

I having been trying to fix this for some time now and can't figure out a solution, so I'm hoping someone can help me with this problem.

Thank you for any help.

Answer 1

the following should do the trick .. let me pinpoint some things i have altered ..

1. very important is that you were assigning the functions to the checkboxes inside the paginateIt function so each time it was run (on each click to a checkbox) you were adding additional click event to each checkbox.. after a few clicks the browser would start freezing ..

2. so i moved the click event to be assigned outside the paginateIt function (only once) you do not need to identify each group if checkboxes since the action that is being performed is the same in all cases ... I changed all hidden classes to a single one named hidden.

3. the $('#content').children().filter would always return all the elements so i changed it to $('#content div div').filter, but this is specific to the current implementation of your html. This was happening because the children() are the immediate children of the selector and since you have a div wrapped around each one final element (the one which is either hidden or not) it would always return the max number ...

$(document).ready(function(){

function paginateIt(){
 //how much items per page to show
 var show_per_page = 5; 
 //getting the amount of elements inside content div
 var number_of_items = $('#content div div').filter(":not(.hidden)").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 div div').filter(":not(.hidden)").css('display', 'none');

 //and show the first n (show_per_page) elements
 $('#content div div').filter(":not(.hidden)").slice(0, show_per_page).css('display', 'block');
}


 $("input:checkbox").click(function() {

   if($(this).is(':checked')) {
    $("#events div."+$(this).attr('id')).removeClass('hidden');
    $("#events div").not(".hidden").show();
   } else {
    $("#events div."+$(this).attr('id')).addClass('hidden');
    $("#events div."+$(this).attr('id')).hide();
   }
   paginateIt();
  });

 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 div div').filter(":not(.hidden)").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);
}