I have an scrollable table in one of my templates defined like this:
<script src="{% static 'js/jquery.waypoints.min.js' %}"></script>
<script src="{% static 'js/infinite.min.js' %}"></script>
<script>
var infinite = new Waypoint.Infinite({
element: $('.infinite-container')[0],
});
</script>
... more template ...
<div id="table-div" style="overflow: scroll; height: 500px;">
<table class="table" id="sale_orders" style="margin-top: 10px; font-size: 10px;">
<form class="container py-3" method="GET">
<thead>
<tr>
<th scope="col" class="order_header">Header 1</th>
<th scope="col" class="order_header">Header 2</th>
<th scope="col" class="order_header">Header 3</th>
<th scope="col" class="order_header">Header 4</th>
<th scope="col" class="order_header">Header 5</th>
<th scope="col" class="order_header">Header 6</th>
<th scope="col" class="order_header">Header 7</th>
<th scope="col" class="order_header">Header 8</th>
<th scope="col" class="order_header">Header 9</th>
<th scope="col" class="order_header">Header 10</th>
<th scope="col" class="order_header">Header 11</th>
<th scope="col" class="order_header">Header 12</th>
</tr>
</thead>
<tbody class="infinite-container">
{% for s in sales %}
<tr class="infinite-item">
<td scope="row"><span class="badge badge-info">{{s.number}}</span></td>
<td scope="row">{{s.client_name}}</td>
<td scope="row">{{s.comuna}}</td>
<td scope="row">{{s.get_total_weigth}}</td>
<td scope="row">{{s.get_total_cubic_cm}}</td>
<td scope="row">{{s.get_total_area}}</td>
<td scope="row">{{s.get_total_amount}}</td>
<td scope="row">{{s.get_total_items}}</td>
<td scope="row">{{s.product_fam}}</td>
<td scope="row">{{s.deliver_date|date:"d/m/Y"}}</td>
<td scope="row">
{% if s in loadedOrders %}
<a class="btn btn-danger update-cart" data-load="{{initLoad.id}}" data-order="{{s.id}}" data-action="remove">
<i class="fa fa-download" aria-hidden="true"></i>
</a>
{% else %}
<a class="btn btn-success update-cart" data-load="{{initLoad.id}}" data-order="{{s.id}}" data-action="add">
<i class="fa fa-upload" aria-hidden="true"></i>
</a>
{% endif %}
</td>
<td scope="row">
{% if s in loadedOrders %}
<a data-toggle="modal" data-target="#lines_info_{{s.id}}">
<input type="button" name="partial_selection" value="Selección parcial" id="button{{s.id}}" class="btn btn-warning">
</a>
{% else %}
<a data-toggle="modal" data-target="#lines_info_{{s.id}}">
<input type="button" name="partial_selection" value="Selección parcial" id="button{{s.id}}" class="btn btn-warning" disabled>
</a>
{% endif %}
</td>
</tr>
{% endfor %}
{% if sales.has_next %}
<tr>
<td scope="row" colspan="12" style="text-align: center;">
<a class="infinite-more-link" href="?page={{ sales.next_page_number }}">More</a>
</td>
</tr>
{% endif %}
</tbody>
</form>
</table>
</div>
... more template ...And my view is defined like this:
def optimizer(request, pk):
sids = []
settings = Setting.objects.get(pk=1)
trucks = Truck.objects.all()
for s in SaleOrder.objects.filter(delivered=False):
if s.get_total_items > 0:
sids.append(s.id)
sales = SaleOrder.objects.filter(pk__in=sids).order_by('-id')
lines = SaleOrderLine.objects.filter(delivered=False, order_id__in=sids)
min_load = settings.minimum_load_percentage
min_value = settings.minimum_total_amount
page = request.GET.get('page', 1)
paginator = Paginator(sales, 20)
try:
sales = paginator.page(page)
except PageNotAnInteger:
sales = paginator.page(1)
except EmptyPage:
sales = paginator.page(paginator.num_pages)
initLoad = Load.objects.get(pk=pk)
loadedOrders = initLoad.order_ids.all()
loadedLines = initLoad.line_ids.all()
if request.GET.get('selected_lines') and request.GET.get('truck_selector'):
lids = request.GET.getlist('selected_lines')
alllines = SaleOrderLine.objects.filter(pk__in=lids, order_id__in=loadedOrders)
for l in loadedLines:
if l not in alllines:
initLoad.line_ids.remove(l)
truck = Truck.objects.get(pk=request.GET.get('truck_selector'))
initLoad.truck_id = truck
initLoad.state = 'preview'
initLoad.save()
return redirect('optimizer', pk=initLoad.id)
data = {
'trucks': trucks,
'sales': sales,
'lines': lines,
'initLoad': initLoad,
'loadedOrders': loadedOrders,
'step': initLoad.state,
}
return render(request, 'optimizer/main_optimizer.html', data)
So, I followed the tutorial posted on here, but when I get to the table bottom, nothing happens.
I don't get why is not loading the rest of the data when I get to the 'waypoint'. Any suggestion or new solution for this it would be appreciated.
Thanks.
Try putting your var infinite = new Waypoint script after the html <tbody class="infinite-container">
Currrently, when it is called, the element of that class hasn't been created yet.