flask 前端 分页 显示

flask 前端 分页 显示

---

1.分页原理

web查询大量数据并显示时有有三种方式：

• 从数据库中查询全部，在view/客户端筛选/分页；不能应对记录大多的情况，一般不使用；
• 分页查询，每次在数据库中查询一页的数据，具体查询条件根据请求中的页数来确定；数据库查询次数会比较多；
• 也是分页，不过一次查询多页(譬如10页)，传给客户端1页，在view中实现；较第二种方法而言数据库请求减少，但服务器开销会大一些；

2.具体实现

分页从功能上来说分为两部分：

• 获取当前页面内容并添加到html模板中；
• 构造'前一页''后一页'等页码内容并添加到html模板中；

一般而言使用分页类实现，可以自定义；

当然也有框架，FlaskSQLAlchem也有Pagination类型对象。一个Query对象调用paginate方法就获得了Pagination对象。

2.1 分页类

分页类的功能如下：

1. 确定当前页面记录的序号，比如每页20条记录，第5页，则本页记录的id应该是81-100；
2. 生成页码区块的html代码，由page_html方法实现；

from urllib.parse import urlencode,quote,unquote
class Pagination(object):
    """
    自定义分页
    """
    def __init__(self,current_page,total_count,base_url,params,per_page_count=10,max_pager_count=10):
        try:
            current_page = int(current_page)
        except Exception as e:
            current_page = 1
        if current_page  11
        else:
            # 如果当前页  总页码
                if (self.current_page + self.half_max_pager_count) > self.max_page_num:
                    pager_end = self.max_page_num
                    pager_start = self.max_page_num - self.max_pager_count + 1   #倒这数11个
                else:
                    pager_start = self.current_page - self.half_max_pager_count
                    pager_end = self.current_page + self.half_max_pager_count

        page_html_list = []
        # {source:[2,], status:[2], gender:[2],consultant:[1],page:[1]}
        # 首页
        self.params['page'] = 1
        first_page = '首页' % (self.base_url,urlencode(self.params),)
        page_html_list.append(first_page)
        # 上一页
        self.params["page"] = self.current_page - 1
        if self.params["page"] 上一页' % (self.base_url, urlencode(self.params))
        else:
            pervious_page = '上一页' % ( self.base_url, urlencode(self.params))
        page_html_list.append(pervious_page)
        # 中间页码
        for i in range(pager_start, pager_end + 1):
            self.params['page'] = i
            if i == self.current_page:
                temp = '%s' % (self.base_url,urlencode(self.params), i,)
            else:
                temp = '%s' % (self.base_url,urlencode(self.params), i,)
            page_html_list.append(temp)

        # 下一页
        self.params["page"] = self.current_page + 1
        if self.params["page"] > self.max_page_num:
            self.params["page"] = self.current_page
            next_page = '下一页' % (self.base_url, urlencode(self.params))
        else:
            next_page = '下一页' % (self.base_url, urlencode(self.params))
        page_html_list.append(next_page)

        # 尾页
        self.params['page'] = self.max_page_num
        last_page = '尾页' % (self.base_url, urlencode(self.params),)
        page_html_list.append(last_page)

        return ''.join(page_html_list)

2.2 路由

       @app.route('/list_t', methods=['GET'])
    def list_t():
        ori_data = ['第一列', '第二列', '空列']
        li = []
        for x in range(1000):
            li.append(ori_data + [x])
        pager_obj = Pagination(request.args.get("page", 1), len(li), request.path, request.args, per_page_count=10)
        index_list = li[pager_obj.start:pager_obj.end]
        pagination_html = pager_obj.page_html()
        return render_template("list_paper.html", index_list=index_list, html=pagination_html)

2.3 html代码

略

2.4 效果演示

效果演示：