demo-HTML-over-WebSockets-in-Django/apps/front/templates/partials/blog/all_articles.html

<div id="articles">
    {% for post in posts %}
    <article>
        <h2>{{ post.title }}</h2>
        <p>Author: {{ post.author }}</p>
        <p><button data-id="{{ post.id }}" class="btn">More</button></p>
        <hr>
    </article>
    {% endfor %}
</div>
<ul class="pagination">
      <li class="page-item{% if pag == 1 %} disabled{% endif %}">
            <a id="pag-previous" href="#">Previous</a>
      </li>
      <li class="page-item">
            <a id="pag-next" href="#">Next</a>
      </li>
</ul>

<script>

    // Open article
    buttons = document.querySelectorAll('.btn');

    buttons.forEach((button) => {
        button.addEventListener('click', event => {
            document.$CHAT_TEMPLATE = "partials/blog/single.html";
            document.$CHAT_SOCKET.send(JSON.stringify({
                selector: "#main",
                template: document.$CHAT_TEMPLATE,
                data: {
                    id: event.target.dataset.id
                }
            }))
        });
    });

    // Paginator
    pagPrevious = document.querySelector('#pag-previous');
    pagNext = document.querySelector('#pag-next');

    pagPrevious.addEventListener('click', (event) => {
        event.preventDefault();
        document.$CHAT_TEMPLATE = "partials/blog/all_articles.html";
        document.$CHAT_SOCKET.send(JSON.stringify({
            selector: "#main",
            template: document.$CHAT_TEMPLATE,
            data: {
                pag: {% if pag > 1 %}{{ pag }} - 1{% else %}1{% endif %}
            }
        }))
    });


    pagNext.addEventListener('click', (event) => {
        event.preventDefault();
        document.$CHAT_TEMPLATE = "partials/blog/all_articles.html";
        document.$CHAT_SOCKET.send(JSON.stringify({
            selector: "#main",
            template: document.$CHAT_TEMPLATE,
            data: {
                pag: {{ pag }} + 1
            }
        }))
    });



</script>