Wordpress toggling + pagination = problems.

[mcfmullen]

This is far more complex than it seems so let me give you some background:

 

My wordpress blog is currently set where I have a custom page that displays only posts in a given category. Each post has a toggle button (i.e. "like"). When the toggle button is pressed, the post hides (the ENTIRE div is hidden with title and all post content) and sends values to my database. This works as desired.

 

The page is also set to display 10 posts per page. If I have 11 posts, the 11th is pushed to page 2. This works as desired.

 

The problem is that when a post is toggled (let's say post 3), I am left with a total of 9 posts on this page, with post 11 remaining on page 2. What I want to have happen is that when post 3 is toggled, post 11 should carry onto page 1, with page 2 essentially disappearing (since there are no posts to display there).

 

For illustration purposes:

Page 1 displays Posts 1, 2, 3, 4, 5, 6, 7, 8, 9, 10

Page 2 displays Posts 11...and so on.

 

If Post 3 is toggled:

Page 1 displays Posts 1, 2, 4, 5, 6, 7, 8, 9, 10, 11 (notice post 3 is gone)

Page 2 displays Posts 12, 13, 14, etc (unless there is nothing after post 11 in which case Page 2 disappears)

 

Clearly I need to implement some sort of call to refresh my pagination as posts are toggled... but how to do that within wordpress is quite an obstacle.

 

page.php:

 

<?php
    $paged = (get_query_var('paged')) ? get_query_var('paged') : 1;
    $args = array(
        'category_name' => 'post',
        'paged' => $paged,
        'posts_per_page' => 10
    );
    query_posts($args);
    while (have_posts()) : the_post();
?>

..........the posts are displayed.............

    <?php endwhile; ?>

<div class="navigation">
	<?php
	include('wp-pagenavi.php');
	if(function_exists('wp_pagenavi')) { wp_pagenavi(); }
	?>
</div>
</div>

 

toggle.js

$(document).on("click", ".toggle", function(){
    postID = $(this).attr('id').replace('toggle_', '');

    // Declare variables
    value = '0';

    myajax();

    return false;
});

function myajax(){
    // Send values to database
    $.ajax({
        url: 'check.php',
        //check.php receives the values sent to it and stores them in the database
        type: 'POST',
        data: 'postID=' + postID + '&value=' + value,
        success: function(result) {
             $('#post_' + postID).toggle();
                    }
    });
}

 

 

Would I have to replace the wordpress pagination with some jquery pagination? Or is there another way?