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

    自定义分页

    • 当数据库中数据有很多,我们通常会在前端页面做分页展示。
    • 分页的数据可以在前端页面实现,也可以在后端实现分页。
    • 后端实现分页的原理就是每次只请求一页数据。

     准备工作

    import os
    
    if __name__ == '__main__':
        os.environ.setdefault("DJANGO_SETTINGS_MODULE", "new_pagedemo.settings")
    
        import django
        django.setup()
    
        from app01 import models
    
        # 列表生成式, 批量生成数据
        create_list = (models.Book(title="book_%s" % i, price=i * i) for i in range(500))
        # bulk_create()创建大量数据时使用
        models.Book.objects.bulk_create(create_list)

    学习研究版

    def book_list(request):
        # 从URL中取当前访问的页码数
        try:
            current_page = int(request.GET.get('page'))
        except Exception as e:
            # 取不到或者页码数不是数字都默认展示第1页
            current_page = 1
        # 总数据量
        total_count = models.Book.objects.count()
        # 定义每页显示多少条数据
        per_page = 10
        # 计算出总页码数
        total_page, more = divmod(total_count, per_page)
        if more:
            total_page += 1
        # 定义页面上最多显示多少页码(为了左右对称,一般设为奇数)
        max_show = 11
        half_show = max_show // 2
        # 计算一下页面显示的页码范围
        if total_page <= max_show:  # 总页码数小于最大显示页码数
            page_start = 1
            page_end = total_page
        elif current_page + half_show >= total_page:  # 右边越界
            page_end = total_page
            page_start = total_page - max_show + 1
        elif current_page - half_show <= 1:  # 左边越界
            page_start = 1
            page_end = max_show
        else:  # 正常页码区间
            page_start = current_page - half_show
            page_end = current_page + half_show
        # 数据索引起始位置
        data_start = (current_page-1) * per_page
        data_end = current_page * per_page
    
        book_list = models.Book.objects.all()[data_start:data_end]
    
        # 生成页面上显示的页码
        page_html_list = []
        page_html_list.append('<nav aria-label="Page navigation"><ul class="pagination">')
        # 加首页
        first_li = '<li><a href="/book_list/?page=1">首页</a></li>'
        page_html_list.append(first_li)
        # 加上一页
        if current_page == 1:
            prev_li = '<li><a href="#"><span aria-hidden="true">&laquo;</span></a></li>'
        else:
            prev_li = '<li><a href="/book_list/?page={}"><span aria-hidden="true">&laquo;</span></a></li>'.format(current_page - 1)
        page_html_list.append(prev_li)
        for i in range(page_start, page_end + 1):
            if i == current_page:
                li_tag = '<li class="active"><a href="/book_list/?page={0}">{0}</a></li>'.format(i)
            else:
                li_tag = '<li><a href="/book_list/?page={0}">{0}</a></li>'.format(i)
            page_html_list.append(li_tag)
        # 加下一页
        if current_page == total_page:
            next_li = '<li><a href="#"><span aria-hidden="true">&raquo;</span></a></li>'
        else:
            next_li = '<li><a href="/book_list/?page={}"><span aria-hidden="true">&raquo;</span></a></li>'.format(current_page + 1)
        page_html_list.append(next_li)
        # 加尾页
        page_end_li = '<li><a href="/book_list/?page={}">尾页</a></li>'.format(total_page)
        page_html_list.append(page_end_li)
        page_html_list.append('</ul></nav>')
        page_html = "".join(page_html_list)
        return render(request, "book_list.html", {"book_list": book_list, "page_html": page_html})
    view.py
    <!DOCTYPE html>
    <html lang="zh-CN">
    <head>
        <meta charset="utf-8">
        <meta name="description" content="">
        <meta name="author" content="">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <link rel="stylesheet" href="/static/bootstrap/css/bootstrap.css">
        <title>title</title>
    </head>
    <body>
    <div class="container">
        <div class="row">
            <table class="table table-bordered">
                <thead>
                <tr>
                    <th>ID</th>
                    <th>title</th>
                    <th>price</th>
                </tr>
                </thead>
                <tbody>
                {% for book in book_list %}
                    <tr>
                        <td>{{ book.id }}</td>
                        <td>{{ book.title }}</td>
                        <td>{{ book.price }}</td>
                    </tr>
                {% endfor %}
                </tbody>
            </table>
            <nav aria-label="Page navigation">
                <ul class="pagination">
                    {{ page_html|safe }}
                </ul>
            </nav>
        </div>
    </div>
    
    </body>
    </html>
    book_list.html

    封装保存

    学习研究的例子,只能用于一个模型上,所以我们把它封装成一个组件让其它模型也可以使用

    封装保存成组件

    utils/mypage.py

    class Page():
    
        def __init__(self, page_num, total_count, url_prefix, per_page=10, max_page=11):
            """
            :param page_num: 当前页码数
            :param total_count: 数据总数
            :param url_prefix: a标签href的前缀
            :param per_page: 每页显示多少条数据
            :param max_page: 页面上最多显示几个页码
            """
            self.url_prefix = url_prefix
            self.max_page = max_page
            # 总共需要多少页码来展示
            total_page, m = divmod(total_count, per_page)
            if m:
                total_page += 1
            self.total_page = total_page
    
            try:
                page_num = int(page_num)
                # 如果输入的页码数超过了最大的页码数,默认返回最后一页
                if page_num > total_page:
                    page_num = total_page
            except Exception as e:
                # 当输入的页码不是正经数字的时候 默认返回第一页的数据
                page_num = 1
            self.page_num = page_num
    
            # 定义两个变量保存数据从哪儿取到哪儿
            self.data_start = (page_num - 1) * 10
            self.data_end = page_num * 10
    
            # 页面上总共展示多少页码
            if total_page < self.max_page:
                self.max_page = total_page
    
            half_max_page = self.max_page // 2
            # 页面上展示的页码从哪儿开始
            page_start = page_num - half_max_page
            # 页面上展示的页码到哪儿结束
            page_end = page_num + half_max_page
            # 如果当前页减一半 比1还小
            if page_start <= 1:
                page_start = 1
                page_end = self.max_page
            # 如果 当前页 加 一半 比总页码数还大
            if page_end >= total_page:
                page_end = total_page
                page_start = total_page - self.max_page + 1
            self.page_start = page_start
            self.page_end = page_end
    
        @property
        def start(self):
            return self.data_start
    
        @property
        def end(self):
            return self.data_end
    
        def page_html(self):
            # 自己拼接分页的HTML代码
            html_str_list = []
            # 加上第一页
            html_str_list.append('<li><a href="{}?page=1">首页</a></li>'.format(self.url_prefix))
    
            # 判断一下 如果是第一页,就没有上一页
            if self.page_num <= 1:
                html_str_list.append(
                    '<li class="disabled"><a href="#"><span aria-hidden="true">&laquo;</span></a></li>'.format(
                        self.page_num - 1))
            else:
                # 加一个上一页的标签
                html_str_list.append(
                    '<li><a href="{}?page={}"><span aria-hidden="true">&laquo;</span></a></li>'.format(self.url_prefix,
                                                                                                       self.page_num - 1))
    
            for i in range(self.page_start, self.page_end + 1):
                # 如果是当前页就加一个active样式类
                if i == self.page_num:
                    tmp = '<li class="active"><a href="{0}?page={1}">{1}</a></li>'.format(self.url_prefix, i)
                else:
                    tmp = '<li><a href="{0}?page={1}">{1}</a></li>'.format(self.url_prefix, i)
    
                html_str_list.append(tmp)
    
            # 加一个下一页的按钮
            # 判断,如果是最后一页,就没有下一页
            if self.page_num >= self.total_page:
                html_str_list.append('<li class="disabled"><a href="#"><span aria-hidden="true">&raquo;</span></a></li>')
            else:
                html_str_list.append(
                    '<li><a href="{}?page={}"><span aria-hidden="true">&raquo;</span></a></li>'.format(self.url_prefix,
                                                                                                       self.page_num + 1))
            # 加最后一页
            html_str_list.append('<li><a href="{}?page={}">尾页</a></li>'.format(self.url_prefix, self.total_page))
    
            page_html = "".join(html_str_list)
            return page_html
    mypage.py

    使用示例

    from django.shortcuts import render
    from app01 import models
    
    
    def book_list(request):
        # 从URL中取参数,用户想访问的是哪一页
        page_num = request.GET.get("page")
    
        # 总数据有多少条
        total_count = models.Book.objects.all().count()
    
        from utils.mypage import Page
        page_obj = Page(page_num,total_count,url_prefix='/book_list/')
    
        book_list = models.Book.objects.all()[page_obj.data_start:page_obj.data_end]
        return render(request, 'book_list.html', {"book_list": book_list, "page_html": page_obj.page_html()})
    
    
    def depts(request):
        # 从URL取参数
        page_num = request.GET.get("page")
        
        # 总数据是多少
        total_count = models.Dept.objects.all().count()
        
        from utils.mypage import Page
        page_obj = Page(page_num, total_count, per_page=10, url_prefix="/depts/", max_page=11, )
    
        ret = models.Dept.objects.all()[page_obj.start:page_obj.end]
        return render(request, "dept.html", {"depts": ret, "page_html": page_obj.page_html()})
    view.py
  • 相关阅读:
    Microsoft Prerelease Software Visual Studio Code Name "Orcas" January 2007 Community Technology Preview (CTP)
    Attribute Example In MSDN
    AutoEventWireup 20032005
    转ASP.NET中常用的优化性能方法
    转 用whitespace:nowrap;解决中文标签标签换行问题
    RBAC 模型初探[转]
    .net开源相关
    Path.GetExtension 方法
    应用程序注释规范
    Web.config的写入操作
  • 原文地址:https://www.cnblogs.com/lxfpy/p/10939559.html
Copyright © 2011-2022 走看看