首页 > 其他分享 >分页组件

分页组件

时间:2023-10-31 09:35:48浏览次数:31  
标签:count 分页 self param dict 组件 query page

myproject/app01/utils/pagination.py

"""
自定义分页组件
以后如果想要使用这个分页组件,需要做:

在视图函数中:
    from app01.utils.pagination import Pagination
    def prettynum_list(request):

        #1.根据自己的情况去筛选自己的数据
        queryset = models.PrettyNum.objects.all()

        #2.实例化分页对象
        page_object = Pagination(request, queryset)

        context = {
            "search_data": search_data,

            'queryset': page_object.page_queryset, #分完页的数据
            "page_string": page_object.html()      #生成的页码
        }

        #返回到前端页面
        return render(request, 'prettynum_list.html', context)

在HTML页面中:

    {% for obj in queryset %}
            <th>{{ obj.xx }}</th>
            <td>{{ obj.xxx}}</td>
    {% endfor %}

    <ul class="pagination" >
        {{ page_string }}
    </ul>
"""
from django.utils.safestring import mark_safe
import copy

class Pagination(object):

    def __init__(self, request, queryset, page_size = 10, page_param="page", plus = 5):
        """
        :param request:请求的对象
        :param queryset:符合条件的数据(根据此数据进行分页处理)
        :param page_size:每页显示多少条数据
        :param page_param:获取在URL中传递的分页参数, 例如: /pretty/list/?page=21
        :param plus:页码显示当前页的前几页后几页
        """
        # 防止搜索出结果进行翻页时,URL参数没有了搜索参数
        query_dict = copy.deepcopy(request.GET)
        query_dict._mutable = True
        self.query_dict = query_dict

        self.page_param = page_param

        page = int(request.GET.get(page_param, 1))
        # 如果不是整数
        if type(page) != int:
            # 强制让页码为1
            page = 1
        # if page.isdecimal():
        #     page = int(page)
        # else:
        #     page = 1
        self.page = page

        self.page_size = page_size

        self.start = (page - 1) * page_size
        self.end = page * page_size

        # 每页展示的数据行数
        self.page_queryset = queryset[self.start:self.end]

        # 获取到符合条件的数据的总条数
        total_count = queryset.count()
        total_page_count, div = divmod(total_count, page_size)
        if div:
            total_page_count += 1
        self.total_page_count = total_page_count
        self.plus = plus

    def html(self):

        # 计算出显示当前页的前5页、后5页
        if self.total_page_count <= 2 * self.plus + 1:
            # 数据库中的数据比较少,都没有达到11项
            start_page = 1
            end_page = self.total_page_count
        else:
            # 数据库中的数据比较多 大于11项

            # 当前页小于5时, (小极值)
            if self.page <= self.plus:
                start_page = 1
                end_page = 2 * self.plus + 1
            else:
                # 当前页>5
                # 当前页+5>总页面
                if (self.page + self.plus) > self.total_page_count:
                    start_page = self.total_page_count - 2 * self.plus
                    end_page = self.total_page_count
                else:
                    start_page = self.page - self.plus
                    end_page = self.page + self.plus

        # 页码
        page_str_list = []

        self.query_dict.setlist(self.page_param, [1])
        # 首页
        page_str_list.append('<li><a href="?{}">首页</a></li>'.format(self.query_dict.urlencode()))

        # 上一页
        if self.page > 1:
            self.query_dict.setlist(self.page_param, [self.page - 1])
            prev = '<li><a href="?{}">上一页</a></li>'.format(self.query_dict.urlencode())
        else:
            self.query_dict.setlist(self.page_param, [1])
            prev = '<li><a href="?{}">上一页</a></li>'.format(self.query_dict.urlencode())
        page_str_list.append(prev)

        # 页面
        # range前取后不取,所以total_page_count+1
        for i in range(start_page, end_page + 1):
            self.query_dict.setlist(self.page_param, [i])
            # 给当前页加一个样式
            if i == self.page:
                ele = '<li class="active"><a href="?{}">{}</a></li>'.format(self.query_dict.urlencode(), i)
            else:
                ele = '<li><a href="?{}">{}</a></li>'.format(self.query_dict.urlencode(), i)
            page_str_list.append(ele)

        # 下一页
        if self.page < self.total_page_count:
            self.query_dict.setlist(self.page_param, [self.page + 1])
            prev = '<li><a href="?{}">下一页</a></li>'.format(self.query_dict.urlencode())
        else:
            self.query_dict.setlist(self.page_param, [self.total_page_count])
            prev = '<li><a href="?{}">下一页</a></li>'.format(self.query_dict.urlencode())
        page_str_list.append(prev)

        # 尾页
        self.query_dict.setlist(self.page_param, [self.total_page_count])
        page_str_list.append('<li><a href="?{}">尾页</a></li>'.format(self.query_dict.urlencode()))

        search_string = """
        <li>
            <form style="float: left; margin-left: -1px" method="get">
                <input type="text" name="page"
                       style="position: relative; float: left; display: inline-block; width: 80px; border-radius: 0;"
                       class="form-control" placeholder="页码">
                <button style="border-radius: 0" class="btn btn-default" type="submit">跳转</button>
            </form>
        </li>
        """
        page_str_list.append(search_string)
        page_string = mark_safe("".join(page_str_list))
        return page_string

  

标签:count,分页,self,param,dict,组件,query,page
From: https://www.cnblogs.com/kekeeleven/p/17799523.html

相关文章

  • 一个类似于Gridster的栅格布局系统Vue组件
    哈喽,我是老鱼,一名致力于在技术道路上的终身学习者、实践者、分享者!VueGridLayout是一个类似于Gridster的栅格布局系统,适用于Vue.js,灵感来源于ReactGridLayout。特性可拖拽可调整大小静态部件(不可拖拽、调整大小)拖拽和调整大小时进行边界检查增减部件时避......
  • 分页查询任务列表 支持SQL
    ///<summary>///分页查询任务列表///</summary>///<paramname="where"></param>///<returns></returns>publicPageModel<TaskModel>GetListByPageView(TaskSearchModelwhere){introwCount=0;try......
  • k8s及其基本组件下载
    k8s_install.sh!/usr/bin/envbashset-eget_version(){containerd_version="v1.7.7"runc_version="v1.1.9"cni_version="v1.3.0"cri_tools_version="v1.27.1"kubernetes_version="v1.27.7"kubernetes_release_v......
  • 34-Vue脚手架-组件的自定义事件(使用自定义事件优化Todo-List案例)
    组件的自定义事件1.一种组件间通信的方式,适用于子组件===>父组件(这里也可以使用props传递数据进行实现)2.使用场景:A是父组件,B是子组件,B想给A传数据,那么就要在A中给B绑定自定义事件(事件的回调在A中)3.绑定自定义事件:1)第一种方式,在父组件中<!--通过父组件给子组件绑定一个......
  • 【Java 进阶篇】深入了解 Bootstrap 组件
    Bootstrap是一个流行的前端框架,提供了丰富的组件,用于创建各种网页元素和交互效果。这些组件可以帮助开发者轻松构建漂亮、响应式的网页,而无需深入的前端开发知识。在本文中,我们将深入探讨Bootstrap中一些常用的组件,适合初学者,帮助他们更好地理解和应用这些元素。什么是Bootstra......
  • 四、基本组件
    1.Designer设计师Designer程序是Qt官方推出的专为设计人员使用的UI设计工具,程序员可以使用此工具大幅降低UI设计的代码量。Designer设计文件的格式是.ui,需要配合同名的头文件与源文件使用。.ui文件通常被称为界面文件,其内部是xml语法的代码。当新建项目时,选中选项,此时的项目就会......
  • Hadoop三大组件(HDFS,MapReduce,Yarn)
    1、HDFSHDFS是Hadoop分布式文件系统。一个HDFS集群是由一个NameNode和若干个DataNode组成的。其中NameNode作为主服务器,管理文件系统的命名空间和客户端对文件的访问操作;集群中的DataNode管理存储的数据。2、MapReduceMapReduce是一个软件框架,基于该框架能够容易地编写......
  • vant DropdownMenu 下拉菜单组件穿透问题
    问题描述:在微信小程序中使用Vant组件库提供的DropdownMenu下拉菜单组件时,当内容超过一定高度时,随着页面内容部分的滚动,顶部会出现部分间隙,继续划动会导致底层页面的滚动,这就是滚动穿透。解决方案(禁止滚动穿透)DropdownMenu下拉菜单组件内部结合了Popup弹出层组件。目前,Popup组件......
  • java web jsp 分页显示代码
    <%@pagelanguage="java"contentType="text/html;charset=gb2312"pageEncoding="gb2312"%><%@pageimport="java.sql.*,chap03.*"%><!DOCTYPEhtmlPUBLIC"-//W3C//DTDHTML4.01Transitional//EN&qu......
  • Vue2 实现印章徽章组件
    Vue2实现印章徽章组件需要实现的组件效果:该组件有设置颜色、大小、旋转度数和文本内容功能。一、组件实现代码<template><divclass="first-ring"v-bind="getBindValue":class="getStampBadgeClass":style="{transform:`rotate(${rotate}deg)`}&qu......