Click here to Skip to main content
14,836,169 members
Please Sign up or sign in to vote.
0.00/5 (No votes)
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)."'>&laquo; First</a>";
if($paged > 1 && $showitems < $pages) echo "<a href='".get_pagenum_link($paged - 1)."'>&lsaquo; 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 &rsaquo;</a>";
if ($paged < $pages-1 && $paged+$range-1 < $pages && $showitems < $pages) echo "<a href='".get_pagenum_link($pages)."'>Last &raquo;</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>
Posted

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

  Print Answers RSS
Top Experts
Last 24hrsThis month



CodeProject, 20 Bay Street, 11th Floor Toronto, Ontario, Canada M5J 2N8 +1 (416) 849-8900