2011-11-17 128 views
0

當然,有人必須有一個如何得到這個工作的想法...WordPress的jQuery如何重置頁面切換時的分頁?

我的博客目前設置,我有一個自定義頁面,只顯示給定類別中的帖子。每篇文章都有一個切換按鈕。當按下切換按鈕時,隱藏帖子(ENTIRE div被標題和所有發佈內容隱藏)。這可以按需要工作。

該頁面也設置爲每頁顯示10篇文章。如果我有11個帖子,11號會推到頁面2。

問題是,當一個帖子被切換(比如說帖子3)時,我在這個頁面上總共留下了9個帖子,其中帖子11仍然留在第2頁上。我想要發生的是當帖子3被切換,帖子11應該進入頁面1,頁面2基本消失(因爲在那裏沒有帖子要顯示)。

出於演示目的: Page 1顯示帖子1,2,3,4,5,6,7,8,9,10 Page 2顯示帖子11 ...等等。

如果帖子3被切換: Page 2顯示帖子1,2,4,5,6,7,8,9,10,11 Page 2消失(除非有帖子12,13等)

有誰知道如何實現這個?

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

因此,任何想法?

回答

0

我的答案是通過ajax重新加載當前頁面的文章。

  • 沒有與通過JavaScript和PHP產生分頁沒有問題
  • 您對初始加載和後續加載(當用戶隱藏後)
  • 你可以使用jQuery很容易拼版工作相同的行爲
+0

而這又如何實現? – Sweepster