Giter VIP home page Giter VIP logo

django-pagemore's Introduction

django-pagemore

KISS approach to a "Load more" style AJAX paginator

Requirements

  • Django 1.3+
  • jQuery

Features

  • Non-intrusive: your Django view is completely unaware of dynamic load-more stuff going on.
  • There is literally no code (no Python, no Javascript) required to get a fully AJAX style "load more" going.
  • KISS

Quickstart

  • Write your view as usual, handing over an (unpaginated) list of items to a template.

  • Render the list of items in your template as follows:

    {% load pagemore %}
    {% more_paginator items per_page=10 ordered_by="-created_at" as paginator %}
    
    {% for item in paginator.objects %}
    {% if forloop.first %}
    <div class="pagemore-container">
    {% endif %}
    {{item}}
    {% if forloop.last %}
    </div>
    {% if paginator.has_more %}
    <a class="pagemore-paginator" href="?{{paginator.next_query}}">More items...</a>
    {% endif %}
    {% endif %}
    {% endfor %}
    
    <script type="text/javascript" src="{{STATIC_URL}}pagemore/js/pagemore.js"></script>
    <script type="text/javascript">
        $(function() { $(".pagemore-paginator").pagemore(); });
    </script>
    
  • That's all!

Pagination Strategies

When a user is paginating through a list of items, while at the same time new items are being inserted, offset based slicing would result in duplicate items being shown. A way to circumvent this is to make sure that the items are properly ordered and to filter on items after a certain point. Both strategies are supported.

Paginate by Slicing

Usage:

{% more_paginator ... strategy="slice" ... %}

Characteristics:

  • Supports both querysets and lists
  • Does not order the objects unless explicitly told to (ordered_by).

Paginate by Filtering

Usage:

{% more_paginator ... strategy="filter" ... %}

Characteristics:

  • Only supports querysets
  • Enforces an ordering of the objects passed (default on id, overridable by ordered_by).

django-pagemore's People

Contributors

dulacp avatar miltonln avatar pennersr avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.