Update jquery pagination based on filtering divs

Question

Hello,

I have a list of divs on my site that has proper pagination(I used this pagination script here) It works fine until I added the filtering options in which you can easily filter out divs (or in this case articles) that the user wishes.

My problem I'm having is when you fiter out some articles the pagination does not update. For example, if there are 4 page links 1,2,3,4 - that all have 5 articles in each, if I filter out some articles to 1 article story there is still 4 pages -> 3 with nothing.

So I'm wondering the best way too accomplish this without going bananas. Im very new to jquery.

Any help would be awesome.

In case you need to look at my Pagination script:

$(document).ready(function(){

    //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').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').children().css('display', 'none');

    //and show the first n (show_per_page) elements
    $('#content').children().slice(0, show_per_page).css('display', 'block');

});

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').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);
}

Also, my filtering JS:

$(document).ready(function(){
 $("input.type_check").click(function() {
  if($(this).is(':checked')) {
   $("#events div."+$(this).attr('id')).removeClass('type_hidden');
   $("#events div").not(".type_hidden, .start_hidden, .color_hidden").slideDown();
  } else {
   $("#events div."+$(this).attr('id')).addClass('type_hidden');
   $("#events div."+$(this).attr('id')).slideUp();
  }
 });

 $("input.start_check").click(function() {
  if($(this).is(':checked')) {
   $("#events div."+$(this).attr('id')).removeClass('start_hidden');
   $("#events div").not(".type_hidden, .start_hidden, .color_hidden").slideDown();
  } else {
   $("#events div."+$(this).attr('id')).addClass('start_hidden');
   $("#events div."+$(this).attr('id')).slideUp();
  }
 });
 $("input.color_check").click(function() {
  if($(this).is(':checked')) {
   $("#events div."+$(this).attr('id')).removeClass('color_hidden');
   $("#events div").not(".type_hidden, .start_hidden, .color_hidden").slideDown();
  } else {
   $("#events div."+$(this).attr('id')).addClass('color_hidden');
   $("#events div."+$(this).attr('id')).slideUp();
  }
 });
});