DEV Community

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

Django Datatables - Pagination, Search and Inline edit via Ajax

sm0ke profile image Sm0ke ・2 min read

Hello Coders,

This article presents an open-source Django project that provides a simple Datatable control enhanced with pagination, search, inline edit via Ajax activated when the user doubles click the table row.The information is loaded via the admin interface from a sample CSV file.

Starter provided by AppSeed - a platform used by 2k+ developers.


Thanks for reading! TL;DR; links:



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 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.


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

Other resources


Thank you!

Discussion

pic
Editor guide
Collapse
zolidev profile image
Collapse
sm0ke profile image
Sm0ke Author

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 Author

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