Question

尝试使我的某些表与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)

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

对象已退回

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

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

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的值。我忘记了表排序器的行索引从0开始。然后，当分页器使用Event变量page=0进行AJAX调用时，它等于-25。显然是错误的。其中start utils. PAGE_SIZE_2 = 25 = 25 *（0-1）。如果为start，则为page = 1。因此，我刚刚将start = 0替换为page，它可以正常工作。
此表排序器初始化中的分号引起了page+1，因此该文件中的任何内容均无法执行。删除分号后即可使用。

SyntaxError: expected expression, got '.'

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

2 个答案: