ListView变量与方法请看:http://ccbv.co.uk/projects/Django/1.6/django.views.generic.list/ListView/
前端样式使用Bootstrap3:http://v3.bootcss.com/getting-started/
Jinja2模板系统文档:http://docs.jinkan.org/docs/jinja2/
1、views.py:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
|
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只需要传好变量即可使用:
context_object_name是数据库搜索出来的结果存放的变量名字,用于模板循环显示
template_name加载该html文件
paginate_by设置分页中每一页的记录数目
model定义从哪份model中查询
2、urls.py:
1
2
3
4
5
6
|
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'
),
)
|
3、模板,模板我采用了继承,父模板是整个网站的框架,有点长不好放出来,这里只放子模板:
serverlist.jinja.html:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
|
{% extends "base2.jinja.html" %}
{% set active_page = 'serverlist' -%}
{% block body %}
<
form
class
=
"form-inline"
role
=
"form"
action
=
""
method
=
"GET"
>
<
div
class
=
"panel panel-default"
>
<
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_num }}服-{{ server.server_name }}</
td
>
<
td
>{{ server.hefu_range.replace('-',',') }}</
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 }}?page=1"
>«</
a
></
li
>
{% if page_obj.has_previous() %}
<
li
><
a
href
=
"{{ request.path }}?&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 }}?page={{ i }}"
>{{ i }}</
a
></
li
>
{% endfor %}
{% if page_obj.has_next() %}
<
li
><
a
href
=
"{{ request.path }}?page={{ page_obj.next_page_number() }}"
>下一页</
a
></
li
>
{% else %}
<
li
class
=
"previous disabled"
><
a
>下一页</
a
></
li
>
{% endif %}
<
li
><
a
href
=
"{{ request.path }}?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
现在实现的效果:
4、基本的分页是做好了,现在需要加多一个搜索的功能,
先改造views.py:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
|
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:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
|
{% 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参数
看了下效果感觉还过得去。。
本文转自运维笔记博客51CTO博客,原文链接http://blog.51cto.com/lihuipeng/1436010如需转载请自行联系原作者
lihuipeng