How to add Ajax to this Pagination i made?

IT技术

更新时间：2025-01-0810

admin管理员组
文章数量:1122846

This is my functions file

add_action( 'wp_ajax_homekong_pagination', 'homekong_pagination' );
add_action( 'wp_ajax_nopriv_homekong_pagination', 'homekong_pagination' ); 
function homekong_pagination($pages = '', $range = 2)
{
$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='paginations'>";
        echo "<nav class='page-navigation'>";
            echo "<ul id='pagination' class='pagination'>";
                    if($paged > 2 && $paged > $range+1 && $showitems < $pages)
                        echo "<li class='page-item'><a aria-current='page' class='page-numbers page-link prev' href='".get_pagenum_link(1)."'>PREVIOUS</a></li>";
                        if($paged > 1 && $showitems < $pages)
                            echo "<li class='page-item'><a class='page-numbers page-link' href='".get_pagenum_link($paged - 1)."'><span class='dashicons dashicons-arrow-left-alt'></span></a></li>";
                        for ($i=1; $i <= $pages; $i++)
                        {
                            if (1 != $pages &&( !($i >= $paged+$range+1 || $i <= $paged-$range-1) || $pages <= $showitems ))
                                {
                                    echo ($paged == $i)? "<li class='page-item'><a class='page-numbers page-link current'>".$i."</a></li>" : "<li class='page-item'><a class='page-numbers page-link' href='".get_pagenum_link($i)."'>".$i."</a></li>";
                                }
                        }
                        if ($paged < $pages && $showitems < $pages)
                            echo "<li class='page-item'><a class='page-numbers page-link' href='" .get_pagenum_link($paged + 1)."'><span class='dashincon dashicons-arrow-right-alt'></span></a></li>";
                if ($paged < $pages-1 &&  $paged+$range-1 < $pages && $showitems < $pages)
                    echo "<li class='page-item'><a class='next page-numbers page-link' href='".get_pagenum_link($pages)."'>NEXT</a></li>";
                echo "</ul>";
            echo "</nav>";
        echo "</div>";
}
exit();
}

This is my front end code where i would like changes to happen.


<div id="blogs" class="blog-items">
    <div class="row">
        <?php
                        // args
                        $paged = get_query_var('paged') ? get_query_var('paged') : 1;
                        $args = array(
                        'order_by' => 'publish_date',
                        'order' => 'desc',
                        'post_type' => 'blogs',
                        'paged' => $paged,
                        );
                        // get results
                        $the_query = new WP_Query( $args );
                        // The Loop
                        ?>
        <?php if( $the_query->have_posts() ): ?>
        <?php $counter = 0;?>
        <?php while ( $the_query->have_posts() ) : $the_query->the_post(); ?>
        <div class="col-lg-6">
            <div class="blog-item">
                <div class="img-thumb">
                    <?php the_post_thumbnail();?>
                </div>
                <div class="blog-text">
                    <div class="blog-cat">
                        <label for="">
                            <?php echo blog_categories_terms($post->ID, 'blog-category');?>
                        </label>
                    </div>
                    <a href="
                        <?php the_permalink();?>">
                        <h3 class="blog-title">
                            <?php the_title();?>
                        </h3>
                    </a>
                    <div class="blog-date">
                        <?php echo get_the_date();?>
                    </div>
                </div>
            </div>
        </div>
        <?php endwhile; ?>
        <?php endif; ?>
        <?php wp_reset_query();  // Restore global post data stomped by the_post(). ?>
        <!-- end row  -->
    </div>
    <!-- end blog items  -->

How do i add ajax to the pagination? I can;t figure a way out to do it

This is my functions file

add_action( 'wp_ajax_homekong_pagination', 'homekong_pagination' );
add_action( 'wp_ajax_nopriv_homekong_pagination', 'homekong_pagination' ); 
function homekong_pagination($pages = '', $range = 2)
{
$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='paginations'>";
        echo "<nav class='page-navigation'>";
            echo "<ul id='pagination' class='pagination'>";
                    if($paged > 2 && $paged > $range+1 && $showitems < $pages)
                        echo "<li class='page-item'><a aria-current='page' class='page-numbers page-link prev' href='".get_pagenum_link(1)."'>PREVIOUS</a></li>";
                        if($paged > 1 && $showitems < $pages)
                            echo "<li class='page-item'><a class='page-numbers page-link' href='".get_pagenum_link($paged - 1)."'><span class='dashicons dashicons-arrow-left-alt'></span></a></li>";
                        for ($i=1; $i <= $pages; $i++)
                        {
                            if (1 != $pages &&( !($i >= $paged+$range+1 || $i <= $paged-$range-1) || $pages <= $showitems ))
                                {
                                    echo ($paged == $i)? "<li class='page-item'><a class='page-numbers page-link current'>".$i."</a></li>" : "<li class='page-item'><a class='page-numbers page-link' href='".get_pagenum_link($i)."'>".$i."</a></li>";
                                }
                        }
                        if ($paged < $pages && $showitems < $pages)
                            echo "<li class='page-item'><a class='page-numbers page-link' href='" .get_pagenum_link($paged + 1)."'><span class='dashincon dashicons-arrow-right-alt'></span></a></li>";
                if ($paged < $pages-1 &&  $paged+$range-1 < $pages && $showitems < $pages)
                    echo "<li class='page-item'><a class='next page-numbers page-link' href='".get_pagenum_link($pages)."'>NEXT</a></li>";
                echo "</ul>";
            echo "</nav>";
        echo "</div>";
}
exit();
}

This is my front end code where i would like changes to happen.


<div id="blogs" class="blog-items">
    <div class="row">
        <?php
                        // args
                        $paged = get_query_var('paged') ? get_query_var('paged') : 1;
                        $args = array(
                        'order_by' => 'publish_date',
                        'order' => 'desc',
                        'post_type' => 'blogs',
                        'paged' => $paged,
                        );
                        // get results
                        $the_query = new WP_Query( $args );
                        // The Loop
                        ?>
        <?php if( $the_query->have_posts() ): ?>
        <?php $counter = 0;?>
        <?php while ( $the_query->have_posts() ) : $the_query->the_post(); ?>
        <div class="col-lg-6">
            <div class="blog-item">
                <div class="img-thumb">
                    <?php the_post_thumbnail();?>
                </div>
                <div class="blog-text">
                    <div class="blog-cat">
                        <label for="">
                            <?php echo blog_categories_terms($post->ID, 'blog-category');?>
                        </label>
                    </div>
                    <a href="
                        <?php the_permalink();?>">
                        <h3 class="blog-title">
                            <?php the_title();?>
                        </h3>
                    </a>
                    <div class="blog-date">
                        <?php echo get_the_date();?>
                    </div>
                </div>
            </div>
        </div>
        <?php endwhile; ?>
        <?php endif; ?>
        <?php wp_reset_query();  // Restore global post data stomped by the_post(). ?>
        <!-- end row  -->
    </div>
    <!-- end blog items  -->

How do i add ajax to the pagination? I can;t figure a way out to do it

Share Improve this question edited Sep 13, 2019 at 8:51 fuxia♦ 107k38 gold badges255 silver badges459 bronze badges asked Sep 13, 2019 at 8:25 MaddoxSt 138 bronze badges

Add a comment |

1 Answer 1

Sorted by: Reset to default 0

To do this, you just need to make one ajax request in javascript.

Here is a step-by-step solution.

Add click handler in javascript
When click send ajax request to pagination page
Replace an element with ".blog-items" selector on current page from a new page

jQuery(document.body).on('click', '#pagination a', function (event) {
   var linkElement = jQuery(event.currentTarget);

   jQuery.ajax(linkElement.attr('href')).done(function (newPageHTML) {

      jQuery('.blog-items').replaceWith(
          jQuery(newPageHTML).find('.blog-items')
      );

});

本文标签： How to add Ajax to this Pagination i made

版权声明：本文标题：How to add Ajax to this Pagination i made? 内容由网友自发贡献，该文观点仅代表作者本人，转载请联系作者并注明出处：http://www.betaflare.com/web/1736289549a1928328.html，本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。

编程频道|软件玩家 - 软件改变生活！

How to add Ajax to this Pagination i made?

1 Answer 1

更多相关文章