zoukankan      html  css  js  c++  java
  • web项目中分页组件的使用

    在写web项目中,如果需要使用到分页的时候,我们可以直接将已经写好的组件直接拿过去使用即可

      这个是使用分页功能的插件,我们咋子使用分页功能的时候,在后端view视图中导入这个脚本中的Pagination类,按照需求传入相关参数,再将数据传入前端页面,在需要用分页的地方将数据进行渲染即可。每一页展示的内容样式我们自己根据需求去写,我们只需要将数据在后端视图函数中封装在列表里面,在前端页面循环即可,分页页码的格式我们是从bootstrap官网中拿到的。

    """
    分页组件应用:
    1. 在视图函数中
        queryset = models.Issues.objects.filter(project_id=project_id)
        page_object = Pagination(
            current_page=request.GET.get('page'),
            all_count=queryset.count(),
            base_url=request.path_info,
            query_params=request.GET
        )
        issues_object_list = queryset[page_object.start:page_object.end]
    
        context = {
            'issues_object_list': issues_object_list,
            'page_html': page_object.page_html()
        }
        return render(request, 'issues.html', context)
    2. 前端
        {% for item in issues_object_list %}
            {{item.xxx}}
        {% endfor %}
    
         <nav aria-label="...">
            <ul class="pagination" style="margin-top: 0;">
                {{ page_html|safe }}
            </ul>
        </nav>
    """
    
    
    class Pagination(object):
        def __init__(self, current_page, all_count, base_url, query_params, per_page=30, pager_page_count=11):
            """
            分页初始化
            :param current_page: 当前页码
            :param per_page: 每页显示数据条数
            :param all_count: 数据库中总条数
            :param base_url: 基础URL
            :param query_params: QueryDict对象,内部含所有当前URL的原条件
            :param pager_page_count: 页面上最多显示的页码数量
            """
            self.base_url = base_url
            try:
                self.current_page = int(current_page)
                if self.current_page <= 0:
                    self.current_page = 1
            except Exception as e:
                self.current_page = 1
            query_params = query_params.copy()
            query_params._mutable = True
            self.query_params = query_params
            self.per_page = per_page
            self.all_count = all_count
            self.pager_page_count = pager_page_count
            pager_count, b = divmod(all_count, per_page)
            if b != 0:
                pager_count += 1
            self.pager_count = pager_count
    
            half_pager_page_count = int(pager_page_count / 2)
            self.half_pager_page_count = half_pager_page_count
    
        @property
        def start(self):
            """
            数据获取值起始索引
            :return:
            """
            return (self.current_page - 1) * self.per_page
    
        @property
        def end(self):
            """
            数据获取值结束索引
            :return:
            """
            return self.current_page * self.per_page
    
        def page_html(self):
            """
            生成HTML页码
            :return:
            """
            if self.all_count == 0:
                return ""
    
            # 如果数据总页码pager_count<11 pager_page_count
            if self.pager_count < self.pager_page_count:
                pager_start = 1
                pager_end = self.pager_count
            else:
                # 数据页码已经超过11
                # 判断: 如果当前页 <= 5 half_pager_page_count
                if self.current_page <= self.half_pager_page_count:
                    pager_start = 1
                    pager_end = self.pager_page_count
                else:
                    # 如果: 当前页+5 > 总页码
                    if (self.current_page + self.half_pager_page_count) > self.pager_count:
                        pager_end = self.pager_count
                        pager_start = self.pager_count - self.pager_page_count + 1
                    else:
                        pager_start = self.current_page - self.half_pager_page_count
                        pager_end = self.current_page + self.half_pager_page_count
    
            page_list = []
    
            if self.current_page <= 1:
                prev = '<li><a href="#">上一页</a></li>'
            else:
                self.query_params['page'] = self.current_page - 1
                prev = '<li><a href="%s?%s">上一页</a></li>' % (self.base_url, self.query_params.urlencode())
            page_list.append(prev)
            for i in range(pager_start, pager_end + 1):
                self.query_params['page'] = i
                if self.current_page == i:
                    tpl = '<li class="active"><a href="%s?%s">%s</a></li>' % (
                        self.base_url, self.query_params.urlencode(), i,)
                else:
                    tpl = '<li><a href="%s?%s">%s</a></li>' % (self.base_url, self.query_params.urlencode(), i,)
                page_list.append(tpl)
    
            if self.current_page >= self.pager_count:
                nex = '<li><a href="#">下一页</a></li>'
            else:
                self.query_params['page'] = self.current_page + 1
                nex = '<li><a href="%s?%s">下一页</a></li>' % (self.base_url, self.query_params.urlencode(),)
            page_list.append(nex)
    
            if self.all_count:
                tpl = "<li class='disabled'><a>共%s条数据,页码%s/%s页</a></li>" % (
                self.all_count, self.current_page, self.pager_count,)
                page_list.append(tpl)
            page_str = "".join(page_list)
            return page_str
  • 相关阅读:
    vi命令大全
    理解proc文件系统
    读目录
    取得系统资源信息
    qtempinc
    我实现的一个正则表达式代码
    oracle内置函数大全
    STL算法
    unix基础教程
    两日期间的天数
  • 原文地址:https://www.cnblogs.com/fangyu-blog/p/14512409.html
Copyright © 2011-2022 走看看