Tablesorter AJAX нумерация страниц. Как правильно взаимодействовать с бэкэндом JSON? - PullRequest
Новая
       23

Tablesorter AJAX нумерация страниц. Как правильно взаимодействовать с бэкэндом JSON?

0 голосов
/ 27 июня 2019

Попытка заставить некоторые из моих таблиц работать с 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.

Ответы [ 2 ]

1 голос
/ 28 июня 2019

В этом случае вам нужно будет включить функцию ajaxProcessing .

Если вы хотите полностью исключить функцию 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
]
0 голосов
/ 28 июня 2019

@ Мотти написал отличный ответ.И я хотел бы добавить пару вещей, которые были неправильны в моем коде.

  1. В моих Players.views я не ожидал получить значение параметра 'page' = 0. Я забыл, что индексация строк в TableSorter начинается с 0. Затем, когда пейджер сделал AJAXвызов с page=0 переменной start был равен -25.Это явно неправильно.С utils. PAGE_SIZE_2 = 25 start = 25 * (0 - 1).Если page = 1, то это start = 0.Итак, я только что заменил page на page+1, и он работает, как и ожидалось.

  2. Точка с запятой в этой инициализации сортировщика таблиц вызвала SyntaxError: expected expression, got '.' Так что ничего в этом файле не может быть выполнено,С удаленной точкой с запятой это работает.

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

...