WordPress 07-分页(下)

分页场景一

例如,查询cat分类下的文章,可在wp_query查询函数中设置,

 $args = array(
            'category__in' => $query_id,
            'orderby' => 'meta_value_num',
            'meta_key' => 'num',
            'order' => 'asc',
            'posts_per_page'=>12,
            'paged'=> $GLOBALS['paged']
        );
    $wp_query = new WP_Query($args);

site.com/category/catsite.com/category/cat/page/2site.com/category/cat/page/3,通过url就能请求对应页的文章数据。

分页场景二

像上文所说,如果是一个自定义查询内容的页面,就无法通过WordPress默认的函数,使得/page/2请求页面存在。
比如:

image

页面中展示的是自定义请求的一个或多个tag的文章,此时通过js交互查询的方法可见(tag落地页--通过ajax-post请求数据
),那么如何实现分页效果?

同样的需要post请求,直接将分页结果返回进行展示,操作基本与ajax讲解的文章类似,但是此时的分页触发需要单独去写,大致思路如下:


image
  • 点击某num,请求展示该页查询结果文章
  • 点击上一页、下一页可以进行num增减查询
  • 当num为1时,“上一页”不可点击
  • num>最大页数max时,“下一页”不可点击
  • 注意展示页码num,在1-max范围内,随着点击,动态切换当前激活的页面在中间位置
    image

-- low版实现代码如下:

// php查询处理:
// 在tagQuery post请求处理回调函数中:为js传来的page
$page = $_POST['page']; 

     $tagQur = array(
            'tag' => $quyStr,
            'orderby' => 'modified',
            'order' => 'DESC',
            'posts_per_page'=> 12,
            'paged'=> $page
        );
    $wp_query = new WP_Query($tagQur);
    $max_page = $wp_query->max_num_pages; // 最大页数

上述请求的就是指定查询下的指定page的数据。

那界面UI需要,点击传递要查询的page值:

function pageSet($page,$max_page){
    $prev_num = $page -1;
    $next_num = $page +1;

    $page_num='';
    if($prev_num > 0){
        $page_num.= "";
    }else{
        $page_num.= "";
    }

    if($max_page>1){
        if($max_page<=5){
            for ($i = 1; $i <= $max_page; $i++) {
                if($page == $i){
                    $page_num.= "".$i." ";
                }else{
                    $page_num.= "".$i." ";
                }

            }
        }elseif($max_page>5){
            if($page>3){
                $page_one = $page-2;
                $page_two = $page-1;
                $page_four = $page+1;
                $page_five = $page+2;
                $page_num.= "".$page_one." ";
                $page_num.= "".$page_two." ";
                $page_num.= "".$page." ";
                $page_four <= $max_page && $page_num.= "".$page_four." ";
                $page_five<= $max_page && $page_num.= "".$page_five." ";
            }else{
                for ($i = 1; $i <= 5; $i++) {
                    if($page == $i){
                        $page_num.= "".$i." ";
                    }else{
                        $page_num.= "".$i." ";
                    }
                }
            }
        }
        if($next_num <= $max_page){
            $page_num.= "";
        }else{
            $page_num.= "";
        }

        echo '
'.$page_num.'
'; } }
// js点击事件处理,操控page值
 // 查询指定page页数据
  function changePage(num){
    queryTag(queryTagParam,num);
  }

你可能感兴趣的:(WordPress 07-分页(下))