WordPress posts have isotope – how to add pagination/filter sorting

I have an instance of isotope running on my news page in WordPress. I’ve made it so that the categories can be sorted using a linked list. My problem arises with pagination / filtering the category.

My first issue is adding pagination to Isotope. I found an article here which I tried to duplicate for my use.

My HTML / PHP

<?php
    function custom_taxonomies_terms_links(){
    // get post by post id
    $post = get_post( $post->ID );
    // get post type by post
    $post_type = $post->post_type;
    // get post type taxonomies
    $taxonomies = get_object_taxonomies( $post_type, 'objects' );
    $out = array();
    foreach ( $taxonomies as $taxonomy_slug => $taxonomy ){
      // get the terms related to post
    $terms = get_the_terms( $post->ID, $taxonomy_slug );
    if ( !empty( $terms ) ) {
        foreach ( $terms as $term ) {
        $out[] = $term->slug.' ';
        }     
    }
    }
    return implode('', $out );
    }
    function excerpt($limit) {
    return wp_trim_words(get_the_excerpt(), $limit);
    } 

    $num = 0; // post number
    $page_num = 1; // starting page number
    $items_per_page = 4; // how many posts per page?
    $i = 0; // our counter
?>

<?php 
if ( have_posts() ) : while ( have_posts() ) : the_post(); ?>

    <div class="col-sm-3 news-item <?php echo custom_taxonomies_terms_links();?>" page="<?php echo $page_num;?>">
        <a href="<?php the_permalink();?>">
        <?php 
        if ( has_post_thumbnail() ) { // check if the post has a Post Thumbnail assigned to it.
            the_post_thumbnail('large', array( 'class' => 'img-responsive' ));
        } 
        ?>                               
        </a>
        <span class="meta"><?php the_category(' '); ?> : <?php the_date('M d, Y'); ?></span>
        <h3><a href="<?php the_permalink();?>"><?php the_title();?></a></h3>
        <?php echo excerpt(30);?>
    </div>

    <?php $num++ ?>
<?php endwhile; ?>
<?php 
   if (!($num % $items_per_page)){ // if the page is full, add page button and move to next page
    if ($page_num > 1) {
        //next page
        echo '<div class="goto-page next post news-item" page="'.($page_num-1).'">'. //show on previous page
        '<a href="#" class="page" page=".news-item[page~='.($page_num).']">'. //point to this page
        '<span>More Styles</span></a></div>';

        //previous page
        echo '<div class="goto-page previous post news-item" page="'.$page_num.'">'. //show on previous page
        '<a href="#" class="page" page=".news-item[page~='.($page_num-1).']">'. //point to this page
        '<span>Previous Styles</span></a></div>';
    } 
    $page_num++;
}?>
<?php endif; ?>

<?php if ( $page_num > 1 && ($num % $items_per_page) != 0 ){
//next page
echo '<div class="goto-page next post news-item" page="'.($page_num-1).'">'. //show on previous page
'<a href="#" class="page" page=".news-item[page~='.($page_num).']">'. //point to this page
'<span>More Styles</span></a></div>';

//previous page
echo '<div class="goto-page previous post news-item" page="'.$page_num.'">'. //show on previous page
'<a href="#" class="page" page=".news-item[page~='.($page_num-1).']">'. //point to this page
'<span>Previous Styles</span></a></div>';
} ?>

My jQuery

var containerNews = $('.latest-container');

containerNews.isotope( { filter : ".news-item[page~='1']" } ); // starting filter
containerNews.isotope({
    itemSelector: '.news-item',
    layoutMode: 'fitRows',       
    percentPosition: true
});

$('.latestNav li').click(function(){ 

    (".latestNav li").removeClass("active");
    $(this).addClass("active");        

    var selector = $(this).attr('data-filter'); 
    containerNews.isotope({ 
        filter: selector, 
        animationOptions: { 
        duration: 750, 
        easing: 'linear', 
        queue: false, 
        } 
    }); 
    return false; 
}); 

$('div.goto-page a').click(function(){
    var selector = $(this).attr('page'); // make selector equal to the value we put in 'page'
    containerNews.isotope( { filter : selector });
    return false;
});  

This actually breaks isotope but if I remove containerNews.isotope( { filter : ".news-item[page~='1']" } ); then it will work again (but no pagination)

My second issue is filtering by their category. For example say if I have 8 posts showing on the page but have a total of 16 posts altogether. 12 of these posts are under the category ‘events’. Currently if I click on ‘Events’ (to only show those posts) it will only sort out of the 8 available (not the 12) – is there any way to get around this?

Has anyone successfully managed to have both pagination and filtering with Isotope in WordPress?