【问题标题】:Ajax pagination in wordpress with custom post type on archive.phpWordPress中的Ajax分页与archive.php上的自定义帖子类型
【发布时间】:2019-01-22 00:35:32
【问题描述】:

想知道是否有人可以提供帮助,因为这让我发疯了。我有一个包含新闻故事列表的存档页面。现在,这些新闻故事由 ajax 调用控制,以根据包含自定义分类法(在本例中为 3 个,主题、部门和技术)的下拉列表来填充和更改它们。无论如何,我遇到的问题是我无法在任何帖子上进行分页。我不,它与 ajax 调用及其调用的函数有关,但我无法让它工作。我已经设法让它显示分页数字,但是当我点击它们时,它会将我带到我的网址/wp-admin/wp-ajax.php,这显然是错误的。我没有这样做很长时间,所以任何帮助或指导都会有所帮助。

  var base = window.location.pathname + window.location.search;
  var technologies = document.querySelector('#category').value;
  var sectors = document.querySelector('#sectors').value;
  var topics = document.querySelector('#topics').value;
  var sort = document.querySelector('#sort').value;
  var type = window.location.pathname.split('/')[1];
  var ajaxurl = 'http://www.mywebsite.com/wp-admin/admin-ajax.php';

    jQuery.ajax({
        type: 'GET',
        url: ajaxurl,
        data: {
                "action": "load_news",
                tech: '*' ,
                sector: '*' ,
                topic: '*' ,
                sorting: sort,
                type:type,
                base:base
        },
        success: function(response) {
           jQuery(".news-slider").html(response);
           return false;
        }
    });

上面是我的 jquery ajax 调用,下面是 functions.php

                    add_action( 'wp_ajax_nopriv_load_news', 'prefix_load_term_news' );
                add_action( 'wp_ajax_load_news', 'prefix_load_term_news' );
                function prefix_load_term_news () {
                                $tech_id = $_GET[ 'tech' ];
                                $sector_id = $_GET[ 'sector' ];
                                $topic_id = $_GET[ 'topic' ];
                                $sort_filter = $_GET['sorting'];
                                $type = $_GET['type'];
                                $base = $_GET[ 'base' ];
                                $paged = ( get_query_var( 'paged' ) ) ? absint( get_query_var( 'paged' ) ) : 1;
                                $args = array (
                                                    'post_type' => $type,
                                                    'posts_per_page' =>2,
                                                    'paged' => $paged,
                                                    'order' => $sort_filter,
                                                    'tax_query' => array(
                                                        'relation' => 'OR',
                                                            array(
                                                                'taxonomy' => 'taxonomy-news',
                                                                'field'    => 'id',
                                                                'terms'    => $tech_id,
                                                            ),
                                                            array(
                                                                'taxonomy' => 'category',
                                                                'field'    => 'id',
                                                                'terms'    => $sector_id,
                                                            ),
                                                            array(
                                                                'taxonomy' => 'taxonomy-topics',
                                                                'field'    => 'id',
                                                                'terms'    => $topic_id,
                                                            ),
                                                    ),
                                             );
                        try {
                            $postslist = new WP_Query($args);

                            $big = 999999999; // This needs to be an unlikely integer
                        // For more options and info view the docs for paginate_links()
                        // http://codex.wordpress.org/Function_Reference/paginate_links
                        $paginate_links = paginate_links( array(
                            'base' => str_replace( $big, '%#%', get_pagenum_link($big) ),
                            'current' => max( 1, $postslist->get( 'paged' ) ),
                            'total' => $postslist->max_num_pages,
                        ) );
                        // Display the pagination if more than one page is found
                        if ( $paginate_links ) {
                            echo '<div class="pagination">';
                            echo $paginate_links;
                            echo '</div><!--// end .pagination -->';
                        }
                        }
                        catch (Exception $error) {
                            echo 'An error occurred while loading news posts. Please try again.';
                        }
                        ?>
                    <?php   if ( $postslist->have_posts() ) :
                            while ( $postslist->have_posts() ) : $postslist->the_post();
                                include('template-parts/content-archive-ajax.php');
                            endwhile;
                         wp_reset_postdata();
                 endif;
        }

【问题讨论】:

  • 基于这个when i click them it takes me to my web address/wp-admin/wp-ajax.php 我猜你应该在你的分页链接上点击event.preventDefault()return false

标签: php jquery ajax wordpress pagination


【解决方案1】:

如果您使用的是 ajax,则无需在 php 中打印任何内容,您只需将分页链接放在 php 变量中,然后您可以使用 json_encode() 将其发送回 javascript,因此您的函数必须变为类似这个:

function prefix_load_term_news() {

$pagerLinks = '';
$errors = false;

$tech_id = $_GET['tech'];
$sector_id = $_GET['sector'];
$topic_id = $_GET['topic'];
$sort_filter = $_GET['sorting'];
$type = $_GET['type'];
$base = $_GET['base'];
$paged = ( get_query_var('paged') ) ? absint(get_query_var('paged')) : 1;
$args = array(
    'post_type' => $type,
    'posts_per_page' => 2,
    'paged' => $paged,
    'order' => $sort_filter,
    'tax_query' => array(
        'relation' => 'OR',
        array(
            'taxonomy' => 'taxonomy-news',
            'field' => 'id',
            'terms' => $tech_id,
        ),
        array(
            'taxonomy' => 'category',
            'field' => 'id',
            'terms' => $sector_id,
        ),
        array(
            'taxonomy' => 'taxonomy-topics',
            'field' => 'id',
            'terms' => $topic_id,
        ),
    ),
);
try {
    $postslist = new WP_Query($args);

    $big = 999999999; // This needs to be an unlikely integer
    // For more options and info view the docs for paginate_links()
    // http://codex.wordpress.org/Function_Reference/paginate_links
    $paginate_links = paginate_links(array(
        'base' => str_replace($big, '%#%', get_pagenum_link($big)),
        'current' => max(1, $postslist->get('paged')),
        'total' => $postslist->max_num_pages,
            ));
    // Display the pagination if more than one page is found
    if ($paginate_links) {
        $pagerLinks .= '<div class="pagination">';
        $pagerLinks .= $paginate_links;
        $pagerLinks .= '</div><!--// end .pagination -->';
    }
} catch (Exception $error) {
    $errors = true;
}

echo json_encode(array('errors' => $errors,'pagination' => $pagerLinks));

}

当 javascript 尝试获取成功回调的响应时,Ajax 调用中的 PHP 输出会导致错误

【讨论】:

  • 感谢您的输入,我已尝试实施您上面的示例。我最终得到了这个结果 {"errors":false,"pagination":" 1\n2\n3\n4\nNext »"}0 并且如果我然后单击其中任何一个数字,则会出错,并且 url 成为来自 ajax 调用 website.com//wp-admin//… 的变量
【解决方案2】:

尝试用这种方式自己创建页面链接HTML。

function prefix_load_term_news() {
    $pager_data = (object) array('curr_url' => 'yourpage_url' );
    $pagerLinks = '';
    $errors = false;

    $tech_id = $_GET['tech'];
    $sector_id = $_GET['sector'];
    $topic_id = $_GET['topic'];
    $sort_filter = $_GET['sorting'];
    $type = $_GET['type'];
    $base = $_GET['base'];
    $paged = ( get_query_var('paged') ) ? absint(get_query_var('paged')) : 1;
    $args = array(
        'post_type' => $type,
        'posts_per_page' => 2,
        'paged' => $paged,
        'order' => $sort_filter,
        'tax_query' => array(
            'relation' => 'OR',
            array(
                'taxonomy' => 'taxonomy-news',
                'field' => 'id',
                'terms' => $tech_id,
            ),
            array(
                'taxonomy' => 'category',
                'field' => 'id',
                'terms' => $sector_id,
            ),
            array(
                'taxonomy' => 'taxonomy-topics',
                'field' => 'id',
                'terms' => $topic_id,
            ),
        ),
    );
    try {
        $postslist = new WP_Query($args);

        $big = 999999999; // This needs to be an unlikely integer
        // For more options and info view the docs for paginate_links()
        // http://codex.wordpress.org/Function_Reference/paginate_links
        $paginate_links = paginate_links(array(
            'base' => str_replace($big, '%#%', get_pagenum_link($big)),
            'current' => max(1, $postslist->get('paged')),
            'total' => $postslist->max_num_pages,
                ));

        $paginate_links = '<ul id="pagelinks">';

            if ($postslist->get('paged') > 1) {

               $paginate_links .= '<li id="first-page" class="page-numb"><a href="' . $pager_data->curr_url . '?pag='.($postslist->get('paged') - 1).'"><i class="fa fa-chevron-left"></i></a></li>';
             } 

            if ($pager_data->max_num_pages < 6) {

                for ($p = 1; $p <= $pager_data->max_num_pages; $p++) {
                    $is_active = '';
                    if ($p == $postslist->get('paged')) {
                        $is_active = 'active';
                    }
                    $paginate_links .= '<li class="page-numb ' . $is_active . '" data-page="' . $p . '"><a href="' . $pager_data->curr_url . '?pag=' . $p . '">' . $p . '</a></li>';
                }
            } else {
                if ($postslist->get('paged') > 2) {

                    $paginate_links .= '<li class="dots">...</li>'
                    . '<li class="page-numb"><a href="' . $pager_data->curr_url . '?pag=' . ($postslist->get('paged') - 1) . '">' . ($postslist->get('paged') - 1) . '</a></li>'
                    . '<li class="page-numb active" ><a href="' . $pager_data->curr_url . '?pag=' . $postslist->get('paged') . '">' . $postslist->get('paged') . '</a></li>'
                    . '<li class="page-numb" ><a href="' . $pager_data->curr_url . '?pag=' . ($postslist->get('paged') + 1) . '">' . ($postslist->get('paged') + 1) . '</a></li>'
                    . '<li class="dots">...</li>';
                } else {
                    for ($p = 1; $p <= 5; $p++) {
                        $is_active = '';
                        if ($p == $postslist->get('paged')) {
                            $is_active = 'active';
                        }
                        $paginate_links .= '<li class="page-numb ' . $is_active . '" ><a href="' . $pager_data->curr_url . '?pag=' . $p . '">' . $p . '</a></li>';
                    }
                    $paginate_links .= '<li class="dots">...</li>';
                }
            }

            if ($postslist->get('paged') < $pager_data->max_num_pages) {

                $paginate_links .= '<li id="last-page" class="page-numb"><a  href="'. $pager_data->curr_url .'?pag='. ($postslist->get('paged') + 1).'"><i class="fa fa-chevron-right"></i></a></li>';
                   } 
        $paginate_links .= '</ul>';

        // Display the pagination if more than one page is found
        if ($paginate_links) {
            $pagerLinks .= '<div class="pagination">';
            $pagerLinks .= $paginate_links;
            $pagerLinks .= '</div><!--// end .pagination -->';
        }
    } catch (Exception $error) {
        $errors = true;
    }

    echo json_encode(array('errors' => $errors,'pagination' => $pagerLinks));
}

代码只是一个示例,您必须在需要在 $pager_data->curr_url 中指示正确 URL 的地方更改它。链接中的页码是一个 GET var,我将其命名为“pag”,您可以将页码放入“数据”属性并编写一个 jQuery 函数来获取它并进行新的 ajax 调用以在页面之间切换

【讨论】:

    猜你喜欢
    • 1970-01-01
    • 2016-08-08
    • 2014-05-15
    • 2011-03-20
    • 2014-05-21
    • 2016-11-07
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    相关资源
    最近更新 更多