DEV Community

Cover image for Django Datatables - Pagination, Search and Inline edit via Ajax
Sm0ke
Sm0ke

Posted on • Updated on

Django Datatables - Pagination, Search and Inline edit via Ajax

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 loads the information via the admin interface from a sample CSV file.

For newcomers, Django is a Python Web framework built by experienced developers that encourages rapid development.

Django Datatables - Open-source project provided by AppSeed.


How to compile the app

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

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

$ # 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
Enter fullscreen mode Exit fullscreen mode

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:

$ # Create app superuser
$ python manage.py createsuperuser
Enter fullscreen mode Exit fullscreen mode

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

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

Django Dashboard Volt - Template project provided by AppSeed.


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:

Top comments (5)

Collapse
 
zoltanszogyenyi profile image
Zoltán Szőgyényi

Awesome 😁

Collapse
 
sm0ke profile image
Sm0ke

Thank you! :)

Collapse
 
crearesite profile image
WebsiteMarket

This is something I might use in my projects. Also, the UI looks super.

Collapse
 
sm0ke profile image
Sm0ke

Thanks! .. The UI is an open-source BS5 Kit - Volt Dashboard crafted by Themesberg

Collapse
 
kachmul2004 profile image
kachmul2004

is it possible to paginate json data?