Как разбить несколько объектов на страницы по отдельности

Question

у меня есть 3 объекта подводных лодок, пост и мойВ любой момент времени один будет показан, а два других будут скрыты.Как я могу разбить на страницы все 3 отдельно?

Я видел подобные проблемы, где цепочка решила проблему.Тем не менее, в моем случае я не хочу объединять эти 3 вместе, чтобы я мог выбрать, какой из них отображать в моем HTML на основе кнопки.

мое представление на основе классов

class SubListView(ListView):
model = Post
template_name = 'store/sub_home.html' # <app>/<model>_<viewtype>.html
context_object_name = 'posts'
ordering = ['-date_posted']
paginate_by = 12

def get(self, request):
    if request.user.is_authenticated:
        paginate_by = 12
        post = Post.objects.all().order_by('-date_posted')
        users = User.objects.exclude(id=request.user.id)
        sub = Subscriber.objects.get(current_user=request.user)
        subs = sub.users.all()
        my_content = Post.objects.filter(author=request.user.id)
        args={
            'posts':post, 'users':users, 'subs':subs, 'mine':my_content
        }
        return render(request, self.template_name, args)
    else:
        post = Post.objects.all().order_by('-date_posted')
        paginate_by = 12
        args={
            'posts':post, 
        }           
        return render(request, self.template_name, args)

Это мой HTML:

{% extends "store/base.html" %}
{% block content %}
<div class="panel">
      <!-- <a href="{% url 'store-home'%}"> -->
        <button class="Active" id="random_link" onclick="show('random'); return true;">
        <img src="/static/store/random.gif" alt="">
        Random Finds
        </button>
      {% if user.is_authenticated %}

      <button id="subscription_link" onclick="show('subscription'); return true;">
      {% else %}
      <a href="{% url 'login' %}">
      {% endif %}
        <img src="/static/store/Subscription.gif" alt="">
        My Subscription
      </button>

      {% if user.is_authenticated %}
      <!-- <a  href="{% url 'user-posts' user.username %}"> -->
      <button id="content_link" onclick="show('content'); return true;">
      {% else %}
      <a href="{% url 'login' %}">
      {% endif %}
        <img src="/static/store/content.gif" alt="">
        My Content
      </button>
  </div>
  <p style="padding: 20px;"></p>
  <div style="padding-top: 20px;" id="main" >
<section class="text-center mb-4">
  <div class="row" id="random"> 
    {% for post in posts %}   
    {% include "store/card.html" %}
    {% endfor %}
  </div>
  <div class="row" id="subscription" style="display: none;">
    {% if not subs %}
    <h2>You have not subscribed to any course :/</h2>
    {% endif %} 
    {% for post in subs %}
    {% include "store/card.html" %}
    {% endfor %}
  </div>
  <div class="row" id="content" style="display: none;"> 
    {% if not mine %}
    <h2>You have not published anything :/</h2>
    {% endif %}   
    {% for post in mine %}
    {% include "store/card.html" %}
    {% endfor %}
  </div>
</section>
{% include "store/pagination.html" %}
</div>
{% endblock content %}

Это мой сценарий:

function show(z) {
var x = document.getElementById("random");
x.style.display = "none";
var x = document.getElementById("subscription");
x.style.display = "none";
var x = document.getElementById("content");
x.style.display = "none";
var x = document.getElementById(z);
x.style.display = "block";
var element = document.getElementById("random_link");
element.classList.remove("Active");
var element = document.getElementById("subscription_link");
element.classList.remove("Active");
var element = document.getElementById("content_link");
element.classList.remove("Active");
var element = document.getElementById(z+"_link");
element.classList.add("Active");
}