Django-Datentabellen – Paginierung, Suche, Inline-Bearbeitung über Ajax

Hallo Coder,

Dieser Artikel stellt ein Open-Source-Django-Projekt vor, das zeigt, wie echte Datenbankinformationen in Django paginiert und die Informationen auch inline mit Ajax-Aufrufen bearbeitet werden. Dieser Starter kann von Github heruntergeladen und für Hobby- und kommerzielle Produkte verwendet werden. Da es sich um ein Open-Source-Projekt handelt, könnte die Codebasis Anfängern helfen, mit einer produktionsreifen Django-Codebasis zurechtzukommen.



Django Datatables – Open-Source-Projekt, bereitgestellt von AppSeed.


Um den Starter zu verwenden, müssen Sie zunächst die Quellen herunterladen und in einer lokalen Umgebung kompilieren. Python3 und GIT müssen ordnungsgemäß installiert und über das Terminal zugänglich sein.

Schritt 1 – Laden Sie die Quellen über das Terminal herunter

$ 
$ git clone 
$ cd django-datatables-sample

Schritt 2 – Installieren Sie Module mithilfe einer virtuellen Umgebung

$ 
$ virtualenv env
$ source env/bin/activate
$
$ 
$ pip3 install -r requirements.txt

Schritt 3 – Richten Sie die Datenbank ein

Als einfacher Einstieg verwenden wir das von Django bereitgestellte implizite SQLite.

$ 
$ python manage.py makemigrations
$ python manage.py migrate

Schritt 4 – Erstellen Sie den Superuser und starten Sie die App

Hinweis: Der Superuser ist erforderlich, um auf den Admin-Bereich zuzugreifen und die Daten zu laden.

$ 
$ python manage.py createsuperuser
$
$ 
$ python manage.py runserver 
$
$ 
$ 
$
$ 

Verwenden Sie die Superuser-Anmeldeinformationen (Benutzer und Kennwort), die als Eingabe für die bereitgestellt werden createsuperuser Befehl müssen wir auf den Admin-Bereich zugreifen und die Informationen laden, die in der Datenb-Tabellensteuerung angezeigt und paginiert werden.


Daten für Datentabelle laden

In der Django-Verwaltung können Sie Daten für die importieren Transaktion Sektion.
Klicken Sie dazu einfach auf IMPORTIEREN Wählen Sie dann Ihre CSV-, XLS- oder etc-Datei aus und senden Sie sie ab.

Daten importieren

Probe Daten


Datentabelle für Transaktionen

Importierte Informationen werden auf dem angezeigt Transaktionen Seite.

Django Dashboard Volt – Vorlagenprojekt bereitgestellt von AppSeed.


Sobald wir die Informationen in der Datenbank haben, können wir auf der Seite Suche, bearbeitenund löschen die Transaktionen:

  • Die Informationen sind für eine einfache Navigation paginiert: ZURÜCK, 1,2,3., NÄCHSTE Steuerelemente
  • Suchfeld, um Transaktionen nach Namen zu filtern
  • Zeilensteuerung löschen
  • Bearbeiten Sie die Cel-Daten mit einem Doppelklick und bestätigen Sie mit ENTER.

Django Dashboard Volt – Vorlagenprojekt bereitgestellt von AppSeed.


Codebasisstruktur des Projekts

Project hat eine einfache, intuitive Struktur, wie unten dargestellt:

< PROJECT ROOT >
   |
   |-- core/                               
   |    |-- settings.py                    
   |    |-- static/
   |    |    |-- <css, JS, images>         
   |    |
   |    |-- templates/                     
   |         |-- includes/                 
   |         |-- layouts/                  
   |         |-- accounts/                 
   |         |    |-- login.html           
   |         |    |-- register.html        
   |         |
   |      index.html                       
   |       *.html                          
   |
   |-- authentication/                     
   |
   |-- app/                                
   |
   |-- requirements.txt                    
   |-- manage.py                           
   |
   |-- ************************************

Datentabellen – Relevante Dateien

Die Logik der Datentabellen hat einen Controller, der in der implementiert ist App / Ansichten Datei – Transaktionsansicht Klasse:

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

Der Ajax-Fluss ist definiert in app.js innerhalb der Anwendung / statisch Mappe.

Sobald die Informationen auf der Seite angezeigt werden und der Benutzer auf eine Tabellenzeile doppelklickt, kann die aktuelle Zeile bearbeitet werden.


Feedback- und Vorschlagsfunktionen

Das Projekt wird aktiv unterstützt und wird mit Funktionen verbessert, die in den Kommentaren oder PR-Vorschlägen auf öffentlichem Github vorgeschlagen werden Repository.


Vielen Dank! Übrigens, mein (Spitz-)Name ist Sm0ke und ich bin auch ziemlich aktiv auf Twitter.

Similar Posts

Leave a Reply

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