Tablesorter AJAX 分页。如何正确地与后端交互 JSON？

Question

尝试让我的一些 table 与 Ajax pagination 一起工作实际上只用一个 table 创建了一个干净的空模板。仅供测试。

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

urls.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 中传递页码参数。尝试了几种不同的方法。现在，我希望 table 在初始加载时显示第一页。然后使用 AJAX 来回分页。现在它只加载 table 的 headers。不是来自 JSON.

的 headers

Answer 1

在这种情况下，您需要包含一个 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
]

Answer 2

@Mottie 发布了一个很好的答案。我想补充一些我代码中的错误。

在我的players.views中没想到得到一个参数值'page' = 0。我忘记了 tablesorter 的行索引从 0 开始。然后当寻呼机使用 page=0 变量 start 进行 AJAX 调用时等于 -25。显然是错误的。 utils. PAGE_SIZE_2 = 25 start = 25*(0 - 1)。如果page = 1它start = 0。所以我刚刚用 page+1 替换了 page 并且它按预期工作。
这个表排序器初始化中的分号导致 SyntaxError: expected expression, got '.' 所以这个文件中的任何东西都无法执行。删除分号后它可以工作。

$("table").tablesorter({ });

Tablesorter AJAX 分页。如何正确地与后端交互 JSON？

Tablesorter AJAX pagination. How to properly interact wiith a backend JSON?

javascript

django

ajax

jquery

tablesorter