封装类:
from django.core.paginator import Paginator, EmptyPage, PageNotAnInteger
from django.utils.html import format_html
import copy
"""
:param request: 请求的对象
:param queryset: ORM查询得到得数据
:param plus: 模板页面显示的页码数量,总数为plus*2
:param page_size: 每页显示多少条数据
:param page_merge: 小于page_merge的条数将合并到上一页
:param page_param: 在URL中传递的获取分页的参数,http://XXX/?page=12 中的[page]
"""
class Paging_Plug:
def __init__(self, request, queryset, plus=5, page_size=10, page_merge=2, page_param="page"):
self.paginator = Paginator(queryset, page_size, page_merge)
nums_page = self.paginator.num_pages
dict_url = copy.deepcopy(request.GET)
page = request.GET.get(page_param, "1")
if page.isdecimal():
page = int(page)
if 0 < page <= nums_page:
page = page
elif page < 1:
page = 1
else:
page = int(nums_page)
else:
page = 1
self.page_param = page_param
self.page = page
self.plus = plus
self.queryset_page = self.paginator.page(page)
self.total_count = self.paginator.count
self.dict_url = dict_url
def page_html(self):
# print(self.paginator.num_pages)
if self.paginator.num_pages <= 2 * self.plus + 1:
start_page = 1
end_page = self.paginator.num_pages
else:
if self.page <= self.plus:
start_page = 1
end_page = 2 * self.plus + 1
else:
if (self.page + self.plus) > self.paginator.num_pages:
start_page = self.paginator.num_pages - 2 * self.plus
end_page = self.paginator.num_pages
else:
start_page = self.page - self.plus
end_page = self.page + self.plus
list_page = []
"""首页"""
self.dict_url[self.page_param] = 1
home_page = '<ul class="pagination"><li><a href="?{}">{}</a></li>'.format(self.dict_url.urlencode(), "首页")
list_page.append(home_page)
"""上一页"""
if self.paginator.page(self.page).has_previous():
self.dict_url[self.page_param] = self.paginator.page(self.page).previous_page_number()
previous_page = '<li><a href="?{}" aria-label="Previous"><span ' \
'aria-hidden="true">上一页</span></a></li> '.format(self.dict_url.urlencode())
else:
previous_page = '<li class="disabled"><a aria-label="Previous"><span ' \
'aria-hidden="true">上一页</span></a></li> '
list_page.append(previous_page)
"""循环页码"""
for pg in range(start_page, end_page + 1):
self.dict_url[self.page_param] = pg
if pg == self.page:
page_ele = '<li class="active"><a href="?{}">{}</a></li>'.format(self.dict_url.urlencode(), pg)
else:
page_ele = '<li><a href="?{}">{}</a></li>'.format(self.dict_url.urlencode(), pg)
list_page.append(page_ele)
"""下一页"""
if self.paginator.page(self.page).has_next():
self.dict_url[self.page_param] = self.paginator.page(self.page).next_page_number()
next_page = '<li><a href="?{}" aria-label="Previous"><span ' \
'aria-hidden="true">下一页</span></a></li>'.format(self.dict_url.urlencode())
else:
next_page = '<li class="disabled"><a aria-label="Previous"><span ' \
'aria-hidden="true">下一页</span></a></li>'
list_page.append(next_page)
"""尾页"""
self.dict_url[self.page_param] = self.paginator.num_pages
last_page = '<li><a href="?{}">{}</a></li>'.format(self.dict_url.urlencode(), "尾页")
list_page.append(last_page)
"""跳转到指定页码"""
search_page = []
search_page_home = """
<li>
<form style="float: left;margin-left: -1px" method="get">
<select name="page" id="searchSelect" class="selectpicker" data-width="66px" data-style="radius btn-default" title="页码" data-live-search="true">
"""
search_page.append(search_page_home)
for i in self.paginator.page_range: # self.paginator.page_range
search_page_content = '<option value="{}">{}</option>'.format(i, i)
search_page.append(search_page_content)
search_page_last = """
</select>
</form>
</li>
"""
search_page.append(search_page_last)
list_page.append("".join(search_page))
"""数据总数"""
total_count = '<li><a>共{}条数据</a></li></ul>'.format(self.total_count)
list_page.append(total_count)
return format_html("".join(list_page))
在视图中引用
def pagination_show(request):
search_ipaddress = {}
search_name = {}
search_data = request.GET.get("search", "")
if search_data:
search_ipaddress["ipaddress__contains"] = search_data
search_name["name__contains"] = search_data
queryset = computer_info.objects.filter(Q(**search_ipaddress) | Q(**search_name)).order_by("id")
object_page = Paging_Plug(request, queryset)
context = {
"queryset_page": object_page.queryset_page, # 分完页的数据 (循环)
"string_html": object_page.page_html(), # 显示的分页页码
}
return render(request, 'computer_pagination3.html', context)
在模板中使用
页码的样式是基于bootstrap所以必须引入bootstrap.css
页码跳转是基于bootstrap-select 需要引入 bootstrap-select.css 和 bootstrap-select.js
另外就是jquery.js了
对了 最下面的一些js代码是 bootstrap-select 跳转页面用的
{% load static %}
{% load mytags %}
<html lang="en">
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="{% static "plugins/bootstrap-3.4.1/css/bootstrap.css" %}">
<link rel="stylesheet" href="{% static "plugins/bootstrap-select/css/bootstrap-select.css" %}">
<style>
.radius{
border-radius: 0;
/*background-color: #FFFFFF;
border: 1px solid #cccccc;*/
}
</style>
<title>终端电脑详情</title>
</head>
<body>
<div class="col-md-12">
<form method="get">
<div class="input-group">
<input type="text" name="search" class="form-control" placeholder="Search for...">
<span class="input-group-btn">
<button class="btn btn-default" type="submit">Go!</button>
</span>
</div><!-- /input-group -->
</form>
</div>
<div class="bs-example" data-example-id="bordered-table">
<table class="table table-bordered">
<thead>
<tr>
<th>#</th>
<th>公司</th>
<th>部门</th>
<th>CPU配置</th>
<th>内存配置</th>
<th>硬盘配置</th>
<th>IP地址</th>
<th>使用年限</th>
<th>升级方案</th>
<th>使用人</th>
<th>备注</th>
</tr>
</thead>
<tbody>
{% for field in queryset_page %}
<tr>
<th scope="row">{{ forloop.counter }}</th>
<td>{{ field.company }}</td>
<td>{{ field.department }}</td>
<td>{{ field.cpu }}</td>
<td>{{ field.memory }}</td>
<td>{{ field.hdisk }}</td>
<td>{{ field.ipaddress }}</td>
<td>{{ field.cpu_year }}</td>
<td>{{ field.upplan }}</td>
<td>{{ field.name }}</td>
<td>{{ field.note }}</td>
</tr>
{% endfor %}
</tbody>
</table>
</div>
{{ string_html }}
<script src="{% static "js/jquery-3.6.0.min.js" %}"></script>
<script src="{% static "plugins/bootstrap-3.4.1/js/bootstrap.js" %}"></script>
<script src="{% static "plugins/bootstrap-select/js/bootstrap-select.js" %}"></script>
<script>
$(function () {
function GetRequest(urlStr) {
let url;
//两种方式,输入链接获取或当前链接获取
if (typeof urlStr == "undefined") {
url = decodeURI(location.search); //获取url中"?"符后的字符串
} else {
url = "?" + urlStr.split("?")[1];
}
let theRequest = {};
if (url.indexOf("?") !== -1) {
let str = url.substr(1);//去掉问号,问号为第一个字符
let strs = str.split("&");
for (let i = 0; i < strs.length; i++) {
theRequest[strs[i].split("=")[0]] = decodeURI(strs[i].split("=")[1]);
}
}
return theRequest;
}
function join_url(queryConfig) {
let _url = "";
for (let i in queryConfig) {
//if (queryConfig[i] !== -1) {
_url += i + "=" + queryConfig[i] + "&";
//}
}
_url = _url.substring(0, _url.length - 1);
return _url;
}
$('#searchSelect').on('changed.bs.select', function () {
let page_value = $('#searchSelect').selectpicker('val');
let dict_url = GetRequest()
dict_url.page = page_value
let url_href = join_url(dict_url)
location.href = location.pathname + "?" + url_href
});
})
</script>
</body>
</html>