django网页的分页功能，大家如果有疑问请留言

Posted 2020-12-29 my-love-is-python

url文件

from django.contrib import admin
from django.conf.urls import url
from app01 import  views

urlpatterns = [
    url(r‘^user_list‘, views.user_list)
]

对views文件

def user_list(request):
    pagesizenumber = request.COOKIES.get(‘pagesizenumber‘, 10) #获取COOKIE传过来的key(‘pagesizenumber‘), 默认为10
    current_number = request.GET.get(‘p‘, 1) #获得前端a的？p = 的值,此为当前页码数
    one_page_number = 11  #每页显示的页码数
    pagefi = pagenation.Page(List, pagesizenumber, current_number, one_page_number) #生成类
    (show_page, list_page) = pagefi.page_str()  #返回两个参数
    return  render(request, ‘user_list.html‘, {‘show_page‘ : show_page, ‘list_page‘: list_page})

对于上述的pagenation.Page 中为Page.py 文件

from django.utils.safestring import mark_safe
class Page:

    def __init__(self, List, pagesizenumber, current_number, one_page_number = 11):
        # List 输入传入的数据, pagesizenumber 每页显示的数据量，current_number 当前页码， one_page_number：每页页码数,默认11
        self.pagesizenumber = pagesizenumber
        self.current_number = current_number
        self.one_page_number = one_page_number
        self.List = List

    @property
    def page_number(self):
        self.one_math_number = int(self.pagesizenumber)
        page_number, v = divmod(len(self.List), self.one_math_number)  # page_number 总页码数， 计算所需要的总页码数
        return page_number
    @property
    def show_page(self):
        self.current_number = int(self.current_number)  #当前页码数
        self.one_math_number = int(self.pagesizenumber)
        page_number, v = divmod(len(self.List), self.one_math_number)  #计算得需要的总页码数
        if v > 0:
            page_number += 1  # 如果大于1， 页码数+1
        show_page = self.List[(self.current_number - 1) * self.one_math_number:self.current_number * self.one_math_number]  # 显示在页面的数
        return show_page

    def page_str(self):
        list_page = []
        self.current_number = int(self.current_number)
        self.one_math_number = int(self.pagesizenumber)
        self.one_page_number = int(self.one_page_number)

        if self.page_number < self.one_page_number:  # 总页码数小于单页页码数
            start_page = 1
            end_page = int(self.page_number) + 1
        else:  # 总页码数大于单页码数
            if self.current_number <= int((self.one_page_number + 1) / 2):  # 当前页码 小于 单页页码数中间
                start_page = 1
                end_page = int(self.one_page_number) + 1
                print(start_page)
                print(end_page)
            elif self.page_number - int((self.one_page_number - 1) / 2) > self.current_number > int(
                            (self.one_page_number + 1) / 2):  # 当前页码数 大于 单页页码数中间 小于 总页码数-单页页码中间 #开始发生变化
                start_page = int(self.current_number - ((self.one_page_number) - 1) / 2)
                end_page = int(self.current_number + ((self.one_page_number) + 1) / 2)
            else:
                start_page = self.page_number - self.one_page_number  # 当前页码数大于总页码数-单页页码中间
                end_page = self.page_number + 1
        # 上一页按钮
        if self.current_number == 1:
            x = ("<a class=‘paging active‘ href=‘#‘>上一页</a>")
        else:
            x = ("<a class=‘paging active‘ href=‘/user_list/?p=%s‘>上一页</a>" % (self.current_number - 1,))
        list_page.append(x)
        # 添加a标签
        for i in range(start_page, end_page):
            if i == self.current_number:
                x = ("<a class=‘paging active‘ href=‘/user_list/?p=%s‘>%s</a>" % (i, i))
            else:
                x = ("<a class=‘paging‘ href=‘/user_list/?p=%s‘>%s</a>" % (i, i))

            list_page.append(x)
        # 下一页按钮
        if self.current_number == self.page_number:
            x = ("<a class=‘paging active‘ href=‘#‘>下一页</a>")
        else:
            x = ("<a class=‘paging active‘ href=‘/user_list/?p=%s‘>下一页</a>" % (self.current_number + 1,))
        list_page.append(x)

        x = ‘‘‘
                <input  type="text"><a onclick = ‘jumpTo(this, "/user_list/?p=")‘;>Go</a>
                <script>
                    function jumpTo(ths, base){
                      var val = ths.previousSibling.value;   
                      location.href = base + val;

                    }
                </script>
                ‘‘‘
        # ths.previousSibling.value 找出在其上面的input的value值
        # location.href = base + val   跳转
        # x = ‘‘‘
        # <input type=‘text‘ ><a onclick=‘jumpTo(this, "/user_list/?p=")‘;>Go</a>
        # <script>
        #     function jumpTo(ths,base){
        #         var val = ths.previousSibling.value;
        #         location.href = base + val;
        #      }
        # </script>
        #     ‘‘‘
        list_page.append(x)

        list_page = ‘‘.join(list_page)
        print(list_page)
        list_page = mark_safe(list_page)
        return self.show_page, list_page

对于user_list.html文件

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .pagination .paging{
            padding: 5px;
            margin: 5px;
            background-color: aqua;
            color: white;
        }
        .pagination .paging.active{
            background-color: red;
            color: white;

        }
    </style>
</head>
<body>
     <ul>
         {% for i in show_page %}
             <li>{{ i }}</li>
         {% endfor %}
     </ul>
{#     {% for i in list_page %}#}
{#        <a class=‘paging‘ href="/user_list/?p={{ i }}">{{ i }}</a>#}
{#     {% endfor %}#}

     <div class = pagination>
       {{ list_page }}
     </div>
{#     onchange 检测改变#}
     <select id = ‘i1‘ onchange="changePageSize(this)">
         <option value="10">10</option>
         <option value="30">30</option>
         <option value="50">50</option>
         <option value="100">100</option>
     </select>
<script src = ‘/static/jquery-3.3.1.js‘></script>
<script src="/static/jquery.cookie.js"></script>
<script>
{#    文件一进来就执行该操作, 获得pagesizenumber值，改变values， 初始值为10#}
    $(function () {
        var v = $.cookie(‘pagesizenumber‘);
        if (v){$(‘#i1‘).val(v);}
        else{$(‘#i1‘).val(10)}
    });
    function changePageSize(ths) {
        var v = $(ths).val();
        $.cookie(‘pagesizenumber‘, v, {path:‘/user_list/‘});
        location.reload();
{#        刷新实现跳转#}

    }

</script>


</body>
</html>