scabbiaza/README.md

## README.md

      
    Raw
  

              README.md
            
          
    Flask with infinity scroll navigation

Using: Flask, SQLAlchemy,  Infinite-scroll

  
## index.html
<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>

## item.html
<div class="js-infinite-item">
    == your data here ==
</div>

## items.html
{% for model in models %}
    {% include 'models/item.html' %}
{% endfor %}

## theme.js
$('.js-infinite-layout').infinitescroll({
  itemSelector: '.js-infinite-item',
  nextSelector: "div.js-infinite-navigation a:first",
  navSelector: "div.js-infinite-navigation",
});

## view.py
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)
	<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>
	{% for model in models %}
	{% include 'models/item.html' %}
	{% endfor %}
	$('.js-infinite-layout').infinitescroll({
	itemSelector: '.js-infinite-item',
	nextSelector: "div.js-infinite-navigation a:first",
	navSelector: "div.js-infinite-navigation",
	});
	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)