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 <= 1:
            current_page = 1
        self.current_page = current_page
        # 數據總條數
        self.total_count = total_count

        # 每頁顯示10條數據
        self.per_page_count = per_page_count

        # 頁面上應該顯示的最大頁碼
        max_page_num, div = divmod(total_count, per_page_count)
        if div:
            max_page_num += 1
        self.max_page_num = max_page_num

        # 頁面上默認顯示11個頁碼（當前頁在中間）
        self.max_pager_count = max_pager_count
        self.half_max_pager_count = int((max_pager_count - 1) / 2)

        # URL前綴
        self.base_url = base_url

        # request.GET
        import copy
        params = copy.deepcopy(params)
        # params._mutable = True
        get_dict = params.to_dict()
        # 包含當前列表頁面全部的搜/索條件
        # {source:[2,], status:[2], gender:[2],consultant:[1],page:[1]}
        # self.params[page] = 8
        # self.params.urlencode()
        # source=2&status=2&gender=2&consultant=1&page=8
        # href="/hosts/?source=2&status=2&gender=2&consultant=1&page=8"
        # href="%s?%s" %(self.base_url,self.params.urlencode())
        self.params = get_dict

    @property
    def start(self):
        return (self.current_page - 1) * self.per_page_count

    @property
    def end(self):
        return self.current_page * self.per_page_count

    def page_html(self):
        # 若是總頁數 <= 11
        if self.max_page_num <= self.max_pager_count:
            pager_start = 1
            pager_end = self.max_page_num
        # 若是總頁數 > 11
        else:
            # 若是當前頁 <= 5
            if self.current_page <= self.half_max_pager_count:
                pager_start = 1
                pager_end = self.max_pager_count
            else:
                # 當前頁 + 5 > 總頁碼
                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"] <= 1:
            pervious_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 效果演示

效果演示：