Paginate long pages in flask flask-flatpages - flask

Question

I'm new with python, and i'm trying to make a website using the Flask framework.
I'm using the Flask-FlatPages extension to render markdown files from a specific directory, and i would like to paginate pages. To prevent long pages and infinite scrolling, i would like to cut pages and render each page on multiple pages. I'm thinking that a simple way could be to cut on html tag like <h2>.
I'm not sure that i am clear enough, the main idea is a kind of multi-part article or a series of article.
I have only found answers about using a database and paginate query results.
I don't know whether this should be done in python/flask or in a jinja template.
Edit :
As mentionned in my comment here, i'm using this for rendering my .md files :
pages = FlatPages(app)
#app.route('/')
def index():
# Articles are pages with a publication date
articles = (p for p in pages if 'published' in p.meta)
# Show the 10 most recent articles, most recent first.
latest = sorted(articles, reverse=True,
key=lambda p: p.meta['published'])
return render_template('articles.html', articles=latest[:10])
#app.route('/<path:path>/')
def page(path):
page = pages.get_or_404(path)
template = page.meta.get('template', 'flatpage.html')
return render_template(template, page=page)
And it's this route that i think i need to modify (or the flatpage template), to paginate page.

Answer 1

The simplest way to do this is to enable the table of contents extension in your FLATPAGES_MARKDOWN_EXTENSIONS (alternatively, you could enable header IDs or attribute lists and maintain the TOC yourself.):
FLATPAGES_MARKDOWN_EXTENSIONS = ['markdown.extensions.toc']
Then you can use a bit of CSS to style selected elements:
h2, p {
display: none;
}
/* At some future time
you'll be able to hide the summary
using the :has pseudo selector.
For now you'll have to use some JavaScript
to listen to click events on the TOC. */
h1:has(~ h2:target), h1:has(~ h2:target) + p {
display: none;
}
h1, h1:target + p,
h2:target, h2:target + p {
display: block;
}
/* TOC styling - not relevant to whole */
ul {
border: 1px solid gray;
list-style-type: none;
margin: 0;
padding: 1em .25em;
}
li {
display: inline-block;
margin: 0;
padding: 0;
}
li::before {
color: #777;
content: ":";
display: inline-block;
margin: 0 .5em;
}
li:first-child {
margin-left: 0;
}
li:first-child::before {
content: none;
}
<ul>
<li>summary
</li>
<li>1
</li>
<li>2
</li>
</ul>
<h1 id="summary">This is my article</h1>
<p>Some introductory content
<br>With some lines
<br>in it</p>
<h2 id="first-section">First section</h2>
<p>The most interesting thing about this content? It exists.</p>
<h2 id="second-section">Second section</h2>
<p>More content, content, content, content, content.</p>

Answer 2

Here's what I do. First you need to limit your database request so that if you're result is 2,000 records you only want to see the first 50 records you can do something like this at the end of your query....
"order by TableName.SomeID limit " + str(int(CurrentPage) * 50 - 50) + ", 50;"
Here's more about limit and the offset: http://www.mysqltutorial.org/mysql-limit.aspx
anyway use the CurrentPage to get your offset so that on page 1 the limit will look like this limit 0, 50 - meaning give me 50 rows and start from row 0. On page 2 the limit will look like this limit 50, 50 - meaning give me 50 rows and start from row 50. Also, you'll need to keep an order by clause in there so that the results stay consistently ordered while paging.
You'll also need to run another query without the limit so you know how many pages you have in total. This query can get away with only selecting count(*). Here's how I calc total pages from that query...
# 50 for the number of results per page
TotalPages = (ResultsCount[0]['Count(*)'] // 50)
# find out if there is a remainder of results if so add one more page
if((ResultsCount[0]['Count(*)'] % 50) > 0):
TotalPages +=1
Now your jinja2 should look something like this...
{% if TotalPages > 1 and CurrentPage < 15 %}
{% for Item in range(TotalPages) %}
{% if loop.index == CurrentPage %}
<div style="border: 1px solid; border-color: #1C5F8B; width: 22px; height: 16px; text-align: center; float: left; margin: 2px; padding-top: 2px"><b>{{ loop.index }}</b></div>
{% elif loop.index < 15 %}
<a style="cursor: pointer; color: #000000" href="/class/getdata?CurrentPage={{ loop.index }}"><div style="border: 1px solid; width: 22px; height: 16px; text-align: center; float: left; margin: 2px; padding-top: 2px">{{ loop.index }}</div></a>
{% elif loop.index == 15 %}
<a style="cursor: pointer; color: #000000" href="/class/getdata?CurrentPage={{ loop.index }}"><div style="border: 1px solid; width: 28px; height: 16px; text-align: center; float: left; margin: 2px; padding-top: 2px">Next</div></a>
{% endif %}
{% endfor %}
{% elif TotalPages > 1 and (CurrentPage + 15) < TotalPages %}
{% for Item in range(15 * CurrentPage) %}
{% if loop.index0 == (CurrentPage - 15) %}
<a style="cursor: pointer; color: #000000" href="/class/getdata?CurrentPage={{ loop.index }}"><div style="border: 1px solid; width: 28px; height: 16px; text-align: center; float: left; margin: 2px; padding-top: 2px">Prev</div></a>
{% elif loop.index == CurrentPage %}
<div style="border: 1px solid; border-color: #1C5F8B; width: 22px; height: 16px; text-align: center; float: left; margin: 2px; padding-top: 2px"><b>{{ loop.index }}</b></div>
{% elif loop.index > CurrentPage and loop.index < (CurrentPage + 15) and loop.index < TotalPages %}
<a style="cursor: pointer; color: #000000" href="/class/getdata?CurrentPage={{ loop.index }}"><div style="border: 1px solid; width: 22px; height: 16px; text-align: center; float: left; margin: 2px; padding-top: 2px">{{ loop.index }}</div></a>
{% elif loop.index == (CurrentPage + 15) and loop.index < TotalPages %}
<a style="cursor: pointer; color: #000000" href="/class/getdata?CurrentPage={{ loop.index }}"><div style="border: 1px solid; width: 28px; height: 16px; text-align: center; float: left; margin: 2px; padding-top: 2px">Next</div></a>
{% elif loop.index == TotalPages and (CurrentPage + 15) > TotalPages %}
<a style="cursor: pointer; color: #000000" href="/class/getdata?CurrentPage={{ loop.index }}"><div style="border: 1px solid; width: 22px; height: 16px; text-align: center; float: left; margin: 2px; padding-top: 2px">{{ loop.index }}</div></a>
{% endif %}
{% endfor %}
{% elif TotalPages > 1 %}
{% for Item in range(15 * CurrentPage) %}
{% if (loop.index - 1) == (CurrentPage - 15) %}
<a style="cursor: pointer; color: #000000" href="/class/getdata?CurrentPage={{ loop.index }}"><div style="border: 1px solid; width: 28px; height: 16px; text-align: center; float: left; margin: 2px; padding-top: 2px">Prev</div></a>
{% elif loop.index == CurrentPage %}
<div style="border: 1px solid; border-color: #1C5F8B; width: 22px; height: 16px; text-align: center; float: left; margin: 2px; padding-top: 2px"><b>{{ loop.index }}</b></div>
{% elif loop.index > (TotalPages - 15) and loop.index < (CurrentPage + 15) and loop.index < TotalPages %}
<a style="cursor: pointer; color: #000000" href="/class/getdata?CurrentPage={{ loop.index }}"><div style="border: 1px solid; width: 22px; height: 16px; text-align: center; float: left; margin: 2px; padding-top: 2px">{{ loop.index }}</div></a>
{% elif loop.index == TotalPages and (CurrentPage + 15) > TotalPages %}
<a style="cursor: pointer; color: #000000" href="/class/getdata?CurrentPage={{ loop.index }}"><div style="border: 1px solid; width: 22px; height: 16px; text-align: center; float: left; margin: 2px; padding-top: 2px">{{ loop.index }}</div></a>
{% endif %}
{% endfor %}
{% endif %}
Hope this helps!