Django Data Tables - Pagination, Search, inline edit via Ajax

Published Dec 09, 2020Last updated Jun 30, 2021

Hello Coders,

This article presents an open-source Django Project that showcases how to paginate real database information in Django and also edit the information inline, using Ajax calls.This starter can be downloaded from Github and used for hobby and commercial products. Being an open-source project, the codebase might help beginners to accommodate with a production-ready Django codebase.

Django Data Tables - LIVE Demo
Django Data Tables - source code
More Free Dashboards - a curated list

Django Datatables - Open-source project provided by AppSeed.

To use the starter, the first thing is to download the sources and compile them in a local environment. Python3 and GIT are must be properly installed and accessible via the terminal.

Step #1 - Download the sources using the terminal

$ # Get the code
$ git clone https://github.com/app-generator/django-datatables-sample.git
$ cd django-datatables-sample

Step #2 - Install modules using a virtual environment

$ # Virtualenv modules installation (Unix based systems)
$ virtualenv env
$ source env/bin/activate
$
$ # Install modules - SQLite Storage
$ pip3 install -r requirements.txt

Step #3 - Set up the database

Being a simple starter, we will use the inplicit SQLite provided by Django.

$ # Create tables
$ python manage.py makemigrations
$ python manage.py migrate

Step #4 - Create the superuser and start the app

Note: the superuser is required to access the admin section and load the data.

$ # Create app superuser
$ python manage.py createsuperuser
$
$ # Start the application (development mode)
$ python manage.py runserver # default port 8000
$
$ # Start the app - custom port
$ # python manage.py runserver 0.0.0.0:<your_port>
$
$ # Access the web app in browser: http://127.0.0.1:8000/

Using the superuser credentials (user and password) provided as input to the createsuperuser command, we need to acess the admin section and load the information that will be displayed and paginated in the datab table control.

Load Data For Datatable

In Django admin, you can import data for the Transaction section.
To do this just click on IMPORT button then select your csv, xls or etc file and submit it.

Import Data

Sample Data

Datatable for transactions

Imported information is displayed on the Transactions page.

Django Dashboard Volt - Template project provided by AppSeed.

Once we have the information in the database, on the page we can search, edit, and delete the transactions:

Information is paginated to navigate with ease: PREV, 1,2,3., NEXT controls
Search box to filter transactions by name
Delete row control
Edit cel data on double click and ENTER on confirm.

Django Dashboard Volt - Template project provided by AppSeed.

Project codebase structure

Project has a simple, intuitive stucture as presented below:

< PROJECT ROOT >
   |
   |-- core/                               # App settings and static assets
   |    |-- settings.py                    # Django app bootstrapper
   |    |-- static/
   |    |    |-- <css, JS, images>         # CSS files, Javascripts files
   |    |
   |    |-- templates/                     # Templates used to render pages
   |         |-- includes/                 # HTML chunks and components
   |         |-- layouts/                  # Master pages
   |         |-- accounts/                 # Authentication pages
   |         |    |-- login.html           # Login page
   |         |    |-- register.html        # Register page
   |         |
   |      index.html                       # The default page
   |       *.html                          # All other HTML pages
   |
   |-- authentication/                     # App - Handles auth routes 
   |
   |-- app/                                # App - Implements data tables logic  
   |
   |-- requirements.txt                    # Development modules - SQLite storage
   |-- manage.py                           # Django default start script
   |
   |-- ************************************

Data tables - Relevant files

The data tables logic has a controller implemented in the app / views file - TransactionView class:

...
class TransactionView(View):

    def get(self, request, pk=None, action=None):
    	...
    def post(self, request, pk=None, action=None):
    	...
    def put(self, request, pk, action=None):
    	...
...