Paging of the flask page

Paging is a very common function , Especially when the data reaches a certain amount , If it's all on the page , It will make the page too long and affect the user experience , besides , There may also be problems such as slow loading . therefore , Paging is necessary .

This is the rendering of paging , The data are all from MySQL From the database .

Paging code

from flask import Flask,render_template,request
from flask_sqlalchemy import SQLAlchemy

app = Flask(__name__)

# Connect to database        
HOSTNAME = '127.0.0.1'
PORT     = '3306'
DARABASE = ''
USERNAME = ''
PASSWORD = ''
DB_URI = 'mysql+pymysql://{}:{}@{}:{}/{}?charset=utf8'.format(USERNAME,PASSWORD,HOSTNAME,PORT,DARABASE)
app.config['SQLALCHEMY_DATABASE_URI'] = DB_URI
app.config['SQLALCHEMY_TRACK_MODIFICATIONS'] = True
db = SQLAlchemy(app)

@app.route('/movie')
def movie():

    db.reflect()
    # Get all data tables 
    all_table={table_obj.name: table_obj for table_obj in db.get_tables_for_bind()}  
    # location movies surface 
    data=db.session.query(all_table['movies'])
    # The current page number , Start with the first page 
    page = int(request.args.get("page", 1))
    # The number of pages 
    per_page = int(request.args.get('per_page', 25))
    paginate = data.paginate(page, per_page, error_out=False)
    movies = paginate.items
    return render_template("movie.html",movies=movies, paginate=paginate)

paginate  It's a SQLAlchemy Medium Pagination Type object .paginate Method passed in two parameters , One page It's the current page , the other one per_page Is the maximum number of pieces of data displayed on each page .

The front-end code

 {% if paginate %}
    <ul class="pagination pagination-sm no-margin pull-right">

    <li><a href="/movie?page=1"> home page </a></li>     

    {% if paginate.has_prev %}
       <li class="active"><a href="/movie?page={
   { paginate.prev_num }}"> The previous page </a></li>         
    {% else %}
       <li class="disabled"><a href=""> The previous page </a></li>
    {% endif %}

    {% for v in paginate.iter_pages(1,1,3,1) %}   <!--iter_pages  It's an iterator   Returns the number of pages on the page bar   If it doesn't display   return None-->
       {% if v %}                                              <!--iter_pages(left_edge=2,left_current=2,right_current=5,right_edge=2) There are default parameters , Left edge display 2 individual , The right edge shows 2 individual , The left side of the current page number displays 2 individual , The right side of the current page number displays 5 individual -->
          {% if v==paginate.page %}
             <li class="active"><a href="#">{
   { v }}</a></li>    <!-- Displays the current number of pages -->
          {% else %}
             <li><a href="/movie?page={
   { v }}">{
   {v}}</a></li>   <!-- Displays the number of pages other than the current number -->
          {% endif %}
       {% else %}
          <li class="disabled"><a href="">&hellip;</a></li>    <!-- Show None Become an ellipsis -->
       {% endif %}
    {% endfor %}

    {% if paginate.has_next %}
       <li class="active"><a href="/movie?page={
   { paginate.next_num }}"> The next page </a></li>
    {% else %}
       <li class="disabled"><a href=""> The next page </a></li>
    {% endif %}

       <li><a href="/movie?page={
   { paginate.pages  }}"> Tail page </a></li>
    </ul>
 {% endif %}

Pagination The common properties of an object are ： 

• prev_num Previous page number
• next_num Next page number
• has_next Is there a next page True/False
• has_prev Is there a previous page True/False
• pages The total number of pages from the query
• total The total number of records

iter_pages It's an iterator Returns the number of pages on the page bar If it doesn't display return None.iter_pages(left_edge=2,left_current=2,right_current=5,right_edge=2) There are default parameters , Left edge display 2 individual , The right edge shows 2 individual , The left side of the current page number displays 2 individual , The right side of the current page number displays 5 individual

Analyze the above page code ：
1, On the whole, it is based on the current understanding of “ The previous page ”,“ Page number ” and “ The next page ” Make different settings
2, Use JinJa2 The macro , Definition page Method , Incoming paths and pagination Object as parameter . Generate paging content by calling macro execution .
3, utilize JinJa2 Of if Statement uses different elements depending on whether the current page has a previous page .
4, If the current page has a previous page , be pagination Object's has_prev by True, here li Labeled class by active, The previous page is clickable at this time .
5, If the current page does not have a previous page , be pagination Object's has_prev by False, here li Labeled class by disable, The previous page cannot be clicked at this time . The jump link will be #
6, And “ The previous page ” Dealing with something similar is right “ The next page ” To deal with . If the current page has a next page, set the style and click jump path , If there is no next page , Then it is set as non clickable and the jump path is #
7, utilize iter_pages(1,1,3,1) You will get a list of page numbers that should be displayed based on the current page . As shown in the screenshot above , If the current page is page 4 page , The contents of the paging list obtained are [1,None,3,4,5,6,None,10], If the current page is page 10 page , The contents of the paging list obtained are [1,None,9,10]
8, utilize JinJa2 Of for Statement traverses the list , If page number , It is generated according to the page number a Label text and set jump path and add page Parameters . If it is None,a The text in the label is the ellipsis of the entity name , Path is “#”. additional , If the number corresponding to the current page number is obtained during traversal , by li Labeled class Property to add extra active To get additional styles .

  Refer to the website ：https://zhuanlan.zhihu.com/p/94353052

These are basic knowledge and usage , If you want to know more about pagination and its usage , Please check out Pagination Chinese Manual https://cloud.tencent.com/developer/section/1489889.