Surely, someone must know of methods t get this work...

My blog is presently set where I've got a custom page that shows only posts inside a given category. Each publish includes a toggle button. Once the toggle button is pressed, the publish hides (the whole div is hidden with title and all sorts of publish content). This works as preferred.

The page can also be set to show 10 posts per page. Basically have 11 posts, the eleventh is pressed to page 2. This works as preferred.

However , whenever a publish is toggled (let us say publish 3), I'm playing a maximum of 9 posts in this article, with publish 11 remaining on-page 2. What I wish to have happen is the fact that when publish 3 is toggled, publish 11 should carry onto the first page, with page 2 basically vanishing (since you will find no posts display there).

For illustration reasons: The First Page shows Posts 1,2,3,4,5,6,7,8,9,10 Page 2 shows Posts 11...and so forth.

If Publish 3 is toggled: The First Page shows Posts 1,2,4,5,6,7,8,9,10,11 Page 2 vanishes (unless of course there's a publish 12,13, etc)

Would anybody understand 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><a href="#" onclick="pager.showPage(' + i + '); return false;">' + i + '</a></li>';
        } else {
            pagingControls += '<li>' + i + '</li>';
        }
    }
    pagingControls += '</ul>';
    $(container).html(pagingControls);
}
}

So, any ideas?

My Answer is always to reload the present page with posts through ajax.

  • there's not a problem with producing pagination through javascript and php
  • you've same behavior for initial load and subsequent loads(when user hides a publish)
  • you may make the pagination use jquery pretty easy