Javascript 表排序器AJAX分页。如何与后端JSON正确交互？

试着让我的一些桌子能用 实际上，只使用一个表创建了一个干净的空模板。只是为了测试

{% 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 %}

在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'),
]

正如我在上面链接的文档中所读到的，现在ajaxProcessing是不必要的

返回的对象

在v2.11中，ajaxProcessing可以直接返回上述对象 或者甚至不用设置ajaxProcessing函数。 因此，如果ajaxProcessing函数返回一个对象，那么数据 存储在table.config.pager.ajaxData中

---

在我看来，我误解了如何在.tableSorterPage中传递页码参数。尝试了几种不同的方法。现在，我希望表格显示初始加载的第一页。然后使用AJAX来回分页。现在它只加载表的标题。不是来自JSON的头。

在这种情况下，您需要包含一个

如果您想完全省去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
]

---

@莫蒂给出了一个很好的回答。我想在我的代码中添加一些错误的东西

在我的players.views中，我不希望得到参数“page”的值=0。 我忘记了tablesorter的行索引从0开始。然后，当pager使用page=0进行AJAX调用时，变量start等于-25。这显然是错误的。带有utils。页面大小2=25开始=25*0-1。如果page=1，则它的start=0。所以我刚刚用page+1替换了page，它可以正常工作

此tablesorter初始化中的分号导致了SyntaxError:expected表达式get'.'因此无法执行此文件中的任何内容。去掉分号后，它就可以工作了

$table.tablesorter{ };

---

我刚刚意识到在排序_averages.js中有一个额外的分号$table.tablesorter{}；。tablesorter甚至没有初始化。表体仅包含500个内部服务器错误。我需要自己编写一个合适的AJAX成功处理程序吗？或者，这只适用于ajaxUrl？此外，console.log会在THEAD中打印无效或列数不正确的消息；应该是3列，但找到了5列jquery.tablesorter.js:2357:13当我在HTML中向表中添加两个th时，没有这样的错误。不确定它最初在哪里找到了5列。要回答我自己的问题，我应该使用属性。但是如果我没有弄错的话，没有它的交互应该是有效的。*我刚刚意识到

{
  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
]