Каждые 10 строк моей таблицы я хочу отображать отдельно.

В моем проекте Django есть таблица, данные в которую поступают из базы данных. Там могут быть сотни строк. Я не могу отобразить их все на одной странице. Я хочу отобразить мои таблицы по 10 строк для каждой. У меня есть две кнопки для следующей и предыдущей строки. Могу ли я сделать это с помощью jquery или какого-нибудь кода на python?

index.html

<table class="table" border=1>
        <thead>
          <tr>

            <th>Full Name</th>
            <th>Company</th>
            <th>Email</th>
            <th>Phone Number</th>
            <th>Note</th>
            <th>ID</th>
            <th>Item Barcode</th>
          </tr>

        </thead>
        <tbody>
          {% for x in thelist %}
            
              <tr>
                  <td>{{x.full_name}}</td>
                  <td>{{x.company}}</td>
                  <td>{{x.email}}</td>
                  <td>{{x.phone_number}}</td>
                  <td>{{x.note}}</td>
                  <td>{{x.id}}</td>
                  <td>{{x.item_barcode}}</td>
              </tr>


          {% endfor %}
        </tbody>
      </table>

      <button type="button" class="btn btn-primary" name="button">Next</button>
      <button type="button" class="btn btn-primary" name="button">Previous</button>

Для этого можно использовать таблицы данных начальной загрузки:

<link rel="stylesheet" href="https://cdn.datatables.net/1.12.1/css/jquery.dataTables.min.css">

<table class="table" border=1 id='mydatatable'>
  <thead>
    <tr>
      <th>Full Name</th>
      <th>Company</th>
      <th>Email</th>
      <th>Phone Number</th>
      <th>Note</th>
      <th>ID</th>
      <th>Item Barcode</th>
    </tr>
  </thead>
  
  <tbody>
    {% for x in thelist %}
    <tr>
      <td>{{x.full_name}}</td>
      <td>{{x.company}}</td>
      <td>{{x.email}}</td>
      <td>{{x.phone_number}}</td>
      <td>{{x.note}}</td>
      <td>{{x.id}}</td>
      <td>{{x.item_barcode}}</td>
    </tr>
    {% endfor %}
  </tbody>
</table>
<script src='https://cdn.datatables.net/1.12.1/js/jquery.dataTables.min.js'></script>
<script>
$(document).ready(function () {
    $('#mydatatable').DataTable();
});
</script>

Для получения дополнительной информации вы можете обратиться к https://datatables.net/

Вы можете использовать rowIndex и два класса (например, .active и .visible) для первой видимой строки и стилизации через CSS:

Установите класс .active на первой строке, которая должна быть видимой. На следующем шаге (в лучшем случае в отдельной функции) удалите класс .visible со всех строк, а затем установите класс .visible столько раз, сколько вы определили с помощью константы visible_rows, начиная с активной строки.

В обработчиках событий для #next и #previous просто сдвиньте класс .active на количество видимых строк, если в этом направлении остались строки, и вызовите функцию showRows().

Пример работы:

Вернуться на верх