django学习笔记---结合cookie，onchange事件写出一个分页（make_safe）；使用封装好的模块pure_pagination

最新推荐文章于 2023-04-10 20:33:39 发布

xiaoa~

最新推荐文章于 2023-04-10 20:33:39 发布

阅读量866

点赞数

分类专栏： Django学习笔记

本文链接：https://blog.csdn.net/qq_34964399/article/details/79596428

版权

Django学习笔记专栏收录该内容

29 篇文章 0 订阅

订阅专栏

一，手写分页

pagination.py

from django.utils.safestring import mark_safe


class Page:
    def __init__(self,cur_page,total_records,perPageOfDataNum=50,perPageOfPageNum=10):
        """
        :param cur_page: 鼠标点击的当前页
        :param total_records: 从数据库提取的总的记录
        :param perPageOfDataNum: 每一页上展示的数据量
        :param perPageOfPageNum: 当前屏幕显示的页码数量
        """
        self.cur_page = cur_page
        self.total_records = total_records
        self.perPageOfDataNum = perPageOfDataNum
        self.perPageOfPageNum = perPageOfPageNum

    # 当前页显示的数据
    def showList(self):
        self.dataList = [x for x in range(self.total_records)]
        start_index = (self.cur_page - 1) * self.perPageOfDataNum
        end_index = self.cur_page * self.perPageOfDataNum
        showList = self.dataList[start_index:end_index]
        return showList

    # 所有数据一共要多少页
    @property
    def total_page(self):
        i,r = divmod(len(self.dataList),self.perPageOfDataNum)
        self.total_page1 = i+1 if r else i     # 如果余数！=0，则页码数为i + 1,否则正好为i页
        return self.total_page1

    # 当前屏幕显示的页码
    def show_page(self):
        # 确认数据库构建的页码数量要大于你设置的初始值perPageOfPageNum,否则会有很多空白页码
        self.perPageOfPageNum = self.total_page if self.total_page < self.perPageOfPageNum else self.perPageOfPageNum
        side = self.perPageOfPageNum // 2
        # 考虑页码在最左边的情况
        if self.cur_page <= side:
            startPage = 1
            endPage = self.perPageOfPageNum + 1
        # 考虑页码在最右边的情况
        elif (self.total_page - self.cur_page) < side:
            startPage = self.total_page - self.perPageOfPageNum + 1
            endPage = self.total_page + 1
        # 页码在中间的情况
        else :
            startPage = self.cur_page -  side
            endPage = self.cur_page + side + 1
        pageList = []
        for i in range(startPage,endPage):
            if i == self.cur_page:   # 点击的时候增加样式
                pageList.append('<a class="p active" href="/page/?p=%s">%s</a>' % (i, i))
            else:
                pageList.append('<a class="p" href="/page/?p=%s">%s</a>' % (i, i))
        page = "".join(pageList)
        page = mark_safe(page)
        return page

page.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .pagination{
            padding-top:20px;
        }
        .pagination .p{
            display:inline-block;
            padding:0 5px;
            background-color:grey;
            margin:0 5px;
        }
        .pagination .p:hover{
            background-color: pink;

        }
        .pagination .p.active{
            background-color: pink;

        }
    </style>
</head>
<body>
    {% for item in showList %}
        <li><a>{{ item }}</a></li>
    {% endfor %}
    <div class="pagination">
        {{ page }}
    </div>
    <div>
        {{ page_turn }}
    </div>
    <div>
        <select id="ii" οnchange="change(this)" >
            <option value="3" >3</option>
            <option value="5">5</option>
            <option value="7">7</option>
        </select>
    </div>
    <script src="/static/jquery-1.12.4.js"></script>
    <script src="/static/jquery.cookie.js"></script>
    <script>
        $(function () {
{#            每次触发onchange事件，会location.reload，刷新页面，这时select会回复到初始状态值，设置DOM加载完成后初始化该功能呢个并设置为上次cookie值#}
            var v = $.cookie('perPageOfDataNum');
            $("#ii").val(v);
            console.log('v',v);
        });
        function change(ths) {
            var val = $(ths).val();
            console.log('val',val);
{#            onchange事件，当值发生改变触发该事件。鼠标一点击select框，获取到select的值，并设置为cookie #}
            $.cookie('perPageOfDataNum',val);
            location.reload();
        }
    </script>
</body>
</html>

view.py

from django.utils.safestring import mark_safe
from utils import pagination
def page(request):
    # 分页展示
    cur_page =  request.GET.get('p',1)
    cur_page = int(cur_page)
    pageNum = request.COOKIES.get('perPageOfDataNum',10)
    p = pagination.Page(cur_page,30,int(pageNum))
    showList = p.showList()
    page = p.show_page()
    totalPage = p.total_page

    #页面跳转功能
    page_turn = """
        <input id="i1" type="text"/>
        <a id='a' οnclick="jump(this,'/page/?p=',%d)">Go</a>
        <script src="/static/jquery-1.12.4.js"></script>
        <script>
            function jump(ths,base,total){       # base=/page/?p   total=totalPage+1
                var val = $('#i1').val();
                if(val>0&&val<total){
                    location.href = base + val;
                    }
                else{
                    alert('input must be > 0 and < ' + total);
                }
                    
            }
        </script>
    """ % (totalPage+1,)
    page_turn = mark_safe(page_turn)
    return render(request, 'page.html', {'showList': showList, 'page': page,"page_turn":page_turn})

效果展示

二，使用githup上封装的模块

https://github.com/jamespacileo/django-pure-pagination

settings中添加

PAGINATION_SETTINGS = {
    'PAGE_RANGE_DISPLAYED': 10,
    'MARGIN_PAGES_DISPLAYED': 2,

    'SHOW_FIRST_PAGE_WHEN_INVALID': True,
}

INSTALLED_APPS = (
    ...
    'pure_pagination',
)

业务处理

from django.shortcuts import render_to_response
from pure_pagination import Paginator, EmptyPage, PageNotAnInteger
class OrgView(View):
    def get(self,request):
       # 分页
        try:
            page = request.GET.get('page', 1)
        except PageNotAnInteger:
            page = 1
        #Orgs = CourseOrg.objects.all()
        Orgs = [x for x in range(100)]
        p = Paginator(Orgs,4, request=request)   # 4 代表每页显示多少数据
        orgs = p.page(page )    # 返回Page对象，可以看这个对象里有几个元素，此时表示第page页有4条记录。可以看这个对象有没有前页，
        return render(request,'org-list.html',{"orgs":orgs})

前端

            {% for obj in orgs.object_list %}
            <h1>{{ obj }}</h1>
            {% endfor %}

这样页面就能显示为4条数据。

下一步，添加分页导航页

{{ orgs.pages }} ： [1, 2, None, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, None, 24, 25] 。这样显示是settings中的配置。PAGINATION_SETTINGS

{{ orgs.number }} ：返回用户点击的页码

添加bootstrap样式

<ul class="pagination">
    {% if orgs.has_previous %}
        <li><a href="?{{ orgs.previous_page_number.querystring }}">«</a></li>
    {% else %}
        <li><a> «</a></li>
    {% endif %}
    {% for page in orgs.pages %}
        {% if page %}
            {% ifequal page orgs.number %}
                <li class="active"><a>{{ page }}</a></li>
            {% else %}
                <li ><a href="?{{ page.querystring }}">{{ page }}</a></li>
            {% endifequal %}
        {% else %}
            <li ><a>...</a></li>
        {% endif %}
    {% endfor %}

    {% if orgs.has_next %}
        <li><a href="?{{ orgs.next_page_number.querystring }}"> »</a></li>
    {% else %}
        <li><a> »</a></li>
    {% endif %}
</ul>

最后显示

xiaoa~

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
django学习笔记---结合cookie，onchange事件写出一个分页（make_safe）；使用封装好的模块pure_pagination

pagination.pyfrom django.utils.safestring import mark_safeclass Page: def __init__(self,cur_page,total_records,perPageOfDataNum=50,perPageOfPageNum=10): """ :param cur_page: 鼠标点...
复制链接

扫一扫