分页功能

12345huangchun 2019-01-31 原文

分页功能

  我们在浏览很多网页的时候,由于数据太多,很多时候不能放在一个页面上,此时就需要分页功能。比如我们看到的博客园最下面的分页栏,它是动态的显示的,比如虽然说总页数会是100页,但我们不能把100页都显示出来,始终显示当前页的前5页和后5页,然后还有首页、尾页、上一页、下一页等功能,今天我就来实现这一功能,我们可以把它封装成一个类,以后哪里需要了,直接引用就行了。

  一、把分页功能定义成一个类

  pagination.py

class Pagination(object):
    def __init__(self,current_page,all_count,request,one_count=10,one_pages=11):
        self.current_page=current_page          #这是当前页
        self.all_count=all_count                #这是数据的总数量
        self.request=request
        self.one_count=one_count                 #这是一页能展示的数据量
        self.one_pages=one_pages                #这是一页能放几个页码
        self.mid_num=(one_pages-1)/2             #这是当前页码前后可以有几个页码数
        if all_count%one_count==0:
            self.pages=all_count//one_count      #这是总页码数
        else:
            self.pages=all_count//one_count+1

    @property
    def start(self):                          #这是拿到这一页数据的开头数
        return (self.current_page-1)*self.one_count
    @property
    def end(self):                          #这是拿到这一页数据的结尾数
        if self.current_page==self.pages:
            return self.all_count
        return self.current_page*self.one_count
def get_page(self): #这是当前页真正展示的页码及每个页码的路径,在这一步,用到了保留上次请求数据的技术,使得我们跳到其他页码后,搜索条件等请求数据依然保留,返回的是一个列表,里面放的就是展示页码的前端代码 content=copy.deepcopy(self.request.GET) #对于request.GET是不允许修改,但当我们深拷贝之后,就可以,content是这次请求进来后的请求数据 data_list=[] if self.pages <= self.one_pages: #这是当数据的总页码数小于每一个页可以显示的页码数时,我们的页码就没必要动态变化了,直接让所有页码显示出来就行了 first_page=1 #所以,页码开始数为1 last_page=self.pages #页码结束数为总页码数
else: #这是总页码数大于一页能显示的页码数时,就需要动态的显示页码,一般情况下 if self.current_page<=self.mid_num: #当当前页码的前面页码数小于我们设定的当前页码前要显示的页码数时,比如我们设定的mid_num为5,但我现在是第3页,前面没有5个页码 first_page=1 #页码开始数为1 last_page=self.one_pages #页码结束数为一页能显示的页码数
elif self.current_page+self.mid_num>self.pages: #总页码为20,当前页码为18,mid_num为5,但后面不够5个页码 last_page=self.pages #页码结束数为总的页码数 first_page=self.pages-self.one_pages+1 #开始数为总页码数减去一页能显示的页码数
else: #这是前后都够mid_num=5个页码的 first_page=self.current_page-self.mid_num #开始数为当前页码数减去mid_num last_page=self.current_page+self.mid_num     #结束数为当前页码数加上mid_num
#上一页和首页
     content[
'page']=1 #首页就是page为1的,我们把请求数据的page改为1 data_list.append(mark_safe('<nav aria-label="Page navigation" style="position: absolute;bottom: 20px;left:0;right:0;text-align: center" >' '<ul class="pagination"><li><a href="?%s" aria-label="Previous"><span aria-hidden="true">首页</span></a></li>'%content.urlencode())) if self.current_page==1: #这是上一页,把page改为当前页码数减1,但当现在页码为1时,上一个就没有设置值 data1=mark_safe('<li class="disabled"><span aria-hidden="true">上一页</span></li>') else: content['page']=self.current_page-1 data1=mark_safe('<li><a href="?%s" aria-label="Previous"><span aria-hidden="true">上一页</span></a></li>'%(content.urlencode())) data_list.append(data1) for i in range(int(first_page),int(last_page+1)): #从页码开始数到结束数循环,给每一个页码加上前端代码,和请求路径,把page改为当前循环的页码数 content['page']=i if i==self.current_page: data_list.append('<li><li class="active"><a href="?%s">%s</a></li></li>'%(content.urlencode(),i)) else: data_list.append('<li><li><a href="?%s">%s</a></li></li>' % (content.urlencode(), i)) #下一页和尾页, if self.current_page==self.pages: #和上一页、首页 一样 data2=mark_safe('<li class="disabled"><span aria-hidden="true">下一页</span></li>') else: content['page']=self.current_page+1 data2=mark_safe('<li><a href="?%s" aria-label="Next"><span aria-hidden="true">下一页</span></a></li>'%(content.urlencode())) data_list.append(data2) content['page']=self.pages data_list.append(mark_safe('<li><a href="?%s" aria-label="Previous"><span aria-hidden="true">尾页</span></a></li></ul></nav>'%content.urlencode())) data=''.join(data_list) #最好把列表里面的所有标签用空格连起来,返回,前端拿到这个标签字符,直接用模板渲染就行了 return mark_safe(data)

  现在有一个页面上需要用到分页,去调用这个类。

  test.py

from pagination import Pagination
def show(request):
    pagination = Pagination(current_page,queryset.count(), request, one_count=2, one_pages=9)     #我们要传当前的页数,数据的总数,,一页可以展示的数据数,一页的页码数
    data_page = pagination.get_page()            #这是已经写好的页码的前端代码
    obj_list = queryset[pagination.start:pagination.end]            #这是得到这一页要展示的数据
    
    return render(request,'show.html',locals())

  show.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="/static/css/bootstrap.css">
    <script src="/static/jquery-3.3.1.js"></script>
    <script src="/static/js/bootstrap.js"></script>
</head>
<body>
    <div>{{obj_list}}</div>            #这是要展示的数据,格式还需要调整,循环这个列表,拿到每个对象,然后再取每个对象的值,用标签渲染
     {{ data_page }}                   #这是写好的页码代码,直接放在这里,就可以拿到页码
</body>
</html>

  展示效果,只需看最下面的页码,上面的数据,我是用标签渲染过的

 

发表于 2019-01-31 11:21 W的一天 阅读() 评论() 编辑 收藏

 

版权声明:本文为12345huangchun原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。
本文链接:https://www.cnblogs.com/12345huangchun/p/10292268.html

分页功能的更多相关文章

  1. 分页功能 封装代码

    分页功能 封装代码 目录 分页功能 封装代码 分页代码 逻辑和样式 View 使用示列 html 页面引用 b […]...

  2. 利用Bootstrap Paginator插件和knockout.js完成分页功能

    在最近一个项目中,需要结合一堆条件查询并对查询的结果数据完成一个简单分页功能,可是做着做着,自己的思路越来越模 […]...

随机推荐

  1. windows命令行切换目录

      1. 切换到C盘根目录 打开终端cmd后,输入cd C:\(一定要加上后面的反斜扛) 2.切换到C盘子目录 […]...

  2. 《手把手教你》系列练习篇之8-python+ selenium自动化测试 -压台篇(详细教程)

    1. 简介    本文是练习篇的最后一篇文章,虽然练习篇的文章到此就要和大家说拜拜了,但是我们的学习之路才刚刚 […]...

  3. 苹果手机便签怎么对备忘录内容执行置顶操作?具体操作步骤是什么

    软件还支持对便签备忘录内容执行“置顶”操作,让重要的备忘录内容在便签软件顶部显示。怎么样?是不是很人性化啊?不 […]...

  4. Maven快速入门(三)Maven的坐标和仓库

    之前通过一个helloworld的例子来说一说如何创建maven项目以及maven项目的项目结构,然后讲mav […]...

  5. 开发者账号申请流程(公司)

    开发者账号申请流程(公司) 1.申请链接 https://developer.apple.com/progra […]...

  6. 【转】Excel 使用技巧

    如果我们在用Excel XP处理庞大的数据信息时,不注意讲究技巧和方法的话,很可能会花费很大的精力。因此如何巧 […]...

  7. c#中的委托01

    delegate 是表示对具有特定参数列表和返回类型的方法的引用的类型。 在实例化委托时,你可以将其实例与任何 […]...

  8. TensorFlow + Keras 实战 YOLO v3 目标检测图文并茂教程

    运行步骤 1.从 YOLO 官网下载 YOLOv3 权重 wget https://pjreddie.com/ […]...

展开目录

目录导航