I am designing a blog on Python + Flask framework. In the blog homepage, I am querying all blog posts and displaying it in the HTML template with a flask pagination. The blog home page also has a search feature where you can filter on the blogs. All these functionalities work fine, however, once the search is executed, when more than 1 page of info is loaded, clicking on the second page link is refreshing the page without the original search parameters. The result is that all the blog posts are retrieved again and not according to the search filter. How do we retain the search results while moving across pages in the paginate?
Step 1: Home page shows all blog posts:
Step 2: Search with AI retrieves results correctly:
Step 3: Clicking on the pagination to move across the search result-set clears the search
Python Code for the Blog Home:
@core.route('/blog',methods=['GET', 'POST'])
@core.route('/blog/<keyword>',methods=['GET', 'POST'])
def blog_home(keyword=None):
search_form = SearchForm()
page = request.args.get('page',1,type=int)
keyword = request.args.get('keyword')
if keyword != None and keyword != '':
blog_posts = db.session.query(BlogPost).filter(BlogPost.blog_post.like('%' + keyword + '%') | BlogPost.title.like('%' + keyword + '%')).order_by(BlogPost.created_date.desc()).paginate(page=page,per_page=4)
else:
blog_posts = BlogPost.query.order_by(BlogPost.created_date.desc()).paginate(page=page,per_page=4)
search_form.keyword.data = keyword
return render_template('blog.html',blog_posts=blog_posts,search_form=search_form,keyword=keyword)
JINJA template with the pagination:
{% extends "blog_base.html"%}
{% block content %}
<script>
function clicked(item) {
alert($(item).attr("id"));
window.location.href='{{ url_for( 'users.update_profile' ) }}?view_blog_id=' + $(item).attr("id");
}
</script>
<div class="container pt-2">
<div class="input-group mb-3 pt-4 justify-content-center">
<form action="{{ url_for('core.blog_home',page=1) }}" method="GET">
{{ search_form.hidden_tag() }}
<div class="row">
<div class="col-md-11 col-sm-11">
{{ search_form.keyword(class='form-control') }}
</div>
<div class="col-md-1 col-sm-1">
{{ search_form.submit(class="btn btn-primary") }}
</div>
</div>
</form>
</div>
{% for mess in get_flashed_messages(with_categories=false) %}
<div class="alert alert-danger alert-dismissible fade show" role="alert">
<strong>{{mess}}</strong>
<button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
</div>
{% endfor %}
<div class="row">
{% for data in blog_posts.items %}
<div class="col-md-3 col-sm-6 pt-1">
<div class="card card-block click-class" id="{{data.id}}" onclick="clicked(this);">
<div class="mx-3 py-3">
<!--h4 class="card-title text-right pt-2"><i class="material-icons">settings</i></h4-->
<img src="data:image/jpeg;charset=utf-8;base64,{{data.title_image}}" class="image_custom"/>
<!--img src="{{ url_for('static', filename='images/marketing/marketing3.jpg') }}" alt="Photo of sunset" class="image_custom"-->
<h5 class="card-title mt-3 mb-3">{{data.author.firstname}} wrote on {{data.created_date.strftime('%B %d, %Y')}}</h5>
<p class="card-text">{{data.title}}</p>
</div>
</div>
</div>
{% endfor %}
</div>
<nav aria-label="Navigation" class="pt-4">
<ul class="pagination justify-content-center">
{% if blog_posts.has_prev %}
<li class="page-item">
<a href="{{ url_for('core.blog_home', page=blog_posts.prev_num) }}" class="page-link">Previous</a>
</li>
{% else %}
<li class="page-item disabled">
<a href="{{ url_for('core.blog_home', page=blog_posts.prev_num) }}" class="page-link">Previous</a>
</li>
{% endif %}
{% for page_num in blog_posts.iter_pages(left_edge=3,right_edge=3,left_current=3,right_current=3) %}
{% if page_num %}
{% if page_num != blog_posts.page %}
<li class="page-item"><a class="page-link" href="{{ url_for('core.blog_home', page=page_num) }}">{{ page_num }}</a></li>
{% else %}
<li class="page-item active">
<a class="page-link" href="{{ url_for('core.blog_home', page=page_num) }}">{{ page_num }}</a>
</li>
{% endif %}
{% else %}
<li>
<span class="ellipsis" style="white-space; nowrap; overflow: hidden; text-overflow: ellipsis">…</span>
</li>
{% endif %}
{% endfor %}
{% if blog_posts.has_next %}
<li class="page-item">
<a href="{{ url_for('core.blog_home', page=blog_posts.next_num, keyword=keyword) }}" class="page-link">Next</a>
</li>
{% else %}
<li class="page-item disabled">
<a href="{{ url_for('core.blog_home', page=blog_posts.next_num, keyword=keyword) }}" class="page-link">Next</a>
</li>
{% endif %}
</ul>
</nav>
</div>
{% endblock %}
Flask form:
class SearchForm(FlaskForm):
keyword = StringField('Keyword')
submit = SubmitField('Search')
Any help will be highly appreciated. Thank you in advance.