时间戳

首页 > 解决方案 > 使用 django 动态创建分页 html 表

html - 使用 django 动态创建分页 html 表

问题描述

我想使用 Django 中的视图创建一个 HTML 表格分页器。因此，我使用 javascript 从 csv 文件中的数据填充了我的 HTML 表，现在注意到该表中的数据非常庞大，我想使用 Django 技术对其进行分页。下面是我的视图代码和加载表格并希望分页的 html 页面。

from django.core.paginator import EmptyPage, PageNotAnInteger, Paginator
from django.shortcuts import render
def home(request):
    return render(request, 'home.html', {})

{% extends "base.html" %}
{% load static %}
{% csrf_token %}

    {% block content %}
        <script type="text/javascript" src="https://ajax.googlespis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script> 
        <script src="{% static 'js/populate_table.js' %}"></script>
        <script src="{% static 'js/dataTables.bootstrap.min.js' %}"></script>
        <script src="{% static 'js/bootstrap.min.js' %}"></script>
        <script src="{% static 'js/jquery.dataTables.min,js' %}"></script>
        <script src="http://code.jquery.com/jquery-latest.min.js"></script>
        <script src="{% static 'js/jquery.dataTables.min' %}"></script>

        <link rel="stylesheet" type="text/css" href="{% static 'css/bootstrap.min.css' %}">
        <link rel="stylesheet" type="text/css" href="{% static 'css/dataTables.bootstrap.min.css' %}">

        <h3 align = Center> Upload CSV file for predicting reopened pull requests</h3>
        <br>

        <p align="center"><input type="file" name="csv_file" required="True" class="form-control" id="fileUpload" /></p>
        <br>

        <p align = Center><button class="btn btn-primary" id="upload" value="Upload" onclick="Upload()"> <span class="glyphicon glyphicon-upload" style="margin-right:5px;"></span>Upload &raquo;</button></p>
        <div id="dvCSV">

        </div>

        <script>
            $('table').tablesort();
        </script>

    {% endblock content %}

标签： htmldjango

解决方案

您必须对数据进行分页，然后在模板中使用该数据

def index(request):
 user_list = User.objects.all()
 page = request.GET.get('page', 1)

 paginator = Paginator(user_list, 10)
 try:
     users = paginator.page(page)
 except PageNotAnInteger:
     users = paginator.page(1)
 except EmptyPage:
     users = paginator.page(paginator.num_pages)

 return render(request, 'core/user_list.html', { 'users': users })

网页

<table class="table table-bordered">
  <thead>
    <tr>
       <th>Username</th>
      <th>First name</th>
      <th>Email</th>
   </tr>
 </thead>
 <tbody>
   {% for user in users %}
    <tr>
      <td>{{ user.username }}</td>
      <td>{{ user.first_name }}</td>
      <td>{{ user.email }}</td>
   </tr>
 {% endfor %}
</tbody>
</table>

 {% if users.has_other_pages %}
    <ul class="pagination">
  {% if users.has_previous %}
    <li><a href="?page={{ users.previous_page_number }}">&laquo;</a></li>
  {% else %}
    <li class="disabled"><span>&laquo;</span></li>
  {% endif %}
  {% for i in users.paginator.page_range %}
    {% if users.number == i %}
       <li class="active"><span>{{ i }} <span class="sr-only">(current)</span> 
  .     </span></li>
  {% else %}
    <li><a href="?page={{ i }}">{{ i }}</a></li>
  {% endif %}
{% endfor %}
{% if users.has_next %}
  <li><a href="?page={{ users.next_page_number }}">&raquo;</a></li>
     {% else %}
     <li class="disabled"><span>&raquo;</span></li>
    {% endif %}
 </ul>
 {% endif %}

推荐阅读