Django Datatables - Pagination, Search and Inline edit via Ajax
Tags: django, dashboards, opensource, appseed
Published: 2020-11-24 16:00:38

---
title: Django Datatables - Pagination, Search and Inline edit via Ajax
published: true
description: An open-source sample coded in Django that provides paginated information, search, and inline edit  
tags: django, dashboards, opensource, appseed
cover_image: https://raw.githubusercontent.com/app-generator/django-datatables-sample/master/media/django-dashboard-volt-screen.png
---
Hello Coders, 

This article presents an open-source **Django** project that provides a simple Datatable control enhanced with pagination, search, and inline edit via Ajax activated when the user clicks the table row. **[Django Datatables Sample](https://github.com/app-generator/django-datatables-sample)** loads the information via the admin interface from a sample CSV file. 

For newcomers, **[Django](https://www.djangoproject.com/)** is a Python Web framework built by experienced developers that encourages rapid development.

- 👉 [Django Datatables Sample](https://github.com/app-generator/django-datatables-sample) - source code
- 👉 (Free) [Django Bootstrap 5](https://appseed.us/product/volt-dashboard/django/) - the initial starter 

![Django Datatables - Open-source project provided by AppSeed.](https://raw.githubusercontent.com/app-generator/django-datatables-sample/master/media/django-datatables-sample-intro.gif)

---

## How to compile the app

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

Once you get the code, we need to install the dependencies and create the tables: 

```bash
$ # Virtualenv modules installation (Unix based systems)
$ virtualenv env
$ source env/bin/activate
$
$ # Install modules - SQLite Storage
$ pip3 install -r requirements.txt
$
$ # Create tables
$ python manage.py makemigrations
$ python manage.py migrate
```

The sample information provided in a CSV file can be loaded with ease via admin interface and *django-import-export* package. To get access to the admin section, please create a superuser first:

```bash
$ # Create app superuser
$ python manage.py createsuperuser
```

---

## Load Data For Datatables 

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](https://raw.githubusercontent.com/app-generator/django-datatables-sample/master/media/transactions_screenshot_3.png)

> Sample **[Data](https://github.com/app-generator/django-datatables-sample/blob/master/sample_data/transactions_data.csv)**

---

## Datatable for transactions

Imported information is displayed on the **Transactions** page. 

![Django Dashboard Volt - Template project provided by AppSeed.](https://raw.githubusercontent.com/app-generator/django-datatables-sample/master/media/transactions_screenshot_1.png)

---

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 cell data on double click and ENTER on confirm.

![Django Dashboard Volt - Template project provided by AppSeed.](https://raw.githubusercontent.com/app-generator/django-datatables-sample/master/media/transactions_screenshot_2.png)
 
---

Based on the permissive (MIT) license, the project code can be copied and used for hobby & commercial projects. 

---

> Thanks for reading! For more resources, please access:

- 👉 [Django](https://www.djangoproject.com/) - official website
- 👉 More [Django Dashboards](https://appseed.us/admin-dashboards/django/) - generated by AppSeed