Wordpress jQuery How to reset pagination when a post is toggled? - wordpress

Question

Surely, someone must have an idea of how t get this to work...
My blog is currently set where I have a custom page that displays only posts in a given category. Each post has a toggle button. When the toggle button is pressed, the post hides (the ENTIRE div is hidden with title and all post content). 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
Page 2 disappears (unless there is a post 12,13, etc)
Would anyone know how to implement this?
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; ?>
<script type="text/javascript">
var pager = new Imtech.Pager();
$(document).ready(function() {
pager.paragraphsPerPage = 5; // set amount elements per page
pager.pagingContainer = $('#paginate'); // set of main container
pager.paragraphs = $('div.z', pager.pagingContainer); // set of required containers
pager.showPage(1);
});
</script>
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();
}
});
}
pagination.js
var Imtech = {};
Imtech.Pager = function() {
this.paragraphsPerPage = 3;
this.currentPage = 1;
this.pagingControlsContainer = '#pagingControls';
this.pagingContainerPath = '#contained';
this.numPages = function() {
var numPages = 0;
if (this.paragraphs != null && this.paragraphsPerPage != null) {
numPages = Math.ceil(this.paragraphs.length / this.paragraphsPerPage);
}
return numPages;
};
this.showPage = function(page) {
this.currentPage = page;
var html = '';
this.paragraphs.slice((page-1) * this.paragraphsPerPage,
((page-1)*this.paragraphsPerPage) + this.paragraphsPerPage).each(function() {
html += '<div>' + $(this).html() + '</div>';
});
$(this.pagingContainerPath).html(html);
renderControls(this.pagingControlsContainer, this.currentPage, this.numPages());
}
var renderControls = function(container, currentPage, numPages) {
var pagingControls = 'Page: <ul>';
for (var i = 1; i <= numPages; i++) {
if (i != currentPage) {
pagingControls += '<li>' + i + '</li>';
} else {
pagingControls += '<li>' + i + '</li>';
}
}
pagingControls += '</ul>';
$(container).html(pagingControls);
}
}
So, any ideas?

Answer 1

My Answer would be to reload the current page with posts through ajax.
there is no problem with generating pagination through javascript and php
you have same behaviour for initial load and subsequent loads(when user hides a post)
you can make the pagination work with jquery pretty easy