自定义分页

django默认认为所有在页面显示的字符串都是不合法的。 XSS攻击：js注入

可以通过两种分支将字符串标注为合法

1、在模板语言中将字符串传递给 safe函数

2、在后端进行处理　　

　　from django.utils.safestring import mark_safe
　　mark_safe(str)

自定义分页一

=== views.py ===

from django.shortcuts import render
from django.utils.safestring import mark_safe
# Create your views here.

#用户列表
LS = []
for i in range(109):
    LS.append(i)  

def userlist(request):
    currentPage = request.GET.get('p',1)  #接受页面参数，默认看第一页
    currentPage = int(currentPage)  #    GET得到的为字 符串，将其转为数字类型
    begin = (currentPage-1) * 10  # 起始数据
    end = currentPage * 10  # 结束数据
    display = LS[begin:end]  

    total=len(LS)
    pageCount,remainder=divmod(total,10)
    if remainder:  #如果余数不为0，则总页数等于商+1
        pageCount += 1

    pageStrList=[]
    for i in range(1,pageCount+1):
        if i == currentPage:  #当用户选中某个页面时加上active样式
            tmp='<a class="page active" href="/userlist/?p=%s">%s</a>' %(i,i)
        else:
            tmp='<a class="page" href="/userlist/?p=%s">%s</a>' %(i,i)
        pageStrList.append(tmp)

    pageStr=''.join(pageStrList) #将列表拼接成一个字符串
    pageStr=mark_safe(pageStr)  #将该字符串标记为合法

    return render(request, 'userlist.html', {'li': display,'page_str':pageStr})

=== userlist.html ===

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <style>
        .pagination .page{
            display: inline-block; 
            padding: 5px; /* 使每个页码间有间距 */
            margin: 5px;  /* 每个页码的自身宽度 */
            background-color: cyan;
        } 
        .pagination .page.active{
            background-color: brown;
            color: white;
        }
    </style>
</head>
<body>
    <ul>
        {% for item  in li %}
            <li>{{ item }}</li>
        {% endfor %}
    </ul>

    <div class="pagination">
        <!-- {{ pageStr| safe}} -->
        {{ pageStr}}
    </div>
</body>
</html>

访问：http://127.0.0.1:8000/userlist/?p=6 （# p为页码）

自定义分页二 (约束显示页数)

=== views.py ===

from django.shortcuts import render
from django.utils.safestring import mark_safe
# Create your views here.

#用户列表
LS = []
for i in range(109):
    LS.append(i)  

def userlist(request):
    currentPage = request.GET.get('p',1)
    currentPage = int(currentPage)  

    perPageCount=5 #每页显示数据的条数

    begin = (currentPage-1) * perPageCount  # 起始数据
    end = currentPage * perPageCount  # 结束数据
    display = LS[begin:end]  

    allData=len(LS)
    pageCount,remainder=divmod(allData,perPageCount)
    if remainder:  
        pageCount += 1


    pageStrList=[]
    # 最多显示11个页码，并使当前页永远在中间
    if pageCount < 11: # 先根据总页数判断
        beginIndex = 1
        endIndex = pageCount + 1
    else:
        if currentPage <= 6:  # 再根据当前页判断，避免起始页码产生负数
            beginIndex = 1
            endIndex = 11 + 1
        else:
            beginIndex = currentPage - 5
            endIndex = currentPage + 5 +1
            if (currentPage + 5) > pageCount:  # 最后根据当前页+5 和总页数比较判断
                endIndex = pageCount + 1    # 避免结束页码超出总页数
                beginIndex = pageCount -11 + 1            

    for i in range(beginIndex,endIndex):
        if i == currentPage: 
            tmp='<a class="page active" href="/test/userlist/?p=%s">%s</a>' %(i,i)
        else:
            tmp='<a class="page" href="/test/userlist/?p=%s">%s</a>' %(i,i)
        pageStrList.append(tmp)

    pageStr=''.join(pageStrList) 
    pageStr=mark_safe(pageStr) 

    return render(request, 'userlist.html', {'li': display,'pageStr':pageStr})

=== userlist.html ===

同上

=== views.py ===

from django.shortcuts import render
from django.utils.safestring import mark_safe
# Create your views here.

#用户列表
LS = []
for i in range(109):
    LS.append(i)  

def userlist(request):
    currentPage = request.GET.get('p',1)
    currentPage = int(currentPage)  

    perPageCount=5 #每页显示数据的条数
    pageNum=5   # 最多显示的页码数，并使当前页永远在中间

    begin = (currentPage-1) * perPageCount 
    end = currentPage * perPageCount 
    display = LS[begin:end]  

    allData=len(LS)
    pageCount,remainder=divmod(allData,perPageCount)
    if remainder:  
        pageCount += 1

    pageStrList=[]
    
    if pageCount < pageNum:
        beginIndex = 1
        endIndex = pageCount + 1
    else:
        if currentPage <= (pageNum+1)/2: 
            beginIndex = 1
            endIndex = pageNum + 1
        else:
            beginIndex = currentPage - (pageNum-1)/2
            endIndex = currentPage + (pageNum+1)/2
            if (currentPage + (pageNum-1)/2) > pageCount: 
                endIndex = pageCount + 1  
                beginIndex = pageCount -pageNum + 1      

    if currentPage == 1:  #如果当前页为1，则上一页不做处理
        prePage='<a class="page" href="#">上一页</a>' 
    else:
        prePage='<a class="page" href="/test/userlist/?p=%s">上一页</a>' %(currentPage-1)

    pageStrList.append(prePage)
    for i in range(int(beginIndex),int(endIndex)):
        if i == currentPage: 
            tmp='<a class="page active" href="/test/userlist/?p=%s">%s</a>' %(i,i)
        else:
            tmp='<a class="page" href="/test/userlist/?p=%s">%s</a>' %(i,i)
        pageStrList.append(tmp)

    if currentPage == pageCount: #如果当前页为1，则下一页不做处理("javascript:void(0);" 和 "#"一样)
        nextPage='<a class="page" href="javascript:void(0);">下一页</a>'
    else:
        nextPage='<a class="page" href="/test/userlist/?p=%s">下一页</a>' %(currentPage+1)

    pageStrList.append(nextPage)
 
     # 跳转页面(或直接在html文件里写)
    # jumpPage='''<input type="text"/><a id='i1' onclick='jumpTo(this,"/test/userlist/?p=");'>Go</a>'''
    # pageStrList.append(jumpPage)

    pageStr=''.join(pageStrList) 
    pageStr=mark_safe(pageStr) 

    return render(request, 'userlist.html', {'li': display,'pageStr':pageStr})

=== userlist.html ===

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <style>
        .pagination .page{
            display: inline-block; 
            padding: 5px; /* 使每个页码间有间距 */
            margin: 5px;  /* 每个页码的自身宽度 */
            background-color: cyan;
        } 
        .pagination .page.active{
            background-color: brown;
            color: white;
        }
    </style>
</head>
<body>
    <ul>
        {% for item  in li %}
            <li>{{ item }}</li>
        {% endfor %}
    </ul>

    <div class="pagination">
        {{ pageStr}}
        <!-- 跳转页面 -->
        <input type="text"/>
        <a id='i1' onclick='jumpTo(this,"/test/userlist/?p=");'>Go</a>
    </div>
    <script>
        function jumpTo(ts,baseurl){
            var val=ts.previousElementSibling.value;
            console.log(val)
            location.href = baseurl + val;
        }
    </script>
</body>
</html>

自定义分页四 (封装成公共类)

=== utils/pagination.py ===

from django.utils.safestring import mark_safe

class Page:
    def __init__(self,currentPage,allData,perPageCount=10,pageNum=11):
        self.currentPage=currentPage
        self.allData=allData
        self.perPageCount=perPageCount
        self.pageNum=pageNum

    @property
    def begin(self):
        return (self.currentPage-1) * self.perPageCount

    @property
    def end(self):
        return self.currentPage * self.perPageCount

    @property
    def pageCount(self):
        p,r=divmod(self.allData,self.perPageCount)
        if r:   
            p += 1
        return p    

    def PS(self,baseUrl):
        pageStrList=[]        
        if self.pageCount < self.pageNum:
            beginIndex = 1
            endIndex = pageCount + 1
        else:
            if self.currentPage <= (self.pageNum+1)/2: 
                beginIndex = 1
                endIndex = self.pageNum + 1
            else:
                beginIndex = self.currentPage - (self.pageNum-1)/2
                endIndex = self.currentPage + (self.pageNum+1)/2
                if (self.currentPage + (self.pageNum-1)/2) > self.pageCount: 
                    endIndex = self.pageCount + 1  
                    beginIndex = self.pageCount -self.pageNum + 1      

        if self.currentPage == 1: 
            prePage='<a class="page" href="#">上一页</a>' 
        else:
            prePage='<a class="page" href="%s?p=%s">上一页</a>' %(baseUrl,self.currentPage-1)

        pageStrList.append(prePage)
        for i in range(int(beginIndex),int(endIndex)):
            if i == self.currentPage: 
                tmp='<a class="page active" href="%s?p=%s">%s</a>' %(baseUrl,i,i)
            else:
                tmp='<a class="page" href="%s?p=%s">%s</a>' %(baseUrl,i,i)
            pageStrList.append(tmp)

        if self.currentPage == self.pageCount: 
            nextPage='<a class="page" href="javascript:void(0);">下一页</a>'
        else:
            nextPage='<a class="page" href="%s?p=%s">下一页</a>' %(baseUrl,self.currentPage+1)

        pageStrList.append(nextPage)

        jumpPage='''<input type="text"/><a id='i1' onclick='jumpTo(this,"%s?p=");'>Go</a>''' %(baseUrl,)
        pageStrList.append(jumpPage)        

        pageStr=''.join(pageStrList) 
        pageStr=mark_safe(pageStr) 

        return pageStr

=== testapp/views.py ===

from utils import pagination
from django.shortcuts import render

#用户列表
LS = []
for i in range(109):
    LS.append(i)  

def userlist(request):
    currentPage = request.GET.get('p',1)
    currentPage = int(currentPage)   
    pageObj=pagination.Page(currentPage,len(LS))
    display = LS[pageObj.begin:pageObj.end]
    pageStr=pageObj.PS("/test/userlist/")

    return render(request, 'userlist.html', {'li': display,'pageStr':pageStr})

=== userlist.html ===

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <style>
        .pagination .page{
            display: inline-block; 
            padding: 5px; 
            margin: 5px; 
            background-color: cyan;
        } 
        .pagination .page.active{
            background-color: brown;
            color: white;
        }
    </style>
</head>
<body>
    <ul>
        {% for item  in li %}
            <li>{{ item }}</li>
        {% endfor %}
    </ul>

    <div class="pagination">
        {{ pageStr}}
    </div>
    <!-- 以下js也可以封装到后台jumpPage变量中 -->
    <script>
        function jumpTo(ts,baseurl){
            var val=ts.previousElementSibling.value;
            console.log(val)
            location.href = baseurl + val;
        }
    </script>
</body>
</html>

posted @ 2018-01-02 16:50 bobo0609 Views(230) Comments(0) 收藏举报

刷新页面返回顶部

bobo0609

自定义分页

自定义分页一

自定义分页二 (约束显示页数)

自定义分页三 (上一页，下一页，跳转页)

自定义分页四 (封装成公共类)

公告