基于bootstrap5.1的分页导航封装

函数中有些测试代码也很有用,没有删除.
实际视图中的代码量非常少.

视图中
def pretty_list(request):
    # 临时添加数据库数据, 测试分页
    # for i in range(300):
    #     mobile = "18000000{}".format(i)
    #     PrettyNum.objects.create(mobile=mobile, price=i * 20, level=i % 2 + 2, status=i % 2 + 1)

    # 搜索测试
    # search_set = PrettyNum.objects.filter(mobile="133", id=3)
    # data_dict = {"mobile": "133", "id": 3}
    # search_set = PrettyNum.objects.filter(**data_dict)
    data_dict = {}
    value = request.GET.get("search")
    if value:
        data_dict['mobile__contains'] = value

    # 分页
    pretty_set = PrettyNum.objects.filter(**data_dict)
    page_obj = Pagination(request, pretty_set)

    page_str = page_obj.html()
    # 仅显示要搜索的靓号列表
    # select * from 表 order by level desc;
    # 如果value为空,则返回所有的queryset
    # pretty_set = PrettyNum.objects.filter(**data_dict).order_by("-level")
    # pretty_set = PrettyNum.objects.filter(**data_dict)[page_obj.start:page_obj.end]
    pretty_set = page_obj.page_queryset
    return render(request, "app01/pretty_list.html", locals())
模板中
<ul class="pagination">
    {{ page_str }}
</ul>

重点到了,
基于bootstrap5.1的分页导航封装为模块

模块中
"""
自定义分页组件
# 外部依赖
1. bootstrap5.1
2. bootstrap-icons
3. jquery

# 在views中:
def pretty_list(request):
    # 1. 根据自己的情况去筛选自己的数据
    pretty_set = PrettyNum.objects.filter(**data_dict)
    # 2. 实例化分页对象
    page_obj = Pagination(request, pretty_set)
    # 3. 获取面页布局
    page_str = page_obj.html()
    # 4. 获取分页后的查询结果
    pretty_set = page_obj.page_queryset
    return render(request, "app01/pretty_list.html", locals())

# 在html中:
<div class=" d-flex justify-content-between mt-3">
    <ul class="pagination">
        {{ page_str }}
    </ul>
</div>
"""
import math

from django.utils.safestring import mark_safe


class Pagination:
    def __init__(self, request, queryset, page_size=10, page_param="page", plus=5):
        """

        :param request: 请求的对象
        :param queryset: 数据库查询结果
        :param page_size: 每页要显示的条数
        :param page_param: GET中传进来的参数名称
        :param plus: 要呈现的当前后的前后页数
        """
        page = request.GET.get(page_param, "1")
        if page.isdecimal():
            page = int(page)
        else:
            page = 1
        self.page = page
        self.page_size = page_size
        self.plus = plus

        self.fields_count = queryset.count()  # 总条数
        self.page_count = math.ceil(self.fields_count / page_size)  # 总页数
        self.start = (page - 1) * page_size  # 起始条目
        self.end = page * page_size  # 结束条

        self.page_queryset = queryset[self.start:self.end]

    def html(self):
        """

        :return: 返回分页导航的html语句
        """
        # 数据少时<=10页
        if self.page_count <= 2 * self.plus:
            start_page = 1
            end_page = self.page_count + 1
        # 数据多时>10页
        elif self.page <= self.plus:
            start_page = 1
            end_page = 2 * self.plus + 1
        # 大的极值
        elif self.page + self.plus > self.page_count:
            start_page = self.page - self.plus
            end_page = self.page_count + 1
        else:
            start_page = self.page - self.plus
            end_page = self.page + self.plus + 1
        # 页码
        page_str_list = []
        # 首页
        if self.page == 1:
            ele = '<li class="page-item disabled"><a class="page-link" href="?page=1"><span ' \
                  'aria-hidden="true">首页</span></a></li> '
        else:
            ele = '<li class="page-item"><a class="page-link" href="?page=1"><span aria-hidden="true">首页</span></a></li>'
        page_str_list.append(ele)
        # 上一页
        if self.page < 2:
            prev_page = 1
            ele = '<li class="page-item disabled"><a class="page-link" href="?page={i}"><span ' \
                  'aria-hidden="true">&laquo;</span></a></li>'.format(
                i=prev_page)
        else:
            prev_page = self.page - 1
            ele = '<li class="page-item"><a class="page-link" href="?page={i}"><span ' \
                  'aria-hidden="true">&laquo;</span></a></li>'.format(
                i=prev_page)
        page_str_list.append(ele)
        for i in range(start_page, end_page):
            """用省略的相对路径和?带参"""
            if i == self.page:
                ele = '<li class="page-item active"><a class="page-link" href="?page={i}">{i}</a></li>'.format(i=i)
            else:
                ele = '<li class="page-item"><a class="page-link" href="?page={i}">{i}</a></li>'.format(i=i)
            page_str_list.append(ele)
        # 下一页
        if self.page > self.page_count - 1:
            next_page = self.page_count
            ele = '<li class="page-item disabled"><a class="page-link" href="?page={i}"><span aria-hidden="true">&raquo;</span></a></li>'.format(
                i=next_page)
        else:
            next_page = self.page + 1
            ele = '<li class="page-item"><a class="page-link" href="?page={i}"><span aria-hidden="true">&raquo;</span></a></li>'.format(
                i=next_page)
        page_str_list.append(ele)
        # 尾页
        if self.page == self.page_count:
            ele = '<li class="page-item disabled"><a class="page-link" href="?page={}"><span aria-hidden="true">尾页</span></a></li>'.format(
                self.page_count)
        else:
            ele = '<li class="page-item"><a class="page-link" href="?page={}"><span aria-hidden="true">尾页</span></a></li>'.format(
                self.page_count)
        page_str_list.append(ele)
        ele = """
            <li>
                <form class="ms-auto" method="get">
                    <div class="input-group">
                        <input class="form-control" name="page" type="search" placeholder="GO!"
                             aria-label="GO!">
                        <button class="btn btn-outline-success" type="submit">跳转</button>
                    </div>
                </form>
            </li>
            """
        page_str_list.append(ele)
        page_str = mark_safe("".join(page_str_list))
        return page_str

效果

在这里插入图片描述

  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

Q_M_Y_Y

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值