- ubuntu12.04环境下使用kvm ioctl接口实现最简单的虚拟机
- Ubuntu 通过无线网络安装Ubuntu Server启动系统后连接无线网络的方法
- 在Ubuntu上搭建网桥的方法
- ubuntu 虚拟机上网方式及相关配置详解
CFSDN坚持开源创造价值,我们致力于搭建一个资源共享平台,让每一个IT人在这里找到属于你的精彩世界.
这篇CFSDN的博客文章Django自定义分页与bootstrap分页结合由作者收集整理,如果你对这篇文章有兴趣,记得点赞哟.
django中有自带的分页模块Paginator,想Paginator提供对象的列表,就可以提供每一页上对象的方法.
这里的话不讲解Paginator,而是自定义一个分页类来完成需求:
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
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
|
class
Pagination(
object
):
"""用于Model字段值的选择"""
def
__init__(
self
):
pass
@classmethod
def
create_pagination(
self
, from_name
=
'
', model_name='
',
cur_page
=
1
, start_page_omit_symbol
=
'...'
,
end_page_omit_symbol
=
'...'
, one_page_data_size
=
10
,
show_page_item_len
=
9
):
"""通过给的model和分页参数对相关model进行分页
Args:
from_name: 导入模块的 from后面的参数
from {from_name} import model_name
mode_name: 需要导入的模块名
from from_name import {model_name}
cur_page: 当前显示的是第几页
start_page_omit_symbol: 超出的页数使用怎么样的省略号(前)
... 2 3 4
end_page_omit_symbol: 超出的页数使用怎么样的省略号(后)
1 2 3 4 ...
one_page_data_size: 每一页显示几行
show_page_item_len: 显示几个能点击的页数
Return:
pagination: dict
pagination = {
'objs': objs, # 需要显示model数据
'all_obj_counts': all_obj_counts, # 一共多少行数据
'start_pos': start_pos, # 数据分页开始的数据
'end_pos': end_pos, # 数据分页结束的数据
'all_page': all_page, # 一共有多少页
'cur_page': cur_page, # 当前的页码
'pre_page': pre_page, # 上一页的页码
'next_page': next_page, # 下一页的页码
'page_items': page_items, 能点击的页数
'start_page_omit_symbol': start_page_omit_symbol, # 开始的省略号
'end_page_omit_symbol': end_page_omit_symbol, # 结束的省略号
}
Raise: None
"""
# 如果没有输入导入模块需要的相关信息直接退出
if
not
from_name
or
not
model_name:
return
None
import_str
=
'from {from_name} import {model_name}'
.
format
(
from_name
=
from_name,
model_name
=
model_name)
# 导入模块
exec
import_str
start_pos
=
(cur_page
-
1
)
*
one_page_data_size
end_pos
=
start_pos
+
one_page_data_size
# 查找需要的model数据
find_objs_str
=
(
'{model_name}.objects.all()'
'[{start_pos}:{end_pos}]'
.
format
(
model_name
=
model_name,
start_pos
=
start_pos,
end_pos
=
end_pos))
objs
=
eval
(find_objs_str)
# 计算总共的页数
find_objs_count_str
=
'{model_name}.objects.count()'
.
format
(
model_name
=
model_name)
all_obj_counts
=
eval
(find_objs_count_str)
all_page
=
all_obj_counts
/
one_page_data_size
remain_obj
=
all_obj_counts
%
one_page_data_size
if
remain_obj >
0
:
all_page
+
=
1
# 限制当前页不能小于1和并且大于总页数
cur_page
=
1
if
cur_page <
1
else
cur_page
cur_page
=
all_page
if
cur_page > all_page
else
cur_page
# 获得显示页数的最小页
start_page
=
cur_page
-
show_page_item_len
/
2
if
start_page > all_page
-
show_page_item_len:
start_page
=
all_page
-
show_page_item_len
+
1
start_page
=
1
if
start_page <
1
else
start_page
# 获得显示页数的最大页
end_page
=
cur_page
+
show_page_item_len
/
2
end_page
=
all_page
if
end_page > all_page
else
end_page
if
end_page < show_page_item_len
and
all_page > show_page_item_len:
end_page
=
show_page_item_len
# 获得上一页
pre_page
=
cur_page
-
1
pre_page
=
1
if
pre_page <
1
else
pre_page
# 获得下一页
next_page
=
cur_page
+
1
next_page
=
all_page
if
next_page > all_page
else
next_page
# 处理省略符,是否显示
if
start_page <
=
1
:
start_page_omit_symbol
=
''
if
end_page >
=
all_page:
end_page_omit_symbol
=
''
# 创建能点击的展示页码
page_items
=
range
(start_page, end_page
+
1
)
pagination
=
{
'objs'
: objs,
'all_obj_counts'
: all_obj_counts,
'start_pos'
: start_pos,
'end_pos'
: end_pos,
'all_page'
: all_page,
'cur_page'
: cur_page,
'pre_page'
: pre_page,
'next_page'
: next_page,
'page_items'
: page_items,
'start_page_omit_symbol'
: start_page_omit_symbol,
'end_page_omit_symbol'
: end_page_omit_symbol,
}
return
pagination
|
利用bootstrap的css,生成好看的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
|
<
nav
aria-label
=
"Page navigation"
>
<
ul
class
=
"pagination"
>
{% if pagination.cur_page != 1 %}
<
li
><
a
href
=
"?cur_page=1"
rel
=
"external nofollow"
><<</
a
></
li
>
<
li
>
<
a
href
=
"?cur_page={{ pagination.pre_page }}"
rel
=
"external nofollow"
aria-label
=
"Previous"
>
<
span
aria-hidden
=
"true"
>«</
span
>
</
a
>
</
li
>
{% endif %}
{% for page_item in pagination.page_items %}
{% if page_item == pagination.cur_page %}
<
li
><
a
href
=
"?cur_page={{ page_item }}"
rel
=
"external nofollow"
rel
=
"external nofollow"
>{{ page_item }}</
a
></
li
>
{% else %}
<
li
><
a
href
=
"?cur_page={{ page_item }}"
rel
=
"external nofollow"
rel
=
"external nofollow"
>{{ page_item }}</
a
></
li
>
{% endif %}
{% endfor%}
{% if pagination.cur_page != pagination.all_page %}
<
li
>
<
a
href
=
"?cur_page={{ pagination.next_page }}"
rel
=
"external nofollow"
aria-label
=
"Next"
>
<
span
aria-hidden
=
"true"
>»</
span
>
</
a
>
</
li
>
<
li
><
a
href
=
"?cur_page={{ pagination.all_page }}"
rel
=
"external nofollow"
>>></
a
></
li
>
{% endif %}
</
ul
>
</
nav
>
|
view函数如下:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
|
def
blogpage(request):
#ojt = BlogPost.object.all()
#p = Paginator(ojt,2)
#page_count = p.count
#page_data = p.page(page)
#template = 'blogpage.html'
#info = {'page_data':page_data,'page_count':page_count}
#return render(request,template,{'page_data':page_data,'page_count':page_count})
try
:
cur_page
=
int
(request.GET.get(
'cur_page'
,
'1'
))
except
ValueError:
cur_page
=
1
pagination
=
Pagination.create_pagination(
from_name
=
'blog.models'
,
model_name
=
'BlogPost'
,
cur_page
=
cur_page,
start_page_omit_symbol
=
'...'
,
end_page_omit_symbol
=
'...'
,
one_page_data_size
=
1
,
show_page_item_len
=
5
)
return
render(request,
'blogpage.html'
,{
'pagination'
:pagination})
|
效果图如下:
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持我.
最后此篇关于Django自定义分页与bootstrap分页结合的文章就讲到这里了,如果你想了解更多关于Django自定义分页与bootstrap分页结合的内容请搜索CFSDN的文章或继续浏览相关文章,希望大家以后支持我的博客! 。
有人可以告诉我 Bootstrap、Twitter Bootstrap 和 Bootstrap 3 之间有什么区别吗? 最佳答案 在 CSS 框架的上下文中,Bootstrap 和 Twitter B
什么是 Bootstrap 文档中的屏幕阅读器??? >>> bootstrap document 不知道什么是屏幕阅读器? 最佳答案 它是视力不佳或由于某种原因无法从屏幕上阅读的人使用的工具;它会向
我想更新网站上的 Bootstrap,但我不知道安装的版本。 如何仅使用 bootstrap.css 和 bootstrap.min.js 文件来识别 bootstrap 版本? CSS 文件中没有版
很抱歉问了这么一个愚蠢的问题,但我真的不清楚这些。 Bootstrap 是一个非常棒的库,它节省了开发人员的大量工作。 因为它提供了很多功能,比如 节省大量时间。 响应式功能。 一致的设计。 便于使用
我正在使用 ng2-bootstrap对于 Angular 2 项目。 这个包同时支持Bootstrap 3和4,我安装后默认使用Bootstrap 3。我没有找到任何关于切换的信息。 如何从 Boo
我计划在我的项目中使用 Bootstrap 4 和 angular 4,但我对 npm install --save @ng-bootstrap/ng-bootstrap 和 npm install
单击删除按钮后,我设置了警报。 但它的默认高度更大,我想让它更小(高度)。 我试过 display-4 属性(property),但它没有工作。 我已通过 w-50 将宽度设置为屏幕的一半,但警报的一
我使用 Bootstrap 按钮下拉菜单来显示表单。我通过调用 stopPropagation 禁用了单击时消失的下拉菜单(当用户操作表单时) .表单的元素之一是下拉列表。如果我使用 native h
twitter-bootstrap 中的“bootstrap”一词是什么意思?在许多 gem 中都有“bootstrap”这个词。我搜索了其中的含义,但无法得出结论。那么有人可以在这种情况下给出“Bo
由于 Bootstrap 5 不再使用 jQuery 并且正在使用 vanilla JS,我想知道是否仍然建议使用 Bootstrap-Vue,不管 Bootstrap-Vue 还不支持 Bootst
我正在使用 codeigniter 框架,我正在使用 bootstrap typeahead,一切都很好,但我的问题是当我将它放在 bootstrap 模式中时,bootstrap typeahead
我刚刚完成安装 bootstrap 5 版本 ^5.0.0-alpha1并在 app.js 中导入 Bootstrap import "bootstrap" 其他.js var myModal = n
我一直在尝试在使用选项卡的页面上实现 ScrollSpy。 这是我的 body 标签: 这是我的标签 HTML: Home Profile
如果您选择使用 Bootstrap-Xtra,您是否应该也包括原始的 bootstrap.css,或者 bootstrap-xtra.css 应该是一个完整的替代品。 例如,bootstrap-xtr
我正在使用 bootbox 创建一个对话框。 bootbox.dialog({ message: 'Datepicker input: ', title: "Custom label"
我正在将使用 Bootstrap 构建的 Web 应用程序迁移到 React 和 react-bootstrap,两者都很棒。我在 react-bootstrap 中没有看到的一件事是如何顺利集成 B
我正在使用 Bootstrap 3 RC,默认按钮是带有黑色文本的深灰色,而不是带有黑色文本的浅灰色。我已经尝试过 CDN 链接和离线。我还清空了我的浏览器缓存以防万一。有没有其他人经历过这个?这可能
在我的一个项目中,我曾经有 bootstrap-tagsinput http://timschlechter.github.io/bootstrap-tagsinput沿着 bootstrap-2.3
下拉菜单在 Angular-UI-Bootstrap 中不起作用?使用 Bootstrap-3 CSS 以下是代码。链接Click me for a dropdown出现。但不会在点击时切换。怎么了?
如何在 Bootstrap Table 中添加 Bootstrap 按钮 最佳答案 我已经想出了解决办法。我想和大家分享。 这是我的 table : # Visit
我是一名优秀的程序员,十分优秀!