javascript - 如何在 django 中激活显示更多按钮并每页显示 3 个项目

Question

我正在尝试每页显示 3 个项目，如果用户按下show more按钮，它将加载更多 3 个项目

视图.py：

def home_page(request):
pcgamesforhome = PCgames.objects.all()
context = {'pcgamesforhome' : pcgamesforhome}
return render(request,'html_file/enterface.html',context=context)

html页面：

<div class="container">
<div class='row'>


{% for home_page in pcgamesforhome %}

     <div class='col-xs-12 col-sm-6 col-md-4 website-thumb'>
                
     <a href="{{ home_page.page_url }}">
              
     <img src="{{ home_page.get_image }}" class='image_control_for_home_page_pc_games'     alt=''> </a>
                
     <h3 class="font_control_for_home_page_pc_games_name"><a href="{{ home_page.page_url }}" style="color:black">{{ home_page.name }}</a></h3> </div>
{% endfor %}
</div>

<div class="text-center mt-4">                
   <a role="presentation" type="button" class="btn btn-secondary btn-lg loadMore" style="width:40%">Show More</a>
</div>


<script>
$(".row").slice(0, 3).show(); //showing 3 div

$(".loadMore").on("click",function(){
    $(".row:hidden").slice(0, 3).show(); //showing 3 hidden div on click

    if($(".row:hidden").length ==0)
    {
        $(".loadMore").fadeOut(); //this will hide
        //button when length is 0
    }
})
</script>

那么我的代码有什么问题，（我的 html 页面现在一次显示模型中的所有项目而不是 3）

标签： javascriptjquerydjangodjango-viewsdjango-templates