Implementing ezTables in Django Based Web Applications

by Applied Informatics

Implementing Eztables in Django Based Web Applications

 

DataTables is a plug-in for the JQuery Javascript library. It is a highly flexible tool, based upon the foundations of progressive enhancement and can be used to give controls to any HTML Table. It can provide certain features to a website ranging from pagination support to search support or filtering.

However, one of the main things that we face in the usage of dataTables include the integration part with Django. Now this is where Django ezTables plays its role. 

Django ezTables provide an easy mode for integrating DataTables and Django. For usage of Django ezTable in a Django Project certain steps have to be followed right from installing of the requirements to complete integration with Django. 

1. Features

  • Datatables.net, plugins and localization integration with Django.
  • Server-side processing with a simple view supporting:
    • sorting (single and multi columns)
    • filtering with regex support (global and by column)
    • formatting using format pattern
  • Deferred loading support.
  • Twitter Bootstrap integration.

2. Requirements

For the integration of Django ezTables the main requirements are:

  • Python 2.6 or above.
  • Django 1.4 or above.
  • Django.js 0.7.6 or above.

3. Installation

Once the virtual environment is set for a Django Project, we can install django ezTable by any one of the following commands:

Install Django ezTables with pip:

$ pip install django-eztables

or we can install it by using easy_install:

$ easy_install django-eztables

Once the installations are done we need to add the apps to our Django Project settings.

To do that, add djangojs and eztables to the list of Installed apps in the settings.py file of the Django Project.

4. Including eztables in Templates

Initialization

Once the requirements are fulfilled we need to include it in templates. This can be done manually for each of the templates by loading the template tag lib.  

{% load eztables %}

The other way to load the template tag lib is by adding it to your views.py:

from django.template import add_to_builtins

add_to_builtins(‘eztables.templatetags.eztables’)

5. Usage

Datatables_js

A {% datatables_js %} tag is available to include the datatables javascript library. After loading we can use the datatables library as usual.

Bootstrap support

If we want to use the twitter bootstrap style (based on this blog post), 2 template tags are provided for:

    • {% datatables_bootstrap_js %} for the javascript part.
    • {% datatables_bootstrap_css %} for the css part.

 

    {% datatables_bootstrap_css %}

    {% datatables_js %}
    {% datatables_bootstrap_js %}

$('.datatable-my_table').dataTable({
         "sDom": "<'row-fluid'<'span8'l><'span4'f>r>t<'row-fluid'<'span12'i><'span12 center'p>>",
            "sPaginationType": "bootstrap",
            "oLanguage": {
            "sLengthMenu": "_MENU_ records per page"
            },
            "bProcessing": true,
            "bServerSide": true,
            "aaSorting": [[1,'asc']],
           "fnServerData": function ( sSource, aoData, fnCallback ) {
                $.ajax( {
                    cache: false,
                    "dataType": 'json',
                    "type": "GET",
                    "url": sSource,
                    "data": aoData,
                    "success": fnCallback
                });
             }
    });

Server Side Processing

In server side processing django eztables provide simple view sorting that includes:

      • sorting (single and multi columns)
      • filtering with regex support (global and by column)
      • formatting using format pattern

Depending on the usage, custom search or custom sorting can be done on the datatable.  

It follows the Django Class-based Views pattern and can render Array-based or Object-based JSON.

As it extends django.views.generic.list.MultipleObjectMixin it expects the model attribute to be set in both case.

Both modes expect a fields attribute that can optionally contain format patterns.

Array-based JSON

To render an array-based JSON, we must provide fields as a list or a tuple containing the field names.

from eztables.views import DatatablesView

from (appname.models) import (modelname)

where appname is the name of app where we want to use eztables and modelname is the name of the model on which we want to implement the eztables.

class New(DatatablesView):
    model =modelname
    fields = (
       fields in the model
    )
we can simply  instanciate the datatable with:
$(function(){
    $('#my_table').dataTable({
        "bPaginate": true,
        "sPaginationType": "bootstrap",
        "bProcessing": true,
        "bServerSide": true,
        "sAjaxSource": Django.url('dt-browsers-default')
    });
});

Custom sort

We can implement a custom sort method. It has to be named sort_col_X where X should be the index given by the datatables request (corresponding to the filtered column).

It takes the requested direction (” or ‘-‘) as a parameter and should return one or more Django order statement.

class CustomSortNewDatatablesView(NewDatatablesView):

    def sort_col_1(self, direction):
        return '%fieldname' % direction

    def sort_col_2(self, direction):
        return ('%fieldname1' % direction, '%fieldname2' % direction)

Custom Search

We can implement a custom search method. It has to be named search_col_X where X should be the index given by the datatables request (corresponding to the filtered column).

It takes the search term and the query set to filter as a parameter and should return the filtered query set.

class CustomSearchNewDatatablesView(NewDatatablesView):

    def search_col_1(self, search, queryset):
        return queryset.filter(fieldname__icontains=search)

Localization

Django eztables provide the embedding of the datatable localizations. The naming conventions for the eztables are as below:

{{STATIC_URL}}/js/libs/datatables/language.{{LANG}}.json

Once the localization is done we can simply retrieve them with django.js:

$('#my-table').dataTable({
    ...
    "oLanguage": {
        "sUrl": Django.file("js/libs/datatables/language.fr.json")
    }
    ...
});

If one is interested in the language code then that too can be retrieved by django.js:

var code = Django.context.LANGUAGE_CODE

In this way eztables can be embedded in a Django project giving an interactive feel to the website.

Leave a Reply

Your email address will not be published. Required fields are marked *

Tools & Practices

Tools and Technologies we use at Applied

Contact us now

Popular Posts