尝试让我的一些表与 Ajax pagination 一起使用 实际上创建了一个干净的空模板，只有一张表。仅用于测试。
{% extends 'base.html' %}
{% load static %}
{% block title %}
TEST Skaters averages - NHL stats tracker
{% endblock title %}
{% block styles %}
<link rel="stylesheet" href="{% static 'players/tablesorter.css' %}">
{% endblock styles %}
{% block content %}
<!-- SKATERS -->
<table class="tablesorter">
<thead>
<tr class="tablesorter-ignoreRow">
<td class="pager" colspan="5">
<button type="button" class="btn first"><i class="small material-icons">first_page</i></button>
<button type="button" class="btn prev"><i class="small material-icons">navigate_before</i></button>
<span class="pagedisplay"></span>
<button type="button" class="btn next"><i class="small material-icons white">navigate_next</i></button>
<button type="button" class="btn last"><i class="small material-icons">last_page</i></button>
<select class="pagesize">
<option value="25">25</option>
</select>
</td>
</tr>
<tr>
<th>1</th>
<th>2</th>
<th>3</th>
</thead>
<tbody>
</tbody>
</table>
{% endblock content %}
{% block scripts %}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.tablesorter/2.31.1/js/jquery.tablesorter.js"></script>
<!-- Widgets -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.tablesorter/2.31.1/js/jquery.tablesorter.widgets.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.tablesorter/2.31.1/js/extras/jquery.tablesorter.pager.min.js"></script>
<script src="{% static 'players/sorting_averages.js' %}"></script>
{% endblock scripts %}
sorting_averages.js
$("table")
.tablesorter({
});
.tablesorterPager({
container: $(".pager"),
ajaxUrl: 'http://127.0.0.1:8000/skaters_averages_json/{page}',
});
在players.views中，我正在为每个页面使用JSON数据制作切片。
def skaters_averages_json(request, page):
start = utils.PAGE_SIZE_2*(page - 1)
end = start + utils.PAGE_SIZE_2
skaters = Skater.objects.select_related('team')
one_page_slice = skaters.order_by('-points', 'games', '-goals')[start:end]
skaters_json = json.loads(serializers.serialize('json', one_page_slice))
data = {}
data["total_rows"] = utils.PAGE_SIZE_2
data["headers"] = ["ID", "Name", "Points"]
data["rows"] = []
for index, skater in enumerate(skaters_json):
data["rows"].append({})
data["rows"][index][data["headers"][0]] = skater['fields']['nhl_id']
data["rows"][index][data["headers"][1]] = skater['fields']['name']
data["rows"][index][data["headers"][2]] = skater['fields']['points']
return JsonResponse(data, safe=False)
url.py
urlpatterns = [
path('skaters_averages_json/<int:page>', views.skaters_averages_json,
name='skaters_averages_json'),
]
例如，127.0.0.1:8000/skaters_averages_json/1 显示此 JSON 输出
{
"total_rows":25,
"headers":[
"ID",
"Name",
"Points"
],
"rows":[
{
"ID":8476453,
"Name":"Nikita Kucherov",
"Points":128
},
{
"ID":8478402,
"Name":"Connor McDavid",
"Points":116
},
{
"ID":8474141,
"Name":"Patrick Kane",
"Points":110
},
{
"ID":8477934,
"Name":"Leon Draisaitl",
"Points":105
},
{
"ID":8473419,
"Name":"Brad Marchand",
"Points":100
},
{
"ID":8471675,
"Name":"Sidney Crosby",
"Points":100
},
{
"ID":8477492,
"Name":"Nathan MacKinnon",
"Points":99
},
{
"ID":8476346,
"Name":"Johnny Gaudreau",
"Points":99
},
{
"ID":8474564,
"Name":"Steven Stamkos",
"Points":98
},
{
"ID":8477493,
"Name":"Aleksander Barkov",
"Points":96
},
{
"ID":8478483,
"Name":"Mitchell Marner",
"Points":94
},
{
"ID":8478010,
"Name":"Brayden Point",
"Points":92
},
{
"ID":8476456,
"Name":"Jonathan Huberdeau",
"Points":92
},
{
"ID":8471218,
"Name":"Blake Wheeler",
"Points":91
},
{
"ID":8471214,
"Name":"Alex Ovechkin",
"Points":89
},
{
"ID":8475166,
"Name":"John Tavares",
"Points":88
},
{
"ID":8478420,
"Name":"Mikko Rantanen",
"Points":87
},
{
"ID":8478550,
"Name":"Artemi Panarin",
"Points":87
},
{
"ID":8473512,
"Name":"Claude Giroux",
"Points":85
},
{
"ID":8476460,
"Name":"Mark Scheifele",
"Points":84
},
{
"ID":8478427,
"Name":"Sebastian Aho",
"Points":83
},
{
"ID":8470613,
"Name":"Brent Burns",
"Points":83
},
{
"ID":8478403,
"Name":"Jack Eichel",
"Points":82
},
{
"ID":8477497,
"Name":"Sean Monahan",
"Points":82
},
{
"ID":8473548,
"Name":"Phil Kessel",
"Points":82
}
]
}
正如我在上面链接的文档中读到的，现在 ajaxProcessing 不是必需的
OBJECT returned
In v2.11, the ajaxProcessing can just return the above object directly (or don't even bother setting an ajaxProcessing function). So, if an object is returned by the ajaxProcessing function, the data is stored in table.config.pager.ajaxData
在我看来，我误解了如何在 .tablesorterPager 中传递页码参数。尝试了几种不同的方法。现在，我希望表格显示初始加载时的第一页。然后使用 AJAX 来回分页。现在它只加载表的标题。不是来自 JSON 的 header 。
最佳答案
在这种情况下，您需要包含 ajaxProcessing function .
如果您想完全省略 ajaxProcessing 函数，那么服务器期望的 JSON 应该如下所示(当然 JSON 中不允许注释):
{
total: 100,
filteredRows: 100, // needed if using the filter widget
headers: [...], // optional
rows: [...]
}
或者这个
[
100, // total
[
[ "row1cell1", "row1cell2", ... "row1cellN" ],
[ "row2cell1", "row2cell2", ... "row2cellN" ],
...
[ "rowNcell1", "rowNcell2", ... "rowNcellN" ]
],
[ "header1", "header2", ... "headerN" ] // optional
]
关于javascript - Tablesorter AJAX 分页。如何与后端 JSON 正确交互？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/56792959/