Djano 自定义分页效果

Django本身提供了一个分页的类,直接导入就可以使用,不过这个方法只能在Django里面使用。武sir在大家从头写了一个自定义分页的类。这个类的实现的方法和内容基本上可以作为模板在任何语言里面使用,只需要修改对应的语法即可。

pagenation.py

__author__ = ‘Administrator‘
from django.utils.safestring import mark_safe
#上一篇说了,这是为了XSS的自动保护机制,为了让前端模板识别我们传递的html或者js格式字符串,我们需要标记为安全

class Page:

#构造函数,传入当前页,总共的行数,每一页的行数和显示多少页的数字
    def __init__(self, current_page, data_count, per_page_count=10, pager_num=7):
        self.current_page = current_page
        self.data_count = data_count
        self.per_page_count = per_page_count
        self.pager_num = pager_num
        
#@property这个装饰器的作用是把方法当做属性来调用,比如调用obj.start()就变成了obj.start        
#返回每一页的起始行数

    @property
    def start(self):
        return (self.current_page - 1) * self.per_page_count

#返回每一页的终止行数        
    @property
    def end(self):
        return self.current_page * self.per_page_count
        
#返回根据总的行数总共应该显示多少页
    @property
    def total_count(self):
        v, y = divmod(self.data_count, self.per_page_count)
        if y:
            v += 1
        return v
        
        
#返回最终的界面,参数接收url应该是啥样的,比如  user_list就是我们传入的基本的base,然后每一页后面加参数,比如http://127.0.0.1:8000/user_list/?p=4 
    def page_str(self, base_url):
        page_list = []
        
#根据不同的条件,判断start_index和end_index的值,这两个值代表当前页面显示的初始页码和终止页码        
        if self.total_count < self.pager_num:
            start_index = 1
            end_index = self.total_count + 1
        else:
            if self.current_page <= (self.pager_num + 1) / 2:
                start_index = 1
                end_index = self.pager_num + 1
            else:
                start_index = self.current_page - (self.pager_num - 1) / 2
                end_index = self.current_page + (self.pager_num + 1) / 2
                if (self.current_page + (self.pager_num - 1) / 2) > self.total_count:
                    end_index = self.total_count + 1
                    start_index = self.total_count - self.pager_num + 1

#下面是显示的页码界面,上一页放在页码前面,下一页放在页码后面,每一个页码都是以a标签,指向对应的url                  
        if self.current_page == 1:
            prev = ‘<a class="page" href="javascript:void(0);">上一页</a>‘
        else:
            prev = ‘<a class="page" href="%s?p=%s">上一页</a>‘ % (base_url, self.current_page - 1,)
        page_list.append(prev)
        
        for i in range(int(start_index), int(end_index)):
            if i == self.current_page:
                temp = ‘<a class="page active" href="%s?p=%s">%s</a>‘ % (base_url, i, i)
            else:
                temp = ‘<a class="page" href="%s?p=%s">%s</a>‘ % (base_url, i, i)
            page_list.append(temp)
            
        if self.current_page == self.total_count:
            nex = ‘<a class="page" href="javascript:void(0);">下一页</a>‘
        else:
            nex = ‘<a class="page" href="%s?p=%s">下一页</a>‘ % (base_url, self.current_page + 1,)
        page_list.append(nex)

#这个是一个输入框,可以直接跳转到对应的页码,这里直接写Javascript了,当然这个东西放在前端写也是可以的               
        jump = """
        <input type=‘text‘ class=‘go‘  /><a class=‘page‘ onclick=‘jumpTo(this, "%s?p=");‘>GO</a>
        <script>
            function jumpTo(ths,base){
                var val = ths.previousSibling.value;
                   if (val){
                    location.href = base + val;
                }
                else{
                    loction.href=‘#‘
                }
            }
        </script>
        """ % (base_url,)
        page_list.append(jump)
        page_str = mark_safe("".join(page_list))
        return page_str

上面的类写好了,那么就实例化和调用了

views.py里面导入自定义的类

from  utils import pagination
LIST = []
#初始化500个值测试
for i in range(500):
    LIST.append(i)
def user_list(request):
#Get方法获取p的值,如果没有就设置为1,然后转换为整数
    current_page = request.GET.get(‘p‘, 1)
    current_page = int(current_page)
#显示当前页的行数
    page_obj=pagination.Page(current_page,len(LIST))
    data = LIST[page_obj.start:page_obj.end]
#显示页码
    page_str = page_obj.page_str("/user_list/")
    return render(request, ‘user_list.html‘, {‘li‘: data,‘page_str‘: page_str})

user_list.html, 直接获取结果,注意这设定了个style,根据active属性显示不同颜色,这个.page这个类其实是在后端调用的

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

        .go{
            width:20px;
             border: solid 1px;
            color: #66512c;
            display: inline-block;
            padding: 5px;
        }

        .pagination .page{
            border: solid 1px;
            color: #66512c;
            display: inline-block;
            padding: 5px;
            background-color: papayawhip;
            margin: 5px;
        }
        .pagination .page.active{
            background-color: brown;
            color: white;
        }
    </style>
</head>
<body>
    <ul>
        {% for item in li %}
            {% include ‘li.html‘ %}
        {% endfor %}
    </ul>

    <div class="pagination">
        {{ page_str }}
    </div>
    <script src="/static/jquery-1.12.4.js"></script>
    <script src="/static/jquery.cookie.js"></script>

</body>
</html>

最后的效果

时间: 2024-10-06 14:06:35

Djano 自定义分页效果的相关文章

thinkphp自定义分页效果

TP自带了一个分页函数,挺方便使用的. 下面是我的使用方法: 1 /*****************分页显示start*************************/ 2 $arr_page=$this->page($user,1); 3 $show=$arr_page['show']; 4 $Page=$arr_page['Page']; 5 $article = $user->order('now')->limit($Page->firstRow.','.$Page-&g

jquery自定义插件实现分页效果

这节介绍如何自定义jquery插件,实现分页效果,话不多说,先看看实现的效果: 分页插件 实现的代码如下: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> <head> <meta charset="utf-8"> <title>page t

主攻ASP.NET.4.5.1 MVC5.0之重生:创建UIHelper通用自定义分页和选择开关与PagesHelper和IsSelect简单用法

@helper放入地方 分页效果 选择开关编辑调用 <dl> <dd class="dc1">是否主管:</dd> <dd> @UIHelper.IsSelect("IsManager",Model.IsManager.ToString()); </dd> </dl> 分页调用 <div class="rg5"> @UIHelper.PagesHelper(Vie

Python之路【第十九篇】自定义分页实现(模块化)

自定义分页 1.目的&环境准备 目的把分页写成一个模块的方式然后在需要分页的地方直接调用模块就行了. 环境准备Django中生成一个APP并且注册,配置URL&Views 配置URL from django.conf.urls import url from django.contrib import admin from app01 import views urlpatterns = [ url(r'^admin/', admin.site.urls), url(r'^user_lis

GridView自定义分页样式(上一页,下一页,到第几页)

今天要为网站做一个文章列表,发现GridView的分页样式很难看,于是结合网上的例子,自己做了一个.不是很美观,不过还是很实用的,先看下效果吧,如图(1). 图(1)GridView分页效果 自定义GridView的分页样式,使用的是GridView的  <PagerTemplate>元素.我们先看这段分页代码. 1 <PagerTemplate> 2 <br /> 3 <asp:Label ID="lblPage" runat="s

MVC下分页的自定义分页一种实现

1.引言 在MVC开发中我们经常会对数据进行分页的展示.通过分页我们可以从服务端获取指定的数据来进行展示.这样既节约了数据库查询的时间也节约了网络传输的数据量.在MVC开发中使用的比较多的应该是MVCPager控件.这个控件提供无刷新分页等功能.虽然我们有这么好的控件可以使用,但是我们还是需要通过简单的例子来看一下原始的分页技术的雏形,学习下原始分页的技术实现. 2.简单的分页实现 此处使用T_Products表查询商品数据,然后进行展示.商品类定义如下: public sealed class

WinForm轻松实现自定义分页 (转载)

转载至http://xuzhihong1987.blog.163.com/blog/static/267315872011315114240140/ 以前都是做web开发,最近接触了下WinForm,发现WinForm分页控件好像都没有,网上搜索了一下,发现有很多网友写的分页控件,分页效果应该都能实现吧,只是其风格都不是很符合我想要的.做web的时候,我习惯了Extjs的Grid分页效果,所以也想在WinForm中做个类似的效果,所以咬咬牙,做个山寨版本的吧,虽然自己写费时费力,在项目进度考虑中

114.实现手动分页效果

分页 在网站的开发当中,我们常常需要将各种列表中的数据分页显示,想要实现分页的效果,就可以通过django.core.Paginator.Paginator和django.core.Paginator.Page来实现. 1. 比如,将Paginator_pageAPP中表article中的range(1,100)的数据分页显示,每页显示10条数据,可以实现手动分页的效果. (1)首先在models.py文件中定义模型Article,示例代码如下: from django.db import mo

freemarker自定义分页(springboot、bootstrap4)

先看下最终效果: 源码地址:https://github.com/zhouyu629/freemarker-page-demo 实现过程 一.新建springboot项目,导入相关依赖包 <!--web组件--> <dependency> <groupId>org.springframework.boot</groupId> <artifactId>spring-boot-starter-web</artifactId> </d