Coder Social home page Coder Social logo

postdispatchinteractive / webstack-django-sorting Goto Github PK

View Code? Open in Web Editor NEW

This project forked from webstack/webstack-django-sorting

0.0 0.0 0.0 91 KB

Easy sorting of rows by clicking on table headers for Django

License: Other

Python 85.12% HTML 7.20% Jinja 7.68%

webstack-django-sorting's Introduction

webstack-django-sorting

What?

webstack-django-sorting is a Django app which allows for easy sorting of data tables. You don't need to change anything to your views to use it. It provides sorting links for table headers. It is the perfect companion of django-pagination.

There are other powerful projects to sort tables such as django-tables2 but I don't like the high level render_table tag because it requires to define the CSS in Table classes or to write custom templates.

A demonstration of the features is provided in testproj directory.

Features

  • Django or Jinja2 templates
  • Django ORM or Python sorting
  • Switches between ascending, descending, and no sorting
  • Provides links to sort on different criterions
  • Visual feedback on applied ordering
  • Supports 3.6+
  • Supports translation of link titles

To upgrade to webstack-django-sorting v1.0.0+, you must remove the old middleware webstack_django_sorting.middleware.SortingMiddleware from MIDDLEWARE_CLASSES list.

How to use it in your project

The provide is available on PyPI:

pip install webstack_django_sorting

The project provides examples of integration with Django and Jinja2 templates.

For Django templates

  1. Add the application to the INSTALLED_APPS list:

       INSTALLED_APPS = [
           # ...
           'webstack_django_sorting',
       ]
  2. Check the request context processor is loaded in TEMPLATES options:

       TEMPLATES = [
           {
               'BACKEND': 'django.template.backends.django.DjangoTemplates',
               'DIRS': [],
               'APP_DIRS': True,
               'OPTIONS': {
                   'context_processors': [
                       # ...
                       'django.template.context_processors.request',
                       # ...
                   ],
               },
           },
       ]
  3. Add this line at the top of your template to load the sorting tags:

    {% load sorting_tags %}
    
  4. Decide on a variable that you would like to sort, and use the autosort tag on that variable before iterating over it:

    {% autosort object_list %}
    
  5. Now, you want to display different headers with links to sort your objects_list:

        <tr>
           <th>{% anchor first_name _("Name") %}</th>
           <th>{% anchor creation_date _("Creation") %}</th>
        </tr>

    The first argument is a field or an attribute of the objects list, and the second one (optional) is a title that would be displayed. The previous snippet will be rendered like this in French:

        <tr>
            <th><a href="/path/to/your/view/?sort=first_name" title="Nom">Nom</a></th>
            <th><a href="/path/to/your/view/?sort=creation_date" title="Création">Création</a></th>
        </tr>

    If your application doesn't support internationalization, you can use a simple {% anchor first_name Name %}.

For Jinja2 templates

  1. Define the environment in the TEMPLATES options:

        TEMPLATES = {
            {
                "BACKEND": "django.template.backends.jinja2.Jinja2",
                "DIRS": [],
                "APP_DIRS": True,
                "OPTIONS": {
                    "environment": "testproj.testapp.jinja2.env.JinjaEnvironment",
                },
            },
        ]
  2. Your environment file should add sorting_anchor and sort_queryset to globals:

    from jinja2.environment import Environment
    from webstack_django_sorting.templatetags.jinja2_globals import sorting_anchor, sort_queryset
    
    class JinjaEnvironment(Environment):
        def __init__(self, **kwargs):
            super().__init__(**kwargs)
            self.globals["sorting_anchor"] = sorting_anchor
            self.globals["sort_queryset"] = sort_queryset
  3. Now, you can generate header links to sort your queryset:

        <tr>
           <th>{{ sorting_anchor(request, "created_on", "Date") }}</th>
           <!--...-->
        <tr>
  4. The queryset should be wrapped with sort_queryset to use the GET request arguments for sorting:

        {% for secret_file in sort_queryset(request, secret_files) %}
        <!--...-->
        {% endfor %}

That's it!

webstack-django-sorting's People

Contributors

artscoop avatar directeur avatar ericflo avatar jezdez avatar kirkman avatar rbarrois avatar stephane 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.