How do I add Pagination to a table (Django) - python-3.x

Question

I am trying to add pagination to one of the tables for my project, but I can't find any good resources to refer to, all of the docs use some kind of URL query, but I don't want to do that, since it is on the user page.
Background --- I am making a mock website for trading for a project and I need the user to be able to see their trade history, and as you can imagine, after any more than 10, the page starts to look very long, so I am trying to find a way to make the table have pages, but I just can't figure it out.
Aim -- To add pages to a bootstrap table. The table should be able to go back and forth using buttons.
My "solution" - after going through stuff for about an hour, I found this but I don't know if it is good/safe.
Code :
VIEW -
def userPage(request):
user = request.user
user_info = user.info
trades = user_info.trade_set.all().order_by('-time_bought_at') ###I want this queryset to be paginated
total_trades = trades.count()
balance = round(user_info.balance)
context = {
"user" : user,
"user_info" : user_info,
"trades" : trades,
"total_trades" : total_trades,
"balance" : balance,
}
return render(request, "accounts/user.html", context)
I render it as :
this is the table that I want to paginate :)
<div class="row">
<div class="card card-body">
<table class="table table-sm">
<tr>
<th>Stock</th>
<th>Action</th>
<th>Price</th>
<th>No. of Stocks</th>
<th>Total Cost of Trade</th>
<th>Time of Purchase</th>
<th>Balance</th>
</tr>
{% for trade in trades %}
<tr>
<td>{{trade.ticker}}</td>
<td>{{trade.action}}</td>
<td>{{trade.price_trade_at}}</td>
<td>{{trade.stocks_bought}}</td>
<td>{{trade.cost_of_trade}}</td>
<td>{{trade.time_bought_at}}</td>
<td>{{trade.balance_of_trader_after_purchase}}</td>
</tr>
{% endfor %}
</table>
</div>
</div>
</div>
Please point me in the correct direction, I got no clue.

Answer 1

Try using ajax to serve your table
def userPage(request):
user = request.user
user_info = user.info
trades = user_info.trade_set.all()
total_trades = trades.count()
balance = round(user_info.balance)
context = {
"user" : user,
"user_info" : user_info,
"total_trades" : total_trades,
"balance" : balance,
}
return render(request, "accounts/user.html", context)
class TradesListView(ListView):
template_name = 'mytemplate.html'
ordering = '-time_bought_at'
paginate_by = 10
def get_queryset(self):
user_info = self.request.user.info
self.queryset = user_info.trade_set.all()
return super().get_queryset()
In the templates:-
In the template for the trades list view:-
<div class="card card-body">
<table class="table table-sm">
<tr>
<th>Stock</th>
<th>Action</th>
<th>Price</th>
<th>No. of Stocks</th>
<th>Total Cost of Trade</th>
<th>Time of Purchase</th>
<th>Balance</th>
</tr>
{% for trade in page_obj %}
<tr>
<td>{{trade.ticker}}</td>
<td>{{trade.action}}</td>
<td>{{trade.price_trade_at}}</td>
<td>{{trade.stocks_bought}}</td>
<td>{{trade.cost_of_trade}}</td>
<td>{{trade.time_bought_at}}</td>
<td>{{trade.balance_of_trader_after_purchase}}</td>
</tr>
{% endfor %}
</table>
</div>
<div class="pagination">
<span class="step-links">
{% if page_obj.has_previous %}
<button class="page-change-btn" data-url="{% url 'trades-list-view-name' %}?page=1">« first</button>
<button class="page-change-btn" data-url="{% url 'trades-list-view-name' %}?page={{ page_obj.previous_page_number }}">previous</button>
{% endif %}
<span class="current">
Page {{ page_obj.number }} of {{ page_obj.paginator.num_pages }}.
</span>
{% if page_obj.has_next %}
<button class="page-change-btn" data-url="{% url 'trades-list-view-name' %}?page={{ page_obj.next_page_number }}">next</button>
<button class="page-change-btn" data-url="{% url 'trades-list-view-name' %}?page={{ page_obj.paginator.num_pages }}">last »</button>
{% endif %}
</span>
</div>
In the template for the userPage:-
<div class="row" id="trades-table-container" data-url="{% url 'trades-list-view-name' %}">
</div>
Now use some javascript to perform ajax and use the url in the data-url of above div and fill the content of response into the div.
Also add javascript on the page-change-btn class in similar fashion