Django開發：利用ListView分頁顯示數據

時間 2019-11-12

標籤 django 開發利用 listview 分頁顯示數據欄目 Python 简体版

原文原文鏈接

ListView變量與方法請看： http://ccbv.co.uk/projects/Django/1.6/django.views.generic.list/ListView/css

前端樣式使用Bootstrap3： http://v3.bootcss.com/getting-started/html

Jinja2模板系統文檔： http://docs.jinkan.org/docs/jinja2/前端

from django.shortcuts import render
from django.http.response import HttpResponse
from django.views.generic import  View, ListView
#model
from models import *
#python
import urllib2

......
class ServerListIndex(ListView):
    context_object_name = 'serverlist'
    template_name = 'serverlist.jinja.html'
    paginate_by = 50
    model = ServerList

ListView只須要傳好變量便可使用：python

context_object_name是數據庫搜索出來的結果存放的變量名字，用於模板循環顯示數據庫

template_name加載該html文件django

paginate_by設置分頁中每一頁的記錄數目服務器

model定義從哪份model中查詢框架

二、urls.py:dom

urlpatterns = patterns('',
    url(r'^test/$', TemplateView.as_view(template_name='base2.jinja.html')),

    url(r'update/$', Update_ServerList.as_view(), name="update_serverlist"),
    url(r'^$', ServerListIndex.as_view(), name='serverlist'),
)

三、模板，模板我採用了繼承，父模板是整個網站的框架，有點長很差放出來，這裏只放子模板：網站

serverlist.jinja.html:

{% extends "base2.jinja.html" %}
{% set active_page = 'serverlist' -%}
{% block body %}
  <form class="form-inline" role="form" action="" method="GET">
      <div class="panel panel-default">
      <div class="panel-heading">          
          <div class="form-group">            
              <select name="plat" class="form-control">
                   <option value="">--所有--</option>             
                 {% for i in platlist -%}                 
                 <option value="{{ i.plat }}" {% if request.GET.plat  == i.plat -%}selected{% endif -%}>
                     {{ i.plat }}
                 </option>              
                 {% endfor -%}            
              </select>          
          </div>         
          <div class="form-group">          
          <input type="input" name="keyword" class="form-control" placeholder="請輸入域名或者IP" value="{{ request.GET.keyword }}">          
          </div>          
          <button type="submit" class="btn btn-primary">Search</button>
      </div>      
      <table class="table table-striped table-bordered table-hover table-condensed">        
          <thead>          
          <tr>          
              <th>平臺</th>          
              <th>服務器名稱</th>          
              <th>合服列表</th>          
              <th>開服時間</th>          
              <th>域名/IP</th>          
              <th></th>          
          </tr>        
          </thead>        
          <tbody>          
              {% for server in serverlist -%}            
              <tr>            
                  <td>{{ server.plat }}</td>            
                  <td>{{ server.server_id }}服-{{ server.server_name }}</td>            
                  <td>{{ server.hefu_range.replace('-',',').strip() }}</td>            
                  <td>{{ server.open_time }}</td>            
                  <td>              
                      {{ server.domain }}<br>              
                      {{ server.dx_ip }}/{{ server.lt_ip }}            
                  </td>            
                  <th><a href="#" class="btn btn-primary" role="button">執行命令</a></th>            
              </tr>          
              {% endfor -%}        
          </tbody>      
      </table>    
   </div>    
   <div class="panel-default">      
       <center>        
       <ul class="pagination">          
       <li><a href="{{ request.path }}?plat={{ request.GET.plat }}&keyword={{ request.GET.keyword }}&page=1">«</a></li>
        {% if page_obj.has_previous() %}            
        <li>
            <a href="{{ request.path }}?plat={{ request.GET.plat }}&keyword={{ request.GET.keyword }}&page={{ page_obj.previous_page_number() }}">上一頁</a>
        </li>          
        {% else %}            
        <li class="previous disabled"><a>上一頁</a></li>          
        {% endif %}          
        {% for i in page_obj.paginator.page_range %}            
        <li {% if page_obj.number == i %}class="active"{% endif %}>
            <a href="{{ request.path }}?plat={{ request.GET.plat }}&keyword={{ request.GET.keyword }}&page={{ i }}">{{ i }}</a>
        </li>          
        {% endfor %}          
        {% if page_obj.has_next() %}            
        <li><a href="{{ request.path }}?plat={{ request.GET.plat }}&keyword={{ request.GET.keyword }}&page={{ page_obj.next_page_number() }}">下一頁</a></li>          
        {% else %}            
        <li class="previous disabled"><a>下一頁</a></li>          
        {% endif %}          
        <li><a href="{{ request.path }}?plat={{ request.GET.plat }}&keyword={{ request.GET.keyword }}&page={{ page_obj.paginator.num_pages }}">»</a></li>        
        </ul>      
        </center>    
        </div>  
        </form>{% endblock %}

page_obj是分頁對像實例，這個名字是ListView默認生成的

page_obj的變量：

page_obj.paginator.page_range：全部分頁的number，是一個list

page_obj.number：當前分頁的頁碼

page_obj.paginator.num_pages：總分頁數，就是一共有多少頁

page_obj的方法：

page_obj.has_previous()：判斷是否有上一頁

page_obj.previous_page_number()：返回上一頁的number

page_obj.has_next()：判斷是否有下一頁

page_obj.next_page_number()：返回下一頁的number

如今實現的效果：

四、基本的分頁是作好了，如今須要加多一個搜索的功能，

先改造views.py:

class ServerListIndex(ListView):  
    context_object_name = 'serverlist'  
    template_name = 'serverlist.jinja.html'  
    paginate_by = 50  
    #model = ServerList  
    http_method_names = [u'get',]  
    def get_queryset(self):    
        serverlist = ServerList.objects.all()    
        plat = self.request.GET.get('plat')    
        keyword = self.request.GET.get('keyword')    
        if plat:      
            serverlist = serverlist.filter(plat=plat)    
        if keyword:      
            serverlist = serverlist.filter(Q(dx_ip=keyword)|Q(lt_ip=keyword)|Q(domain=keyword))    
        return serverlist  
        def get_context_data(self, **kwargs):
            context = super(ServerListIndex,self).get_context_data(**kwargs)    
            platlist = ServerList.objects.values('plat').annotate()    
            context['platlist'] = platlist    
            return context

重寫了get_queryset方法，達到利用get參數自定義SQL的做用

從新get_context_data方法，至關於return render_to_response(xxx.html,{},context_instance=RequestContext(request))中的{}的內容，就是傳給模板的變量

而後把html增長一個搜索菜單：

serverlist.jinja.html:

{% extends "base2.jinja.html" %}
{% set active_page = 'serverlist' -%}
{% block body %}  
<form class="form-inline" role="form" action="" method="GET">
    <div class="panel panel-default">      
        <div class="panel-heading">
            <div class="form-group">           
                <select name="plat" class="form-control">          
                    <option value="">--所有--</option>              
                    {% for i in platlist -%}                 
                    <option value="{{ i.plat }}" {% if request.GET.plat  == i.plat -%}selected{% endif -%}>{{ i.plat }}</option>              
                    {% endfor -%}            
                 </select>          
             </div>          
             <div class="form-group">      
                 <input type="input" name="keyword" class="form-control" placeholder="請輸入域名或者IP" value="{{ request.GET.keyword }}">          
                 </div>          
                 <button type="submit" class="btn btn-primary">Search</button>      
                 </div>   
                    <table class="table table-striped table-bordered table-hover table-condensed">        
                        <thead>          
                        <tr>          
                            <th>平臺</th>         
                            <th>服務器名稱</th>          
                            <th>合服列表</th>          
                            <th>開服時間</th>          
                            <th>域名/IP</th>          
                            <th></th>          
                         </tr>        
                         </thead>        
                         <tbody>       
                            {% for server in serverlist -%}            
                            <tr>        
                                <td>{{ server.plat }}</td>            
                                <td>{{ server.server_id }}服-{{ server.server_name }}</td>            
                                <td>{{ server.hefu_range.replace('-',',').strip() }}</td>            
                                <td>{{ server.open_time }}</td>            
                                <td>          
                                    {{ server.domain }}<br>              
                                    {{ server.dx_ip }}/{{ server.lt_ip }}            
                                </td>            
                                <th><a href="#" class="btn btn-primary" role="button">執行命令</a></th>            
                            </tr>          
                            {% endfor -%}        
                          </tbody>      
                      </table>    
                  </div>    
                  <div class="panel-default">      
                      <center>        
                      <ul class="pagination">          
                         <li><a href="{{ request.path }}?plat={{ request.GET.plat }}&keyword={{ request.GET.keyword }}&page=1">«</a></li>          
                         {% if page_obj.has_previous() %}            
                         <li><a href="{{ request.path }}?plat={{ request.GET.plat }}&keyword={{ request.GET.keyword }}&page={{ page_obj.previous_page_number() }}">上一頁</a></li>          
                         {% else %}            
                         <li class="previous disabled"><a>上一頁</a></li>          
                         {% endif %}          
                         {% for i in page_obj.paginator.page_range %}            
                         <li {% if page_obj.number == i %}class="active"{% endif %}><a href="{{ request.path }}?plat={{ request.GET.plat }}&keyword={{ request.GET.keyword }}&page={{ i }}">{{ i }}</a></li>          
                         {% endfor %}          
                         {% if page_obj.has_next() %}            
                         <li><a href="{{ request.path }}?plat={{ request.GET.plat }}&keyword={{ request.GET.keyword }}&page={{ page_obj.next_page_number() }}">下一頁</a></li>          
                         {% else %}            
                         <li class="previous disabled"><a>下一頁</a></li>          
                         {% endif %}          
                         <li><a href="{{ request.path }}?plat={{ request.GET.plat }}&keyword={{ request.GET.keyword }}&page={{ page_obj.paginator.num_pages }}">»</a></li>        
                      </ul>      
                  </center>    
                  
              </div>  
          </form>
          {% endblock %}

由於加多了get參數，因此網頁尾部的分頁還要加上GET參數

看了下效果感受還過得去