badblocks/pkmntrade.club
1
1
Fork 0
Code Issues 14 Pull requests Projects 1 Releases Packages Wiki Activity

Fix pagination for trade offer lists

Browse source
This commit is contained in:
badblocks 2025-03-13 21:03:41 -07:00
parent 3df4b41750
commit b20ca8a888
5 changed files with 233 additions and 147 deletions
Download patch file Download diff file Expand all files Collapse all files

59
theme/templates/trades/trade_offer_all_list.html
View file

@ -25,24 +25,47 @@
<!-- Trade Offers -->
<section class="mb-12">
<h2 class="text-2xl font-bold mb-4">All Trade Offers</h2>
{% if all_trade_offers_paginated.object_list %}
{% include "trades/_trade_offer_list.html" with offers=all_trade_offers_paginated %}
<div class="flex justify-between items-center mt-4">
{% if all_trade_offers_paginated.has_previous %}
<a href="?{% for key, value in request.GET.items %}{% if key != 'offers_page' %}{{ key }}={{ value }}&{% endif %}{% endfor %}offers_page={{ all_trade_offers_paginated.previous_page_number }}" class="btn btn-sm">Previous</a>
{% else %}
<span></span>
{% endif %}
<span>Page {{ all_trade_offers_paginated.number }} of {{ all_trade_offers_paginated.paginator.num_pages }}</span>
{% if all_trade_offers_paginated.has_next %}
<a href="?{% for key, value in request.GET.items %}{% if key != 'offers_page' %}{{ key }}={{ value }}&{% endif %}{% endfor %}offers_page={{ all_trade_offers_paginated.next_page_number }}" class="btn btn-sm">Next</a>
{% else %}
<span></span>
{% endif %}
</div>
{% else %}
<p>No trade offers found.</p>
{% endif %}
<div
id="all-trade-offers"
x-data="tradeOffersPagination('{% url 'trade_offer_list' %}?')"
x-init="init()"
>
{% include "trades/_trade_offer_list_paginated.html" with offers=all_trade_offers_paginated %}
</div>
</section>
</div>
<script>
function tradeOffersPagination(baseUrl) {
return {
baseUrl: baseUrl,
loadPage(page) {
let url = new URL(this.baseUrl, window.location.origin);
url.searchParams.set("page", page);
this.$el.innerHTML = '<div class="flex justify-center items-center w-full mt-10"><span class="loading loading-dots loading-xl"></span></div>';
fetch(url, {
headers: {
'X-Requested-With': 'XMLHttpRequest'
}
})
.then(response => response.text())
.then(html => {
this.$el.innerHTML = html;
// Reinitialize the click events after injecting the new fragment.
this.init();
});
},
init() {
// Bind click events for AJAX pagination links within this component.
this.$el.querySelectorAll("a.ajax-page-link").forEach(link => {
link.addEventListener("click", (event) => {
event.preventDefault();
const page = link.getAttribute("data-page");
this.loadPage(page);
});
});
}
}
}
</script>
{% endblock content %}