django(18)、分页组件开发

目录

  • 原生Paginator
  • 利用bootstrap改进Paginator
  • Pure_Pagination

原生Paginator

urls.py

from django.conf.urls import include, url
from app01 import views as app01_views

urlpatterns = [
    url(r'^index/$', app01_views.index),
]

views.py

from django.core.paginator import EmptyPage, PageNotAnInteger, Paginator
from django.shortcuts import render
from .models import Publisher

def index(request):
    publishers = Publisher.objects.all()
    paginator = Paginator(publishers, 2)  # 每页三条数据
    page = request.GET.get('page')

    try:
        contacts = paginator.page(page)
    except PageNotAnInteger:
        # If page is not an integer, deliver first page.
        contacts = paginator.page(1)
    except EmptyPage:
        # If page is out of range (e.g. 9999), deliver last page of results.
        contacts = paginator.page(paginator.num_pages)

    return render(request, 'index.html', locals())

index.html

<!DOCTYPE html>
<html lang="en">
{% load static %}
<head>
    <meta charset="UTF-8">
    <title>index</title>
    <link rel="stylesheet" href="{% static 'css/bootstrap.min.css' %}">
</head>
<body>

<div class="container">
    <h2>机构列表</h2>
    <div class="row">
        <table class="table table-striped">
            <tr>
                <td>机构名称</td>
                <td>机构地址</td>
            </tr>
            {% for p in contacts.object_list %}
            <tr>
                <td>{{ p.title }}</td>
                <td>{{ p.address }}</td>
            </tr>
            {% endfor %}
        </table>

        <div class="pagination">
            <span class="step-links">
                {% if contacts.has_previous %}
                    <a href="?page={{ contacts.previous_page_number }}">previous</a>
                {% endif %}

                <span class="current">
                    Page {{ contacts.number }} of {{ contacts.paginator.num_pages }}.
                </span>

                {% if contacts.has_next %}
                    <a href="?page={{ contacts.next_page_number }}">next</a>
                {% endif %}
            </span>
        </div>
    </div>
</div>
</body>
</html>

页面展示


利用bootstrap改进Paginator

参考:https://v3.bootcss.com/components/#pagination-default

index.html

<!DOCTYPE html>
<html lang="en">
{% load static %}
{% load my_tag %}
<head>
    <meta charset="UTF-8">
    <title>index</title>
    <link rel="stylesheet" href="{% static 'css/bootstrap.min.css' %}">
</head>
<body>

<div class="container">
    <h2>机构列表</h2>
    <div class="row">
        <table class="table table-striped">
            <tr>
                <td>机构名称</td>
                <td>机构地址</td>
            </tr>
            {% for p in contacts.object_list %}
            <tr>
                <td>{{ p.title }}</td>
                <td>{{ p.address }}</td>
            </tr>
            {% endfor %}
        </table>

        <nav aria-label="Page navigation">
          <ul class="pagination">
            <li>
                {% if contacts.has_previous %}
                    <a href="?page={{ contacts.previous_page_number }}">上一页</a>
                {% endif %}
            </li>

            {% pager_list contacts %}

            <li>
                {% if contacts.has_next %}
                    <a href="?page={{ contacts.next_page_number }}">下一页</a>
                {% endif %}
            </li>
          </ul>
        </nav>

    </div>
</div>
</body>
</html>

my_tag.py

from django.template import Library
from django.utils.safestring import mark_safe

register = Library()

@register.simple_tag
def pager_list(contacts):
    pager_str = ''
    for i in range(contacts.paginator.num_pages):
        active = ''

        # 若为当前页面页码,则高亮显示
        if contacts.number == i + 1:
            active = 'active'

        li_str = '<li class=%s><a href="?page=%s">%s</a></li>'                  % (active, i + 1, i + 1)

        pager_str += li_str
    return mark_safe(pager_str)

改进后显示

弊端

当数据很大,页码数量过多,那么一次性就不能将页码都显示出来。


Pure_Pagination

安装模块:

  • 源码下载:https://github.com/jamespacileo/django-pure-pagination
  • 利用pip安装下载后的zip文件。

setting.py

INSTALLED_APPS = (
    'pure_pagination',
)

PAGINATION_SETTINGS = {
    'PAGE_RANGE_DISPLAYED': 3,
    'MARGIN_PAGES_DISPLAYED': 2,
    'SHOW_FIRST_PAGE_WHEN_INVALID': True,
}

PAGE_RANGE_DISPLAYED is the number of pages neighbouring the current page which will be displayed (default is 10)

MARGIN_PAGES_DISPLAYED is the number of pages neighbouring the first and last page which will be displayed (default is 2)

views.py

from django.shortcuts import render
from .models import Publisher
from pure_pagination import Paginator, EmptyPage, PageNotAnInteger

def index(request):
    publishers = Publisher.objects.all()

    try:
        # 获取页码数
        page = request.GET.get('page', 1)
    except PageNotAnInteger:
        page = 1

    p = Paginator(publishers, request=request, per_page=1)
    contacts = p.page(page)

    return render(request, 'index.html', locals())

index.html

方式1:没有任何样式

{{ contacts.render }}

方式2:

<!DOCTYPE html>
<html lang="en">
{% load static %}
{% load my_tag %}
<head>
    <meta charset="UTF-8">
    <title>index</title>
    <link rel="stylesheet" href="{% static 'css/bootstrap.min.css' %}">
</head>
<body>

<div class="container">
    <h2>机构列表</h2>
    <div class="row">
        <table class="table table-striped">
            <tr>
                <td>机构名称</td>
                <td>机构地址</td>
            </tr>
            {% for p in contacts.object_list %}
            <tr>
                <td>{{ p.title }}</td>
                <td>{{ p.address }}</td>
            </tr>
            {% endfor %}
        </table>

    {% load i18n %}
    <nav >
        <ul class="pagination{% if size %} pagination-{{ size }}{% endif %}">
            {% if contacts.has_previous %}
                <li class="previous">
                    <!--此处携带当前页的过滤字段参数,-->
                    <a href="?{{ contacts.previous_page_number.querystring }}"
                       aria-label="{% trans 'previous page' %}">
                        <span aria-hidden="true">上一页</span>
                        {% if verbose %}<span class="hidden-xs">{% trans 'previous page' %}</span>{% endif %}
                    </a>
                </li>
            {% else %}
                <li class="previous disabled">
                    <span>
                        <span aria-hidden="true">上一页</span>
                        {% if verbose %}<span class="hidden-xs">{% trans 'previous page' %}</span>{% endif %}
                    </span>
                </li>
            {% endif %}

            {% for page in contacts.pages %}
                {% if page %}
                    {% if page == contacts.number %}
                        <li class="active">
                            <a href="?{{ page.querystring }}">{{ page }} <span
                                    class="sr-only">({% trans 'current page' %})</span></a>
                        </li>
                    {% else %}
                        <li>
                            <a href="?{{ page.querystring }}">{{ page }}</a>
                        </li>
                    {% endif %}
                {% else %}
                    <li class="disabled">
                        <span>...</span>
                    </li>
                {% endif %}
            {% endfor %}

            {% if contacts.has_next %}
                <li class="next">
                    <a href="?{{ contacts.next_page_number.querystring }}" aria-label="{% trans 'next page' %}">
                        {% if verbose %}<span class="hidden-xs">{% trans 'next page' %}</span>{% endif %}
                        <span aria-hidden="true">下一页</span>
                    </a>
                </li>
            {% else %}
                <li class="next disabled">
                    <span>
                        {% if verbose %}<span class="hidden-xs">{% trans 'next page' %}</span>{% endif %}
                        <span aria-hidden="true">下一页</span>
                    </span>
                </li>
            {% endif %}
        </ul>
    </nav>

    </div>
</div>
</body>
</html>

5、最终效果展示

原文地址:https://www.cnblogs.com/fqh202/p/9456602.html

时间: 08-10

django(18)、分页组件开发的相关文章

Django之Form组件

Django的Form主要具有一下几大功能: 生成HTML标签 验证用户数据(显示错误信息) HTML Form提交保留上次提交数据 初始化页面显示内容 小试牛刀 1.创建Form类 from django.forms import Form from django.forms import widgets from django.forms import fields class MyForm(Form): user = fields.CharField( widget=widgets.Tex

Django之ModelForm组件

1.Django之ModelForm组件 ModelForm a. class Meta: model, # 对应Model的 fields=None, # 字段 exclude=None, # 排除字段 labels=None, # 提示信息 help_texts=None, # 帮助提示信息 widgets=None, # 自定义插件 error_messages=None, # 自定义错误信息(整体错误信息from django.core.exceptions import NON_FIE

django 简易博客开发 1 安装、创建、配置、admin使用(转)

Django 自称是“最适合开发有限期的完美WEB框架”.本文参考<Django web开发指南>,快速搭建一个blog 出来,在中间涉及诸多知识点,这里不会详细说明,如果你是第一次接触Django ,本文会让你在感性上对Django有个认识,完成本文操作后会让你有兴趣阅读的相关书籍和文档. 废话少说,come on!! 本操作的环境: =================== Windows 7/10 python 2.7 Django 1.8.2 =================== 创建

饿了么基于Vue2.0的通用组件开发之路(分享会记录)

Element:一套通用组件库的开发之路 Element 是由饿了么UED设计.饿了么大前端开发的一套基于 Vue 2.0 的桌面端组件库.今天我们要分享的就是开发 Element 的一些心得. 官网:http://element.eleme.io/#/github:https://github.com/ElemeFE/element ## 设计目的 大部分项目起源都是源于业务方的需求,Element 也是一样.随着公司业务发展,内部开始衍生出很多后台系统,UED 部门也接到越来越多的设计需求,

javascript组件开发之基类继承实现

上一篇文章大概的介绍了一下关于javascript组件的开发方式,这篇文章主要详细记一下基类的编写,这个基类主要是实现继承的功能 为什么要封装基类? 由于这次重构项目需要对各种组件进行封装,并且这些组件的实现方式都差不多,为了便于管理,让代码尽量统一,所以到对组件封装一个base基类(javascript没有类的概念,暂且这样叫吧),关于javascript的oo实现:可以参考这篇文章javascript oo实现:写得很赞,膜拜,我改写的这个基于John Resig的实现方式. 基类的封装方式

电子商务系统的设计与实现(十三):分页组件,从前到后,从JS到Java

一.概述   学习实践Web开发5年多了,直到今天,我才算真正实现了最基本最常用的分页组件. 包括:    a.前端JS异步加载并渲染:    b.前端JSP.Freemarker.Struts标签渲染:    c.后端分页       自己写具体的分页算法和逻辑.       使用Mybatis分页插件. 今天,重点介绍下前端JS异步分页,简短介绍下后端Java提供数据.  二. 关键数据结构 public class PageVo { /** 总记录数 */ protected Intege

vue分页组件table-pagebar

之前一直接触都是原始的前端模型,jquery+bootstrap,冗杂的dom操作,繁琐的更新绑定.接触vue后,对前端MVVM框架有了全新的认识.本文是基于webpack+vue构建,由于之前的工作主要是基于java的服务端开发工作,对前端框架和组件的理解,不够深入,借此来记录在前端框架使用和构建中的点点滴滴. 此分页组件参照于bootstrap-datatable底部分页开发完成,相关参数增加自定义功能. 最终使用展现效果图如下,数据来源于cnodejs[https://cnodejs.or

js组件开发-移动端地区选择控件mobile-select-area

移动端地区选择控件mobile-select-area 由于之前的[js开源组件开发]js手机联动选择地区仿ios 开源git 很受欢迎,于是我又对其进行了一些优化,包括可选的范围变大了,添加了默认空首地址的功能,也添加了更多api参数,首先我们先来看下这次的效果图. 它的github地址请点击https://github.com/tianxiangbing/mobile-select-area 它的demo演示请点击 http://www.lovewebgames.com/jsmodule/m

第二百零九节,jQuery EasyUI,Pagination(分页)组件

jQuery EasyUI,Pagination(分页)组件 学习要点: 1.加载方式 2.属性列表 3.事件列表 4.方法列表 本节课重点了解 EasyUI 中 Pagination(分页)组件的使用方法,这个组件依赖于 LinkButton(按钮)组件.

Vue组件开发分享

在开始本文之前,你可能需要先了解以下相关内容: Vue.js  一款高性能轻量化的MVVM框架 Webpack  前端模块化代码构建工具 Vue组件介绍 基于vue.js高效的双向数据绑定特性,让我们在开发高可用组件时可以更加专注于数据逻辑开发: 忘记DOM操作,忘记事件绑定,让开发的专注力集中于数据上: 1.定义需要使用的数据及类型 2.在合适的时机更新数据 3.在模板上绑定数据与视图的映射关系 4.开放对外调用接口 代码 https://github.com/xiaoyunchen/vue-