javascript - 添加 "more"按钮

Question

我正在尝试添加一个“加载更多”按钮并限制下面的结果，这样投资组合页面中就不会同时加载 1000 个内容，如下所示:http://typesetdesign.com/portfolio/

我对 PHP 的了解不是很好，所以我不确定我应该做什么。我知道我可以限制这里的项目:

<?php query_posts( 'post_type=project&posts_per_page=200' );

但是如果我限制了结果，我将如何加载更多内容？

这是整个页面的页面编码:

<div id="projects" class="clearfix">        

<?php $page_skills = get_post_meta($post->ID, "_ttrust_page_skills", true); ?>

<?php if ($page_skills) : // if there are a limited number of skills set ?>
    <?php $skill_slugs = ""; $skills = explode(",", $page_skills); ?>

    <?php if (sizeof($skills) > 1) : // if there is more than one skill, show the filter nav?>  
        <ul id="filterNav" class="clearfix">
            <li class="allBtn"><a href="#" data-filter="*" class="selected"><?php _e('All', 'themetrust'); ?></a></li>

            <?php
            $j=1;                     
            foreach ($skills as $skill) {               
                $skill = get_term_by( 'slug', trim(htmlentities($skill)), 'skill');
                if($skill) {
                    $skill_slug = $skill->slug;             

                    $skill_slugs .= $skill_slug . ",";
                    $a = '<li><a href="#" data-filter=".'.$skill_slug.'">';
                    $a .= $skill->name;                 
                    $a .= '</a></li>';
                    echo $a;
                    echo "\n";
                    $j++;
                }         
            }?>
        </ul>
        <?php $skill_slugs = substr($skill_slugs, 0, strlen($skill_slugs)-1); ?>
    <?php else: ?>
        <?php $skill = $skills[0]; ?>
        <?php $s = get_term_by( 'name', trim(htmlentities($skill)), 'skill'); ?>
        <?php if($s) { $skill_slugs = $s->slug; } ?>
    <?php endif;        

    $temp_post = $post;
    $args = array(
        'ignore_sticky_posts' => 1,
        'posts_per_page' => 200,
        'post_type' => 'project',
        'skill' => $skill_slugs
    );
    $projects = new WP_Query( $args );      

else : // if not, use all the skills ?>

    <ul id="filterNav" class="clearfix">
        <li class="allBtn"><a href="#" data-filter="*" class="selected"><?php _e('All', 'themetrust'); ?></a></li>
        <?php $j=1;
        $skills = get_terms('skill');
        foreach ($skills as $skill) {
            $a = '<li><a href="#" data-filter=".'.$skill->slug.'">';
            $a .= $skill->name;                 
            $a .= '</a></li>';
            echo $a;
            echo "\n";
            $j++;
        }?>
    </ul>
    <?php
    $temp_post = $post;
    $args = array(
        'ignore_sticky_posts' => 1,
        'posts_per_page' => 200,
        'post_type' => 'project'            
    );
    $projects = new WP_Query( $args );

endif; ?>

<div class="thumbs masonry">            
<?php  while ($projects->have_posts()) : $projects->the_post(); ?>

    <?php
    global $p;              
    $p = "";
    $skills = get_the_terms( $post->ID, 'skill');
    if ($skills) {
       foreach ($skills as $skill) {                
          $p .= $skill->slug . " ";                     
       }
    }
    ?>      
    <?php get_template_part( 'part-project-thumb'); ?>      

<?php endwhile; ?>
<?php $post = $temp_post; ?>
</div>

非常感谢，任何输入都是有帮助的!

Answer 1

编辑
使用具有分页引导样式的表格 http://datatables.net/examples/basic_init/multiple_tables.html

海量分页数据库看这里:https://stackoverflow.com/a/3707457/2293454

我没有看到你的网站，现在我看到了，你可能需要的是这样的:
https://stackoverflow.com/a/21408418/2293454
正如您所看到的，该示例有一个限制器 iMyLoadLimit = 5，因此，当用户向下滚动页面时，它将根据获取的数据总数加载更多内容，如果您加载 100 篇文章或 1000 篇文章，它们将除以java 中的限制器，结果将是每次用户向下滚动时，它都会显示下一个 5 或您想要显示的任何数字...

希望对您有所帮助...