Simple Flask Pagination

Here is a simple step-by-step tutorial on how to implement pagination in Flask

Flask logo

Flask is known for being lightweight and helping you build as quickly as possible once you are proficient enough.

Our Task: Return all colors available paginated by five items per page.

1. Define the data from the back end. (You should have added colors to your colors table in the database.)

@app.route('/colors')
@login_required
def colors():
    # Get the data from the database
    colors = Color.query.all()
    return render_template('colors/all_colors.html', colors=colors)

2. Display the items on the page.

<div class="table-responsive">
    <table class="table table-sm table-borderless mb-0">
        <thead class="thead-dark">
            <tr>
                <th>S/N</th>
                <th>Color Name</th>
                <th>Date Created</th>
                <th>Actions</th>
            </tr>
        </thead>
        <tbody>
            {% for color in colors %}
            <tr>
                <th scope="row">{{ loop.index }}</th>
                <td>{{ color.name }}</td>
                <td>{{ color.created_at }}</td>
            </tr>
            {% endfor %}
        </tbody>
    </table>
</div>

All colors will then be displayed.

Now the Pagination Part

3. Modify the view to cater to pagination.

ROWS_PER_PAGE = 5
@app.route('/colors')
@login_required
def colors():
    # Set the pagination configuration
    page = request.args.get('page', 1, type=int)

    colors = Color.query.paginate(page=page, per_page=ROWS_PER_PAGE)
    return render_template('colors/all_colors.html', colors=colors)

Results are paginated using the paginate function of Flask SQLAlchemy with any number of arguments as desired. The result of calling the paginate() function is a Pagination Object, which has many methods that can help you achieve your desired result. You can read more about this in…