Django分页的封装类

landi521

已于 2023-05-13 14:51:01 修改

阅读量181

点赞数

文章标签： django python 后端

于 2023-05-13 14:47:57 首次发布

本文链接：https://blog.csdn.net/landi521/article/details/130657048

版权

该代码实现了一个Django应用中用于处理分页的类Paging_Plug，它接受请求、ORM查询集、页码显示数量、每页大小等参数，生成分页HTML。在视图中，根据GET参数进行查询并应用分页，然后将结果传给模板。模板使用了Bootstrap样式和jQuery插件实现分页功能。

摘要由CSDN通过智能技术生成

封装类：

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>