vero4karu
9/22/2014 - 6:29 PM

Flask with infinity scroll navigation

Flask with infinity scroll navigation

view.py
content_copyfile_download
from flask import current_app, render_template

@bp.route('')
@bp.route('/page/<int:page>')
def index(page=1):
    per_page = current_app.config['PER_PAGE']
    models = Model.query.paginate(page, per_page, False).items
    tmpl_name = 'models/index.html' if page == 1 else 'models/items.html'
    return render_template(tmpl_name, models=models, page=page)
theme.js
content_copyfile_download
$('.js-infinite-layout').infinitescroll({
  itemSelector: '.js-infinite-item',
  nextSelector: "div.js-infinite-navigation a:first",
  navSelector: "div.js-infinite-navigation",
});
items.html
content_copyfile_download
{% for model in models %}
    {% include 'models/item.html' %}
{% endfor %}
item.html
content_copyfile_download
<div class="js-infinite-item">
    == your data here == 
</div>
index.html
content_copyfile_download
<html>
    <body>
        <div class="container">
            {% if models %}
                <div class="js-infinite-layout">
                    {% include "models/items.html" %}
                    <div class="js-infinite-navigation">
                        <a href="{{ request.url }}/page/{{ page + 1 }}"></a>
                    </div>
                </div>
            {% else %}
                <p class="alert alert-info">
                    No jobs yet
                </p>
            {% endif %}
        </div>
        <script src="/static/dist/js/jquery/jquery.infinitescroll.js"></script>
        <script src="/static/dist/js/theme.js"></script>
    </body>
</html>
README.md
content_copyfile_download
  • Rendered
  • Source

Flask with infinity scroll navigation

Using: Flask, SQLAlchemy, Infinite-scroll