Django后端分页及前端显示效果

1.导入分页相关模块

from django.core.paginator import Paginator,EmptyPage,PageNotAnInteger

2.将对象分页,如下是按每页3条记录分页

customer_list = models.Customer.objects.all()

paginator = Paginator(customer_list,3)

翻到第1页:paginator.page(1)

翻到最后一页:paginator.page(paginator.num_pages)

当前页:customer_list.number

所有页内循环:for page_num in customer_list.paginator.page_range

3.前端控制

前端显示左翻页“<",页面数字,右翻页">"

 1         <nav>
 2           <ul class="pagination">
 3             {% if customer_list.has_previous %}
 4                 <li class="">
 5                     <a href="?page={{ customer_list.previous_page_number }}" aria-label="Previous">
 6                         <span aria-hidden="true">&laquo;</span>
 7                     </a>
 8                 </li>
 9             {% endif  %}
10               {% for page_num in customer_list.paginator.page_range %}
11                    {%  guess_page customer_list.number page_num  %}
12             {% endfor %}
13            {% if customer_list.has_next %}
14                 <li class=""><a href="?page={{ customer_list.next_page_number }}" aria-label="Next"><span aria-hidden="true">&raquo;</span></a></li>
15            {% endif %}
16           </ul>
17         </nav>

自定义的函数,用于显示页面数字,当是当前时调用样式显示,否则无样式,如下:

def guess_page(current_page,loop_num):
    offset = abs(current_page - loop_num)
    if offset <3:
        if current_page == loop_num:
            page_ele = ‘‘‘<li class="active"><a href="?page=%s">%s</a></li>‘‘‘ %(loop_num,loop_num)
        else:
            page_ele = ‘‘‘<li class=""><a href="?page=%s">%s</a></li>‘‘‘ %(loop_num,loop_num)
        return format_html(page_ele)
    else:
        return ‘‘

 
时间: 2024-10-10 08:58:38

Django后端分页及前端显示效果的相关文章

django后端safe和前端safe的方法

后端 def make_safe(request):    from django.utils.safestring import mark_safe    temp = "<a href='http://www.baidu.com '>百度</a>"    newtemp = mark_safe(temp)    return render(request, 'make_safe.html', {'temp': newtemp}) 全段 |safe

旨在脱离后端环境的前端开发套件 - IDT Server篇

IDT,一个基于Nodejs的,旨在脱离后端环境的前端开发套件,目的就是能让前端开发完全脱离后端的环境,无论后端是什么模板引擎(主流),都能应付自如. IDT主要包括两大部分:Server + Build,这一篇主要介绍Server篇. 为了辅助前端开发,一个本地的类似于Apache的服务器是少不了的,但是有个问题,如果项目中的html,是php的smarty模板怎么办?使用纯粹的静态服务器是不行的,因为对前端开发来说,这个html必须由php的smarty模板引擎来解析,前端人员不懂php怎么

旨在脱离后端环境的前端开发套件 - IDT之Server篇

IDT,一个基于Nodejs的,旨在脱离后端环境的前端开发套件,目的就是能让前端开发完全脱离后端的环境,无论后端是什么模板引擎(主流),都能应付自如. IDT主要包括两大部分:Server + Build,这一篇主要介绍Server篇. 为了辅助前端开发,一个本地的类似于Apache的服务器是少不了的,但是有个问题,如果项目中的html,是php的smarty模板怎么办?使用纯粹的静态服务器是不行的,因为对前端开发来说,这个html必须由php的smarty模板引擎来解析,前端人员不懂php怎么

datatables后端分页

0x01 缘由 平时较少涉及前端,这次本以为模板中有表单,分页跳转搜索功能都比较齐全,可以高枕无忧,但是细看模板中的分页跳转是不需要与后台交互的,数据一次性写在前端,再有前端插件完成分页. 这种方式肯定是不可行的,这次要做的可以看做资产管理,服务器+主机量级很大,一个机器生成一条 <th>,第一次请求的前端代码怕是要崩掉. 所以合理采用的还是后端分页 0x02 分页方式 团队项目里看过的几种后端分页方式: 1. Paginator + render渲染整个页面,这种方式比较好理解,但是每一次跳

微信小程序登录对接Django后端实现JWT方式验证登录

先上效果图 点击授权按钮后可以显示部分资料和头像,点击修改资料可以修改部分资料. 流程 1.使用微信小程序登录和获取用户信息Api接口 2.把Api获取的用户资料和code发送给django后端 3.通过微信接口把code换取成openid 4.后端将openid作为用户名和密码 5.后端通过JSON web token方式登录,把token和用户id传回小程序 6.小程序将token和用户id保存在storage中 下次请求需要验证用户身份的页面时,在header中加入token这个字段 微信

django 自定义分页模块

django 自定义分页模块 from django.shortcuts import render, HttpResponse, redirect from django.utils.safestring import mark_safe class Page(object): def __init__(self, current_page): self.current_page = int(current_page) @property def start(self): return (se

【系列】后端程序员前端之路(2016/3/24更新)

后端程序员前端之路01 后端程序员前端之路02--CSS选择器详解 后端程序员前端之路03--HTML语义化 后端程序员前端之路04--html元素分类 后端程序员前端之路05--盒子模型详解 后端程序员前端之路06--布局模型,颜色值,长度值 --不断更新中,如果有帮助到你,请点“推荐”.你的支持,是我坚持的动力O(∩_∩)O谢谢~

localStorage + 配置url 前后端分离之前端先行

关于localStorage和sessionStorage的基础说明说明网上一大堆,这里说下自己的一个亲身应用. 使用localStorage配置url,使前端代码更方便适配测试和真实环境: 大家都知道如果前后端分离的话,往往很多时候可以前端先行,不依赖于后台(接口得提前定义好). 但是存在两个问题: 1.前后端分离后前端虽然不依赖于后台,但是依赖ajax返回的结果 2.往往自己造的mock地址跟真是环境的url地址不一致,如果写死了,则需要改动很大一片 先说第二个问题,之前在一个项目上看到的时

[后端人员耍前端系列]KnockoutJs篇:使用WebApi+Bootstrap+KnockoutJs打造单页面程序

一.前言 在前一个专题快速介绍了KnockoutJs相关知识点,也写了一些简单例子,希望通过这些例子大家可以快速入门KnockoutJs.为了让大家可以清楚地看到KnockoutJs在实际项目中的应用,本专题将介绍如何使用WebApi+Bootstrap+KnockoutJs+Asp.net MVC来打造一个单页面Web程序.这种模式也是现在大多数公司实际项目中用到的. 二.SPA(单页面)好处 在介绍具体的实现之前,我觉得有必要详细介绍了SPA.SPA,即Single Page Web App