I am trying to apply pagignation with ajax in wordpress . i have write following code. pagination work good but when i click to paging button the whole page is refreshing.
i am new to Ajax with wordpress.
pls suggest me what wrong i am doing.
code in header.php
....
<?php
/* We add some JavaScript to pages with the comment form
* to support sites with threaded comments (when in use).
*/
if ( is_singular() && get_option( 'thread_comments' ) )
wp_enqueue_script( 'comment-reply' );
/* Always have wp_head() just before the closing </head>
* tag of your theme, or you will break many plugins, which
* generally use this hook to add elements to <head> such
* as styles, scripts, and meta tags.
*/
wp_head();
?>
<script type="text/javascript">
jQuery('#Pagination a').live('click', function(e){ //check when pagination link is clicked and stop its action.
e.preventDefault();
var link = jQuery(this).attr('href'); //Get the href attribute
jQuery('#content').fadeOut(500, function(){ //fade out the content area
jQuery("#loader").show(); // show the loader animation
}).load(link + ' #content', function(){ jQuery('#content').fadeIn(500, function(){ //load data from the content area from paginator link page that we just get from the top
jQuery("#loader").hide(); //hide the loader
}); });
});
</script>
........
function.php
function pagination($pages = '', $range =1) { /* handle pagination for post pages*/
$showitems = ($range * 2)+1;
global $paged;
if(empty($paged)) $paged = 1;
if($pages == '')
{
global $wp_query;
$pages = $wp_query->max_num_pages;
if(!$pages)
{
$pages = 1;
}
}
if(1 != $pages)
{
echo "<div class=\"pagination\" id=\"Pagination\"><span>Page ".$paged." of ".$pages."</span>";
if($paged > 2 && $paged > $range+1 && $showitems < $pages) echo "<a href='".get_pagenum_link(1)."'>« First</a>";
if($paged > 1 && $showitems < $pages) echo "<a href='".get_pagenum_link($paged - 1)."'>‹ Previous</a>";
for ($i=1; $i <= $pages; $i++)
{
if (1 != $pages &&( !($i >= $paged+$range+1 || $i <= $paged-$range-1) || $pages <= $showitems ))
{
echo ($paged == $i)? "<span class=\"current\">".$i."</span>":"<a href='".get_pagenum_link($i)."' class=\"inactive\">".$i."</a>";
}
}
if ($paged < $pages && $showitems < $pages) echo "<a href=\"".get_pagenum_link($paged + 1)."\">Next ›</a>";
if ($paged < $pages-1 && $paged+$range-1 < $pages && $showitems < $pages) echo "<a href='".get_pagenum_link($pages)."'>Last »</a>";
echo "</div>\n";
}
}
mypage.php
<div class="wrapper bg-color" >
<div id="wrapper">
<div class="clearfix">
<div class="clear"></div>
<div class="three-column" id="content">
<?php
$cat_name="offer";
$args = array('posts_per_page' => 2,'paged' => $paged, 'category_name' => $cat_name, 'orderby'=>'post_date', 'order'=>'DESC' );
$wp_query = new WP_Query($args);
if ( $wp_query->have_posts() ) while ($wp_query->have_posts()) : $wp_query->the_post();
$pop_img = wp_get_attachment_image_src( get_post_thumbnail_id($post->ID) );
?>
<div class="one-column margin-Left">
<div class="sub-title"><?php the_title(); ?></div>
<div class="bg1"><img src="<?php echo $pop_img[0]; ?>" alt="view" height="250px" width="280px"/></div>
</div>
<?php endwhile; ?>
</div>
<div class="pagebtn" align="center">
<?php pagination(); ?>
</div>
Submit an article or tip