zoukankan      html  css  js  c++  java
  • django【自定义分页】

    1. views.py

    def app(request):
        page_info = PageInfo(request.GET.get('p'), 6, 100, request.path_info, page_range=7)
        return render(request, 'index.html', locals())

    2. page.py

     1 class PageInfo(object):
     2     def __init__(self, current_page, per_age_num, all_count, base_url, page_range=11):
     3         """
     4         :param current_page: 当前页
     5         :param per_age_num: 每页显示数据条数
     6         :param all_count: 数据库总个数
     7         :param base_url: 页码标签的前缀
     8         :param page_range: 页码个数
     9         :return: 列表-->str
    10         """
    11         try:
    12             current_page = int(current_page)
    13         except Exception as e:
    14             current_page = 1
    15         self.current_page = current_page
    16         self.per_page_num = per_age_num
    17         self.all_count = all_count
    18         a, b = divmod(all_count, per_age_num)
    19         if b != 0:
    20             self.all_page = a + 1
    21         else:
    22             self.all_page = a
    23 
    24         self.base_url = base_url
    25         self.page_range = page_range
    26 
    27     def start(self):
    28         return (self.current_page - 1) * self.per_page_num
    29 
    30     def end(self):
    31         return self.current_page * self.per_page_num
    32 
    33     def page_str(self):
    34         """
    35         :return: list --> str
    36         """
    37         page_list = []
    38 
    39         first_page = "<a href='%s?p=%s'>首页</a>" % (self.base_url, 1)
    40         page_list.append(first_page)
    41 
    42         if self.current_page <= 1:
    43             prev = "<a href='#'>上一页</a>"
    44         else:
    45             prev = "<a href='%s?p=%s'>上一页</a>" % (self.base_url, self.current_page - 1)
    46         page_list.append(prev)
    47 
    48         # 只有 8页
    49         if self.all_page <= self.page_range:
    50             start = 1
    51             end = self.all_page + 1
    52         else:
    53             # 页数 18
    54             if self.current_page > int(self.page_range / 2):
    55                 # 当前页: 100,101,102
    56                 if (self.current_page + int(self.page_range / 2)) > self.all_page:
    57                     start = self.all_page - self.page_range + 1
    58                     end = self.all_page + 1
    59                 # 当前页:  6,7,8,9,10
    60                 else:
    61                     start = self.current_page - int(self.page_range / 2)
    62                     end = self.current_page + int(self.page_range / 2) + 1
    63             else:
    64                 # 当前页: 1,2,3,4,5,
    65                 start = 1
    66                 end = self.page_range + 1
    67 
    68         for i in range(start, end):
    69             if self.current_page == i:
    70                 temp = '<a class="active" href="%s?p=%s">%s</a>' % (
    71                     self.base_url, i, i,)
    72             else:
    73                 temp = '<a href="%s?p=%s">%s</a>' % (
    74                     self.base_url, i, i,)
    75             page_list.append(temp)
    76 
    77         if self.current_page >= self.all_page:
    78             nex = "<a href='#'>下一页</a>"
    79         else:
    80             nex = "<a href='%s?p=%s'>下一页</a>" % (self.base_url, self.current_page + 1)
    81         page_list.append(nex)
    82 
    83         last_page = "<a href='%s?p=%s'>尾页</a>" % (self.base_url, self.all_page)
    84         page_list.append(last_page)
    85         return "".join(page_list)

    3. index.html

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
        <link rel="stylesheet" href="/static/css/commons.css" />
    </head>
    <body>
    
    <!-- 1. 自定义分页 -->
    <div class="pagination">
        {{ page_info.page_str|safe }}
    </div>
    
    
    
    </body>
    </html>

    4. common.css

    /* 分页开始 */
    .pagination{
        padding: 10px 0;
    }
    .pagination a{
        display: inline-block;
        color: #369;
        padding: 6px 10px;
        text-align: center;
        border: 1px solid #e1e1e1;
        margin-right: 6px;
        text-decoration: none;
    }
    .pagination a.active{
        border: 0;
    }
    .pagination a:hover{
        background-color: #369;
        color: #ffffff;
    }
    
    /* 分页结束 */
  • 相关阅读:
    程序从命令行接收多个数字,求和之后输出结果。
    动态规划(1)
    软件工程个人作业(4)
    冲刺2 01
    构建之法
    水王
    大道至简第七章读后感
    构建之法03
    团队冲刺第四天
    团队冲刺第三天
  • 原文地址:https://www.cnblogs.com/weibiao/p/6278081.html
Copyright © 2011-2022 走看看