django 分页与美化

最新推荐文章于 2024-05-01 22:08:00 发布
最新推荐文章于 2024-05-01 22:08:00 发布
阅读量413 收藏
点赞数
文章标签： python 前端 javascript ViewUI
原文链接：http://blog.51cto.com/13606158/2084619
版权

django提供了分页功能接口，比自己用切片来实现方便很多。
利用django的Paginator分页类，加上booststrap美化前端，实现分页功能。
目标效果如下：

  • a) 只显示n个标签页，如5。
    b) 选中变色。
    c) 上一页下一页功能。
    d) 若当前选中第一页，则不再显示上一页标签。
    e) 若当前选中最后页，则不再显示下一页。

图例
django 分页与美化
django 分页与美化

Pagination reffer：https://docs.djangoproject.com/en/1.11/topics/pagination/
主要功能测试
django 分页与美化

PART1： 核心功能实现

-

1.1 django代码

1.1.1 models.py
from django.db import models

class Articles(models.Model):
    title=models.CharField(max_length=32)
    content=models.TextField()

    def __str__(self):
        return self.title
1.1.2 创建测试数据
from  projectname.wsgi import  *
from app01.models import *

for i in range(1,96):
    title="title"+str(i)
    content="text"+str(i)
    Articles.objects.create(title=title,content=content)

django 分页与美化

1.1.3 views.py
from django.shortcuts import render,HttpResponse,redirect
from .models import Articles
from django.core.paginator import Paginator

def page_demo(request):
    articles=Articles.objects.all()
    paginator_obj=Paginator(articles,5) #每页5条
    # print(paginator_obj.page_range)

    request_page_num=request.GET.get('page',1)
    # print(request_page_num)
    page_obj=paginator_obj.page(request_page_num)

    total_page_number=paginator_obj.num_pages

    return render(request,'page_demo.html',{'page_obj':page_obj,'paginator_obj':paginator_obj})
1.1.4 url.py
from django.conf.urls import url,include
from django.contrib import admin
from app01 import  views

urlpatterns = [
    url(r'^page_demo/', views.page_demo),
]

1.2 前端代码

1.2.1 page_demo.html
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
{% for article in page_obj %}
    <div>## {{ article.title }} ##</div>
    <div>{{ article.content }}</div>
{% endfor %}

{% for page_num in paginator_obj.page_range %}
        <a href="?page={{ page_num }}">{{ page_num }}</a>
{% endfor %}

</body>
</html>

小tip： 页数列表paginator_obj.page_range 也可替换成page_obj.paginator.page_range 即由当前页obj关联。views函数可以不再向前端传递paginator_obj

1.2.1 页面

django 分页与美化

翻页

django 分页与美化

以上，功能已经实现，比较丑陋。下面进行页面美化和功能优化。
PART2 页面美化和功能优化

-

2.1 分页标签，显示5页

先写个分页标签显示功能，设定标签数，WEB_DISPLAY_PAGE值。
观察某搜索网站，当显示偶数页10页时，当前页前为5页，当前页后为4页。
django 分页与美化

#!/usr/bin/env python3
# -*- coding:utf-8 -*-
# info: edit by infaaf
# blog: https://blog.51cto.com/13606158

def get_pages(totalpage=1,current_page=1):
    """
    example: get_pages(10,1) result=[1,2,3,4,5]
    example: get_pages(10,9) result=[6,7,8,9,10]
    页码个数由WEB_DISPLAY_PAGE设定
    """
    WEB_DISPLAY_PAGE = 5
    front_offset = int(WEB_DISPLAY_PAGE / 2)
    if WEB_DISPLAY_PAGE % 2 == 1:
        behind_offset=front_offset
    else:
        behind_offset=front_offset -1

    if totalpage < WEB_DISPLAY_PAGE:
        return list(range(1,totalpage+1))
    elif current_page<=front_offset:
        return list(range(1,WEB_DISPLAY_PAGE+1))
    elif current_page>=totalpage-behind_offset:
        start_page=totalpage-WEB_DISPLAY_PAGE+1
        return list(range(start_page,totalpage+1))
    else:
        start_page=current_page-front_offset
        end_page=current_page+behind_offset
        return list(range(start_page,end_page+1))

if __name__ == '__main__':
    res=get_pages(10,1)
    print(res)

2.2 views.py改写 

from django.shortcuts import render,HttpResponse,redirect
from .models import Articles
from django.core.paginator import Paginator
# Create your views here.
from app01.mylib.paginator_disp_nums import get_pages

def page_demo(request):
    articles=Articles.objects.all()
    paginator_obj=Paginator(articles,5) #每页5条
    # print(paginator_obj.page_range)

    request_page_num=request.GET.get('page',1)
    # print(request_page_num)
    page_obj=paginator_obj.page(request_page_num)

    total_page_number=paginator_obj.num_pages
    print(total_page_number)
    page_list=get_pages(int(total_page_number),int(request_page_num))

    return render(request,'page_demo.html',{'page_obj':page_obj,'page_list':page_list})

2.3 前端页面中，分页部分加入bootstrap美化。 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>

<link rel="stylesheet" href="/static/plugin/bootstrap-3.3.7/css/bootstrap.css">

<body>
{% for article in page_obj %}
    <div>## {{ article.title }} ##</div>
    <div>{{ article.content }}</div>
{% endfor %}

<nav aria-label="Page navigation">
  <ul class="pagination">

    {% if  page_obj.previous_page_number > 0 %}
    <li>
      <a href="?page={{ page_obj.previous_page_number}}" aria-label="Previous">
        <span aria-hidden="true">«</span>
      </a>
    </li>
    {% endif %}

    {% for page_num in page_list %}
            {% if page_num == page_obj.number %}
                <li class="active"><a href="?page={{ page_num }}">{{ page_num }}</a></li>
            {% else %}
                <li><a href="?page={{ page_num }}">{{ page_num }}</a></li>
            {% endif %}
    {% endfor %}

    {% if page_obj.has_next %}
    <li>
      <a href="?page={{ page_obj.next_page_number }}" aria-label="Next">
        <span aria-hidden="true">»</span>
      </a>
    </li>
    {% endif %}

  </ul>
</nav>

<script src="/static/jquery-3.3.1.js"></script>
<script src="/static/plugin/bootstrap-3.3.7/js/bootstrap.js"></script>

</body>
</html>

完成，按页次获取不同内容，页面标签显示。
django 分页与美化

django 分页与美化

django 分页与美化

part3 更好的方式

自定义类，python django提供的Paginator欠缺以上标签页范围等，自己实现个差不多功能的。
有需要功能，再添加即可，方便扩展。

工具类

#/usr/bin/env python3
# author infaaf 
# 20180314

class Paginator:
    def __init__(self,obj_count=1,obj_perpage=1,pagetag_current=1,pagetag_dsp_count=1):
        '''
        :param obj_count: 获得 条目总数
        :param obj_perpage: 定义 每页显示条目数
        :param pagetag_current: 获得 当前页码
        :param pagetag_dsp_count: 定义 显示多少个页码
        '''
        self.obj_count=obj_count
        self.obj_perpage=obj_perpage

        try:
            pagetag_current=int(pagetag_current)
            if pagetag_current < 1:
                pagetag_current=1
            self.pagetag_current=pagetag_current
        except Exception as e:
            self.pagetag_current=1

        self.pagetag_dsp_count=pagetag_dsp_count
        self.pagetag_all_count=self.last_page

    @property
    def obj_slice_start(self):
        return (self.pagetag_current-1)*self.obj_perpage

    @property
    def obj_slice_end(self):
        return self.pagetag_current* self.obj_perpage

    @property
    def has_prev_page(self):
        return False if self.pagetag_current <= self.first_page else True

    @property
    def has_next_page(self):
        return False if self.pagetag_current >= self.last_page else True

    @property
    def prev_page(self):
        if self.pagetag_current==1:
            return 1
        elif self.pagetag_current > self.pagetag_all_count:
            return self.pagetag_all_count
        else:
            return self.pagetag_current-1

    @property
    def next_page(self):
        if self.pagetag_current >= self.pagetag_all_count:
            return self.pagetag_all_count
        else:
            return self.pagetag_current+1

    @property
    def first_page(self):
        return 1

    @property
    def last_page(self):
        if self.obj_count % self.obj_perpage == 0:
            pagecount=int(self.obj_count / self.obj_perpage)
        else:
            pagecount = int(self.obj_count / self.obj_perpage)+1
        return pagecount

    @property
    def pagetag_range(self):
        '''页码列表'''
        start=1
        end=1
        #pagetag页码数 奇数偶数情况下，前后多少个不同。
        if self.pagetag_dsp_count%2==1:
            before=int(self.pagetag_dsp_count/2)
            after=before
        else:
            before=int(self.pagetag_dsp_count/2)
            after=before-1

        if self.pagetag_all_count < self.pagetag_dsp_count:
            start=1
            end=self.pagetag_all_count+1
        elif self.pagetag_current <= before:  #当前页码过小时
            start=1
            end=self.pagetag_dsp_count+1
        elif self.pagetag_current >= self.pagetag_all_count - after: #当前页码过大时
            start=self.pagetag_all_count - self.pagetag_dsp_count +1
            end=self.pagetag_all_count+1
        else:
            start=self.pagetag_current - before
            end=self.pagetag_current + after +1
            # print("logging %s %s %s"%(self.pagetag_current,self.pagetag_dsp_count,self.pagetag_dsp_count))

        return range(start, end)

view

from django.shortcuts import render

# Create your views here.
from .lib.paginator import Paginator
art_list=[]
for i in range(1,200):
    a="art_"+str(i)
    art_list.append(a)

        # '''
        # :param obj_count: 获得 条目总数
        # :param obj_perpage: 定义 每页显示条目数
        # :param pagetag_current: 获得 当前页码
        # :param pagetag_dsp_count: 定义 显示多少个页码
        # '''

def pag(request):
    obj_count=len(art_list)
    obj_perpage=10
    pagetag_current=request.GET.get('page',1)
    pagetag_dsp_count=6
    paginator=Paginator(obj_count,obj_perpage,pagetag_current,pagetag_dsp_count)

    art_obj=art_list[paginator.obj_slice_start:paginator.obj_slice_end]

    return render(request,'pag.html',{'art_obj':art_obj,'paginator':paginator})

html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="/static/bootstrap-3.3.7/css/bootstrap.css">
</head>
<body>
{% load admin_urls %}
    {% for obj in art_obj %}
        {{ obj }}
    {% endfor %}

<nav aria-label="Page navigation">
  <ul class="pagination">
    <li>
        {% if paginator.has_prev_page %}
      <a href="{% url 'pag' %}?page={{ paginator.first_page }}" aria-label="Previous">
        <span aria-hidden="true">首页</span>
      </a>
        {% endif %}
    </li>

    <li>
        {% if paginator.has_prev_page %}
      <a href="{% url 'pag' %}?page={{ paginator.prev_page }}" aria-label="Previous">
        <span aria-hidden="true">«</span>
      </a>
        {% endif %}
    </li>

    {% for pagenum in paginator.pagetag_range %}
        {% if paginator.pagetag_current == pagenum %}
            <li class="active"><a href="{% url 'pag' %}?page={{ pagenum }}">{{ pagenum }}</a></li>
            {% else %}
            <li><a href="{% url 'pag' %}?page={{ pagenum }}">{{ pagenum }}</a></li>
        {% endif %}
    {% endfor %}

    <li>
        {% if paginator.has_next_page %}
      <a href="{% url 'pag' %}?page={{ paginator.next_page }}" aria-label="Next">
        <span aria-hidden="true">»</span>
      </a>
        {% endif %}
    </li>

    <li>
        {% if paginator.has_next_page %}
      <a href="{% url 'pag' %}?page={{ paginator.last_page }}" aria-label="Next">
        <span aria-hidden="true">尾页</span>
      </a>
        {% endif %}
    </li>

  </ul>
</nav>

    <script src="/static/jquery-3.3.1.js"></script>
    <script src="/static/bootstrap-3.3.7/js/bootstrap.js"></script>
</body>
</html>

转载于:https://blog.51cto.com/13606158/2084619

weixin_34138056
关注
Django结合Bootstrap完美实现分页效果
01-31
Django结合Bootstrap完美实现分页效果，其中控件的分页根据内容自适应调整
Django2.0：【Django2.0教程】14.优化分页展示 视频学习笔记
ZhangK9509的博客
05-15 1020
视频链接：【Django2.0教程】14.优化分页展示 当前页高亮 修改blog/templates/blog/blog_list.html： ... &amp;amp;amp;lt;ul class=&amp;amp;quot;pagination&amp;amp;quot;&amp;amp;amp;gt; &amp;amp;amp;lt;li&amp;amp;amp;gt;
Django分页器和优化
weixin_43989385的博客
11-01 712
Django分页器和优化 Django 自带分页器的使用 if request.method == 'GET': apwappdata = ApwAppData.objects.all() if not apwappdata: return render(request, 'all_crawl/show_all.html', {'msg'...
08--Django笔记--分页优化展示
12218的博客
06-27 206
08--Django笔记--分页优化展示
Django自带分页的一种优化方法
qq_45316770的博客
04-02 1972
django分页器的一种使用方法
Django自定义分页与bootstrap分页结合
09-21
### Django自定义分页与Bootstrap分页结合 在Web开发中，为了提高用户体验及服务器性能，分页功能是一项常见的需求。对于使用Python Web框架Django的开发者来说，Django提供了内置的分页功能，但有时候可能需要更...
Django框架实现的分页demo示例
09-19
在前端部分，我们使用Bootstrap库来美化分页样式。在HTML模板中，我们展示书籍列表，并将分页HTML代码传递给前端渲染。注意，为了安全和SEO优化，通常需要对链接进行处理，避免被搜索引擎误认为是垃圾链接，所以我们...
Django实现分页显示效果
01-20
- 标签中提到了`bootstrap分页`，这意味着前端页面可能采用了Bootstrap框架来美化分页样式。Bootstrap提供了预定义的分页组件，可以轻松创建美观的分页导航。 通过以上步骤，Django项目就能实现分页显示效果，提供...
Django框架实现分页显示内容的方法详解
09-19
下面将详细介绍如何在Django中实现分页功能，并结合Bootstrap样式进行美化。 首先，我们需要在Django视图（views.py）中处理分页逻辑。Django提供了`Paginator`类来帮助我们实现这一功能。假设你有一个名为`Blog`的...
Django实现网页分页功能
09-18
这里使用了Bootstrap的样式库来美化分页组件。 ```html {% load static %} <!DOCTYPE html> 淘宝 {% for good in page.object_list %} <h4>{{ good.name }} - {{ good.des }} {% endfor %} {% if ...
django 分页处理
z_x_xing_的博客
03-23 560
import re from django.core.paginator import Paginator, InvalidPage from django.db.models.query import QuerySet from django.utils.translation import ugettext_lazy as _ import mathclass Page(object): ...
django分页器
huangguangyourena的博客
07-21 3474
在搭建一个博客的时候，假设我们先写好几篇博客保存。刷新页面后我们就会看到这几篇博客。 但是如果有非常多的博客的话，我们需要一直往下拉才能看到剩下的博客，这样其实不太好。 所以在搭建博客的时候,django提供了一个分页器，叫paginator。 我们在在代码中导入 from django.core.paginator import Paginator 显然Paginator是一个类，所以...
Django2.3 用Bootstrap美化页面并添加相应的功能
weixin_44055272的博客
09-01 646
1.美化主页 2.美化详细页面 3. 美化表单 4. 添加上一篇下一篇功能 5. 添加分页的功能
Django 学习小组：博客开发实战第三周教程——文章列表分页和代码语法高亮
追梦人物的博客
06-03 1053
摘要：前两期教程我们实现了博客的 Model 部分，以及 Blog 的首页视图 IndexView，详情页面 DetailView，以及分类页面 CategoryView，前两期教程链接请戳： Django 学习小组：博客开发实战第一周教程 —— 编写博客的 Model 与首页面 Django 学习小组：博客开发实战第二周教程 —— 博客详情页面和分类页面 本周我们将继续完善我们
django分页的两种方式
04-13 115
第一种自定义分页： def pageDemo(request): ''' 自定义分页] :param request: :return: ''' currentpage=request.GET.get('pageIndex') pageSize=2 if not currentpage or int(currentpage)<1: ...
django的数据分页
qq_44778404的博客
08-18 157
views.py中
Python Django 大量数据如何做分页处理
最新发布
wjianwei666的专栏
05-01 86
当一个表中有很多符合查询条件的数据的时候，我们往往不需要把他们全部一次性取出来，那样对查询效率或者服务器性能来说都会是一个极大的挑战:例如最简单的商城，假设商城中有一万个数据，但我们在前端可能只会每次看到一页.该查询同样是通过子查询扫描字段id， 因为它不需要进行表的关联，而是一个简单的比较，在不知道上一页最大id的情况下，是比较推荐的用法。当然该查询的问题也在于，如果最大id不是连续的，则我们不一定能拿到这个id，比如当前在第3页，需要查询第5页的数据，就不行了。一个经典的思想就是分批展示和处理它们。
Django学习7-Bootstrap样式：分页
qq_19268039的博客
10-27 608
使用Bootstrap样式使用Bootstrap设置项目样式topics页面分页设置使用bootstrap样式设置分页 使用Bootstrap设置项目样式 topics页面分页设置 当前topics页面下显示全部的topic，没有分页设置，下面使用django.core.paginator.Paginator进行分页设置。 class Paginator(object_list, per_page...
Django 将一个因数据量过大，前端无法展示的接口，优化到2.8秒
qq442000755的博客
12-06 1235
函数功能逻辑： 读取CSV文件。 将文件内的点提取出来，处理成必要的格式。 通过JOSN把数据返回给前端。 之前的遇到的问题： 文件点数达到百万级，数据量太大，传给前端直接卡死。 解决方案： 加入视图四个角的坐标，对数据进行切片，地图放大后只处理窗口内的点的数据。 根据窗口内要处理的数据总数，隔一定的点再进行取点，再传给前端作为展示。（如一共有100W个点或以上，便每隔100个点取一个，限制传给前端的点的总数不超过10W。） 之后遇到的问题： 通过上面的两种方案，确实解决了前端因数据过大.
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值