我正在尝试构建一个功能,访问者可以选择每页显示的帖子数量,如下所示:
我从哪里开始,如何实现这一目标?我目前正在使用query_post列出所有帖子:
<?php
$paged = 1;
query_posts(array( 'showposts'=> 10, 'post_type' => 'post', 'category_name' => 'jobseeker-announcements', 'order' => 'DESC', 'posts_per_page' => 10, 'paged' => get_query_var('paged'))); ?>
<?php while (have_posts()) : the_post(); ?>
<div class="post-list">
<h3><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></h3>
<p class="datetime"><span>Date Posted:</span> <?php the_time('m/j/Y'); ?></p>
<p><?php the_excerpt(); ?></p>
<!--/post-list--></div>
<?php endwhile; ?>
答案 0 :(得分:2)
使用jquery change
函数。
<?php
if(isset($_GET['pageVal'])){
$showposts = esc_sql($_GET['pageVal']);
}else{
$showposts = 10;
}
$paged = 1;
query_posts(array( 'showposts'=> $showposts, 'post_type' => 'post', 'category_name' => 'jobseeker-announcements', 'order' => 'DESC', 'posts_per_page' => $posts_per_page, 'paged' => get_query_var('paged'))); ?>
<?php while (have_posts()) : the_post(); ?>
<div class="post-list">
<h3><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></h3>
<p class="datetime"><span>Date Posted:</span> <?php the_time('m/j/Y'); ?></p>
<p><?php the_excerpt(); ?></p>
<!--/post-list--></div>
<?php endwhile; ?>
<select class='page-select'>
<option value='10'>10</option>
<option value='10'>20</option>
<option value='10'>30</option>
</select>
<script>
jQuery.ready(function(){
$('.page-select').change(function(){
$(location).attr('href', window.location.href+'?pageVal='+$('.page-select').val());
});
});
</script>
答案 1 :(得分:0)
可能是您解决方案的完美代码。
<?php
if(isset($_GET['page'])){
$posts_per_page = esc_sql($_GET['page']);
} else {
$posts_per_page = 10;
}
$paged = ( get_query_var( 'paged')) ? get_query_var( 'paged') : 1;
query_posts(
array(
'post_type' => 'post',
'category_name' => 'jobseeker-announcements',
'order' => 'DESC',
'posts_per_page' => $posts_per_page,
'paged' => get_query_var('paged')));
while (have_posts()) : the_post(); ?>
<div class="post-list">
<h3><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></h3>
<p class="datetime"><span>Date Posted:</span> <?php the_time('m/j/Y'); ?></p>
<p><?php the_excerpt(); ?></p>
</div>
<?php endwhile; ?>
<select class="page-select">
<option value="10">10</option>
<option value="20">20</option>
<option value="20">30</option>
</select>
<script>
jQuery.ready(function(){
$('.page-select').change(function(){
var checkIndex = window.location.href.indexOf('?');
if( checkIndex > -1 ){
var Link = window.location.href.substr(0, checkIndex-1);
$(location).attr('href', Link+'?page='+$('.page-select').val());
} else {
$(location).attr('href', window.location.href+'?page='+$('.page-select').val());
}
});
});
</script>