文档章节

Django+boostrap分页(1)

mhye
 mhye
发布于 2016/10/09 00:16
字数 900
阅读 111
收藏 0
点赞 0
评论 0

源起

我想要优雅地使用bootstrap+ django pagination来实现分页,忽然发现不知道该如何做起 我照葫芦画瓢知道了bootstrap怎么使用列表组件,也大概知道怎么使用pagination,但是放到一起我就彻底懵逼了。

资料收集

bootstrap 基本分页演示

    <div class="pagination">
      <ul>
        <li><a href="#">Prev</a></li>
        <li><a href="#">1</a></li>
        <li><a href="#">2</a></li>
        <li><a href="#">3</a></li>
        <li><a href="#">4</a></li>
        <li><a href="#">5</a></li>
        <li><a href="#">Next</a></li>
      </ul>
    </div>

如果想使用禁用和活动状态,可以使用".disable"".active"选项。

参见:bootstrap分页说明.

Pageination可以做的事情

首先,Paginator是一个类,它初始化时接受一个列表或者元组或者是Django的查询结果集(queryset),以及分组大小,然后生成一个具有一系列属性的对象。下面的代码演示了如何初始化以及操作Pageination对象,不要担心示例里操作的是列表,完全可以拿来操作查询结果。

from django.core.paginator import Paginator
objects = ['john', 'paul', 'george', 'ringo']
p = Paginator(objects, 2)
print(p.count) #4
print(p.num_pages)#2
print(p.page_range) #range(1,3),2.x是[1,2]

page1 = p.page(1)
page1
<Page 1 of 2>
page1.object_list
['john', 'paul']

page2 = p.page(2)
page2.object_list #['george', 'ringo']
page2.has_next()    #False
page2.has_previous() #True
page2.has_other_pages()#True
page2.next_page_number()#返回错误信息
page2.previous_page_number()#1
page2.start_index() # 本页的第一个项:3
page2.end_index() # 本页的最后一个项:4
p.page(0)
Traceback (most recent call last):
'''
上面的例子可以看到一些有价值的信息,Paginator对象可以返回count计数,num_pages页数,以及一个枚举对象page_range,分页大小:p.per_page。作为当前页,p.page(1),可以退单上一页和下一页,本页的开始和结束序号、
'''

可以在接受到适当的请求时,向模板返回一个适当的分页对象上下文,模板根据上下文来生成分页

初步构想的模板文件。

模板中迭代pages生成分页html代码

实践

花了点时间初步实现了下,本来就是很简单的东西,没什么好说的,为了方便演示,使用列表代替Queryset作为查询对象

视图函数

#views.py
from django.shortcuts import render
from django.core.paginator import Paginator

#上下文将pages,current_page传入到模板文件中
def page_view(request,page_number = '1'):
    #看到这个不用困惑,就当成教材里的pages=Article.objects.all()这样的查询结果好了
    pages = list(range(100))
    p = Paginator(pages,8)
    current_page = p.page(int(page_number))
    context ={'pages':p,'current_page':current_page}
    return render(request,'blogs/page.html',context)

URL配置

#这里一切从简,只是为了制造一个可以传入参数的,形式为/page/{number}的url而已,如果你不明白
#我在做什么,那说什么都是多余的
from django.conf.urls import url
from blogs import views
urlpatterns = [
                url(r'^page/(?P<page_number>\d+)$',views.page_view,name = "page"),
                ]

模板配置

//假定传入了分页器pages和当前页current_page.

<!--这里集成模板导入的bootstrap js和css就不展示了-->
{% extends 'blogs/base.html' %}
{% block page_block %}
<ul class = 'pagination'>
//首先如果有前一页,则生成前一页
{% if current_page.has_previous %}
    <li class = 'previous'>
        <a href =  {{ current_page.previous_page_number }}>上一页</a>
    </li>
{% endif %}
{% for number in pages.page_range %}
    <li
        {% if number == current_page.number %}
            class = "activate"
        {% endif %}>
        <a href =  {{ number }}>{{ number }}</a>
    </li>
{%  endfor %}
//让后如果当前页有后一页,则生成后一页
{% if current_page.has_next %}
    <li class = 'next'>
        <a href = {{ current_page.next_page_number }}>下一页</a>
    </li>
{% endif %}
</ul>
{% endblock %}

最终结果

效果展示 首页 末叶

最后

这个效果怎么说呢,django自带的模板看起来和jinjia2很像,实际上有那么一点变扭。

bootstrap生成列表不用太费神,但是一次显示这么多分页似乎也不是很妥,还可以缩减下可视的列表范围

© 著作权归作者所有

共有 人打赏支持
mhye
粉丝 0
博文 12
码字总数 7390
作品 0
合肥
帝国cms采集图文教程(中)

上一讲我们介绍了帝国cms采集基本流程,那么我们这一讲介绍帝国cms如何采集内容分页。不少的同学在采集过程中,列表页和内容页都能可以很好地设定正则,但往往失败在内容分页正则上,主要是对...

国外网站大全 ⋅ 2012/03/12 ⋅ 0

laravel5自定义分页

laravel5分页处理与laravel4略有区别,laravel5提供了更方便的处理方式,可以方便满足不同分页展示。 laravel4自定义分页:http://php2012web.blog.51cto.com/5585213/1539601 laravel分页处...

ttlxihuan ⋅ 2016/09/26 ⋅ 0

分页逻辑代码

实现了如下图的分页效果 思路:生成哪些页码,例如1-6页,2-7页,是由后台控制生成的。 假设我们决定生成的分页条,上面有 9 个超链接供点击。 并且我们的分页信息包含总页数,当前为第几页等...

iron_will ⋅ 2016/06/07 ⋅ 0

三种常用的SQL分页方法

应一个朋友的要求,贴上收藏的sql常用分页的办法~~   表中主键必须为标识列,[ID] int IDENTITY (1,1)   1.分页方案一:(利用Not In和SELECT TOP分页)   语句形式: SELECT TOP 页...

xiahuawuyu ⋅ 2012/08/04 ⋅ 0

CYQ.Data 数据框架 数据库分页方式及存储过程[SQL2000/SQL2005/Oracle]

在 CYQ.Data 分页是内部集成的功能,针对不同的数据库,使用不同的分页形式。 1:Access :集成:使用3次Top分页 2:MySql :集成,使用Limit N分页 3:Sqlite :集成,使用Limit N分页 4:S...

晨曦之光 ⋅ 2012/03/09 ⋅ 0

thinkphp简洁、美观、靠谱的分页类

废话不多说先上图预览下;即本博客的分页; 这个分页类是在thinkphp框架内置的分页类的基础上修改而来; 原分页类的一些设计,在实际运用中感觉不是很方便; 1:只有一页内容时不显示分页; ...

白俊遥 ⋅ 2016/03/06 ⋅ 0

C# 插入、删除Excel分页符

概述 对Excel表格设置分页对我们预览、打印文档时是很方便的,特别是一些包含很多复杂数据的、不规则的表格,为保证打印时每一页的排版美观性或者数据的前后连接的完整性,此时的分页符就发挥...

E_iceblue ⋅ 05/18 ⋅ 0

mysql分页技术分析

转:http://www.scienjus.com/app-server-paging/ APP分页技术 移动端套用传统分页的缺点 目前数据分页一般分为两种类型:传统网站比较常见的电梯式分页布局及移动端比较常见的流式分页布局。...

北极之北 ⋅ 2016/02/25 ⋅ 4

Mysql 分页语句Limit用法

1、Mysql的limit用法 在我们使用查询语句的时候,经常要返回前几条或者中间某几行数据,这个时候怎么办呢?不用担心,mysql已经为我们提供了这样一个功能。 SELECT * FROM table LIMIT [off...

李有常 ⋅ 2015/08/22 ⋅ 0

hibernate中带查询条件的分页

所谓分页,从数据库中分,则是封装一个分页类。利用分页对象进行分页。 但,分页往往带查询条件。 分页类的三个重要数据:【当前页码数】,【数据库中的总记录数】,【每页显示的数据的条数】...

无信不立 ⋅ 2014/07/01 ⋅ 0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

Thrift RPC实战(二) Thrift 网络服务模型

TServer类层次体系 TSimpleServer/TThreadPoolServer是阻塞服务模型 TNonblockingServer/THsHaServer/TThreadedSelectotServer是非阻塞服务模型(NIO) 1 TServer抽象类的定义 内部静态类Args的...

lemonLove ⋅ 11分钟前 ⋅ 0

vim命令用法

第五章 vim命令 vim和vi几乎是一样的,唯一的区别就是当编辑一个文本时,使用vi不会显示颜色,而使用vim会显示颜色。 vim有三个模式:一般模式,编辑模式,命令模式。 系统最小化安装时没有安...

弓正 ⋅ 13分钟前 ⋅ 0

MyBatis源码解读之配置

1. 目的 本文主要介绍MyBatis配置文件解析,通过源码解读mybatis-config.xml(官方默认命名)、Mapper.xml 与Java对象的映射。 2. MyBatis结构 查看大图 MyBatis结构图,原图实在太模糊了,所以...

无忌 ⋅ 16分钟前 ⋅ 0

Ignite的jdbc与网格的连接方式的查询性能对比

环境: 数据量100万 Ignite2.5 Windows10 8g jdbc方式连接 import java.sql.Connection; import java.sql.DriverManager; import java.sql.PreparedStatement; import java.sql.ResultSet; i......

仔仔1993 ⋅ 31分钟前 ⋅ 0

收集自网络的wordpress 分页导航的代码教程(全网最全版)

wordpress 分页导航是用来切换文章的一个功能,添加了 wordpress 分页导航后,用户即可自由到达指定的页面数浏览分类文章,而这样的一个很简单功能却有很多朋友在用插件:WP-PageNavi,插件的...

Rhymo-Wu ⋅ 47分钟前 ⋅ 0

微服务 WildFly Swarm 入门

Hello World 就像前面章节中的其他框架一样,我们希望添加一些基本的 Hello-world 功能,然后在其上逐步添加更多的功能。让我们从在我们的项目中创建一个 HolaResources 开始。您可以使用您的...

woshixin ⋅ 54分钟前 ⋅ 0

Maven的安装和Eclipse的配置

1. 下载Maven 下载地址 2. 解压压缩包,放到自己习惯的硬盘中 此处我将其放到了 D:\Tools 目录下。 3. 配置环境变量 右键此电脑 -> 属性 -> 高级系统设置 -> 环境变量。 在系统变量中新建,变...

影狼 ⋅ 今天 ⋅ 0

python pip使用国内镜像的方法

国内源 清华:https://pypi.tuna.tsinghua.edu.cn/simple 阿里云:http://mirrors.aliyun.com/pypi/simple/ 中国科技大学 https://pypi.mirrors.ustc.edu.cn/simple/ 华中理工大学:http://......

良言 ⋅ 今天 ⋅ 0

对于url变化的spa应该如何使用微信jssdk

使用vue单页面碰上微信jssdk config验证失败的坑。第一次成功 之后切换页面全部失败,找到了解决方法,第一次验证成功后保存验证信息 切换页面时验证信息直接拿来用,加一个wx.error() 失败时...

孙冠峰 ⋅ 今天 ⋅ 0

Spring Cloud Gateway 一般集成

SCF发布,带来很多新东西,不过少了点教程,打开方式又和以前的不一样,比如这个SCG,压根就没有入门指导,所以这里写一个,以备后用。 一、集成 pom.xml <dependency> <groupI...

kut ⋅ 今天 ⋅ 0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

返回顶部
顶部