Django Datatables

Prerequites

settings.py - /path/projectdir/theproject

INSTALLED_APPS = [
    ...
    'theapp',
]

urls.py - /path/projectdir/theproject

from django.contrib import admin
from django.urls import path, include
    
urlpatterns = [
...
    path('', include('theapp.urls')),

urls.py - /path/projectdir/theapp

from django.urls import path 
from . import views
    
urlpatterns = [     
    path('datatables-test', views.datatables_test, name='datatables_test'),
...

Usage Example

models.py - /path/projectdir/theapp

from django.db import models

class Students(models.Model):
    id = models.BigAutoField(primary_key=True)
    name = models.CharField(max_length=255)
    email = models.CharField(unique=True, max_length=255)
    gender = models.CharField(max_length=255)
    admission_date = models.DateField()
    age = models.IntegerField(default=0)
    percent = models.FloatField()

    class Meta:
        managed = False
        db_table = 'students'


    def __str__(self):
        return self.name

views.py - /path/projectdir/theapp

def datatables_test(request): 
    from .models import Students
    students = Students.objects.all()

    # processing if required
    from django.utils.safestring import mark_safe
    for i in range(len(students)):
        students[i].name = mark_safe('<a href="" onclick="showid(' + str(students[i].id) + ')">' + students[i].name + '</a>')

    return render(request, 'database/datatables-test.html', { 'title': 'Datatables Test', 'students': students } )

views.py - /path/projectdir/theapp

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8" name="viewport" content="width=device-width, initial-scale=1"/>
    <title>Django DataTables</title>
    <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css"/>
    <link rel = "stylesheet" type = "text/css" href = "https://cdn.datatables.net/1.11.5/css/jquery.dataTables.min.css"/>
    <script src="https://cdn.jsdelivr.net/npm/jquery@3.6.0/dist/jquery.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js"></script>
    <script src = "https://cdn.datatables.net/1.11.5/js/jquery.dataTables.min.js"></script>
    <style> .table { border: 1px solid #ddd } </style> 
    <script type = "text/javascript">
        $(document).ready(function(){
            $('#table').DataTable({ 
                "pageLength": 10, 
                "order": [[ 0, "asc" ]], // col, asc/desc
            });
        });
        function showid(id) { alert('ID: ' +id) }
    </script>    
</head>
<body>
    <div class="container">
        <p><h3>Django DataTables</h3></p>
        <table id="table" class="table table-bordered table-striped display">
            <thead>
                <tr>
                    <th>Name</th>
                    <th>Email</th>
                    <th>Gender</th>
                    <th class="text-end">Age</th>
                    <th class="text-end">Score %</th>                    
                </tr>
            </thead>
            <tbody>
                {% for student in students %}
                    <tr>
                        <td>{{ student.name }}</td>
                        <td>{{ student.email }}</td>
                        <td>{{ student.gender }}</td>
                        <td class="text-end">{{ student.age }}</td>
                        <td class="text-end">{{ student.percent }}</td>    
                    </tr>
                {% endfor %}
            </tbody>
        </table>
    </div>    
</body>
</html>

Datatables Test

Students Table Script

CREATE TABLE `students` (
    `id` bigint(20) UNSIGNED NOT NULL,
    `name` varchar(255) NOT NULL,
    `email` varchar(255) NOT NULL,
    `gender` varchar(255) NOT NULL,
    `age` int(10) UNSIGNED DEFAULT NULL,
    `admission_date` date DEFAULT NULL,
    `percent` float(5,2) UNSIGNED DEFAULT NULL
) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4 COLLATE=utf8mb4_unicode_ci;

--
-- Dumping data for table `students`
--

INSERT INTO `students` (`id`, `name`, `email`, `gender`, `age`, `admission_date`, `percent`) VALUES
(1, 'Vella KassulkeV', 'phoeger@yahoo.com', 'Female', 25, '2023-05-27', 50.06),
(2, 'Herbert Abernathy', 'fluettgen@yahoo.com', 'Male', 25, '2022-03-11', 79.50),
(3, 'Glenna Murphy', 'pkuhic@hotmail.com', 'Male', 23, '2024-12-21', 74.32),
(4, 'Ines Fadel', 'eveline.mante@gmail.com', 'Female', 25, '2023-06-26', 83.11),
(5, 'Audreanne Wolf', 'maryse.cartwright@yahoo.com', 'Female', 22, '2023-07-15', 60.57),
(6, 'Sydni Emard', 'hills.evalyn@hotmail.com', 'Male', 21, '2025-02-04', 85.53),
(7, 'Imelda Prosacco', 'colton55@yahoo.com', 'Female', 25, '2023-03-30', 72.94),
(8, 'Alec Hansen', 'casey.wehner@gmail.com', 'Male', 23, '2025-02-20', 58.13),
(9, 'Shanny O\'Connell', 'kirlin.leopoldo@hotmail.com', 'Male', 20, '2024-05-02', 62.81),
(10, 'Elouise HandV', 'phaley@hotmail.com', 'Female', 25, '2024-02-16', 89.66),
(11, 'Augustus Denesik', 'rhammes@yahoo.com', 'Female', 22, '2022-05-02', 86.88),
(12, 'Emiliano Schaden Sr.', 'selena.jakubowski@gmail.com', 'Female', 22, '2023-07-01', 74.40),
(13, 'Fabiola Bartoletti', 'bonita.donnelly@hotmail.com', 'Female', 20, '2025-03-10', 61.38),
(14, 'Jaiden Farrell', 'hermann.ida@gmail.com', 'Female', 24, '2023-10-26', 74.70),
(15, 'Neha Kunde', 'langosh.colton@gmail.com', 'Male', 22, '2024-07-26', 57.36),
(16, 'Troy Schamberger', 'gparker@hotmail.com', 'Male', 24, '2022-11-29', 53.71),
(17, 'Kadin Wolf', 'cwhite@yahoo.com', 'Male', 22, '2025-01-25', 87.45),
(18, 'Timothy Schneider', 'jaylin62@yahoo.com', 'Female', 20, '2024-12-21', 62.11),
(19, 'Missiviane Gleichner', 'efren.lang@gmail.com', 'Male', 21, '2024-05-10', 80.21),
(20, 'Nya Harber', 'tkutch@yahoo.com', 'Female', 24, '2024-09-29', 82.73),
(21, 'Emmanuelle Zieme', 'gustave.kemmer@gmail.com', 'Male', 21, '2022-03-11', 82.03),
(22, 'Cheyanne Schroeder', 'ahmed.friesen@hotmail.com', 'Female', 20, '2024-02-07', 70.94),
(23, 'Raleigh Upton', 'temmerich@hotmail.com', 'Female', 22, '2022-04-18', 58.61),
(24, 'Carey Blick', 'haley.elinore@hotmail.com', 'Female', 24, '2023-05-19', 71.25),
(25, 'Lennie Lind', 'barton.jazmin@gmail.com', 'Female', 22, '2024-09-16', 89.42),
(26, 'Riley Gibson', 'vhayes@gmail.com', 'Female', 20, '2024-12-13', 60.32),
(27, 'Mario Toy', 'justen.nienow@hotmail.com', 'Female', 21, '2022-02-28', 65.36),
(28, 'Tatum Tromp', 'wisozk.celia@hotmail.com', 'Female', 20, '2023-04-29', 54.84),
(29, 'Rosendo O\'Connell', 'chad69@gmail.com', 'Female', 21, '2024-11-06', 69.11),
(30, 'Donald Paucek', 'mertz.gerhard@hotmail.com', 'Female', 21, '2022-08-21', 90.05),
(31, 'Jevon Feil', 'oschulist@gmail.com', 'Female', 22, '2022-11-07', 69.91),
(32, 'Miss Savanna Hickle', 'willis.kuhn@hotmail.com', 'Male', 20, '2024-03-20', 70.42),
(33, 'Demetris Crooks', 'bogan.green@hotmail.com', 'Male', 23, '2024-01-26', 51.35),
(34, 'Major Nienow', 'rudy.haag@gmail.com', 'Male', 24, '2022-05-23', 77.48),
(35, 'Alexander Braun', 'carli.witting@hotmail.com', 'Male', 24, '2023-12-16', 60.34),
(36, 'Colt Dickens', 'brakus.rebekah@hotmail.com', 'Female', 22, '2024-02-24', 60.28),
(37, 'Alden Hane', 'larkin.ena@hotmail.com', 'Male', 24, '2023-08-01', 70.37),
(38, 'Maximus Lesch', 'lucienne93@hotmail.com', 'Male', 21, '2023-04-30', 80.00),
(39, 'Chanel Heller', 'tiffany.bechtelar@gmail.com', 'Male', 23, '2023-10-06', 56.88),
(40, 'Merlin Koch', 'cassidy36@yahoo.com', 'Female', 24, '2023-07-16', 76.43),
(41, 'Josianne Halvorson', 'gdouglas@yahoo.com', 'Female', 20, '2024-04-09', 79.51),
(42, 'Selmer McKenzie', 'collier.erna@gmail.com', 'Female', 25, '2022-04-12', 77.27),
(43, 'Vernice Schmeler', 'senger.felipa@hotmail.com', 'Male', 22, '2022-10-14', 56.79),
(44, 'Diana Jaskolski', 'ymueller@hotmail.com', 'Male', 23, '2024-12-20', 84.15),
(45, 'Michael Gottlieb', 'leonard.torp@hotmail.com', 'Male', 21, '2024-11-07', 77.37),
(46, 'Pauline Lynch', 'dietrich.kennedi@yahoo.com', 'Male', 25, '2024-01-20', 84.40),
(47, 'Hershel Eichmann', 'becker.martine@yahoo.com', 'Male', 24, '2023-08-03', 57.89),
(48, 'Tyrel Denesik', 'gfisher@hotmail.com', 'Male', 25, '2023-08-24', 68.27),
(49, 'Manley Murazik', 'hickle.laurie@yahoo.com', 'Female', 21, '2022-03-01', 76.67),
(50, 'Alta Hauck', 'bella73@gmail.com', 'Female', 22, '2024-02-07', 87.55),
(51, 'Kaela Mitchell', 'orn.neoma@gmail.com', 'Male', 20, '2022-05-19', 75.72),
(52, 'Adam Wilderman', 'murazik.wilhelmine@gmail.com', 'Female', 22, '2023-10-19', 65.95),
(53, 'Micaela Farrell', 'kutch.turner@yahoo.com', 'Male', 20, '2023-05-24', 52.60),
(54, 'Angie Lynch', 'hwest@gmail.com', 'Male', 20, '2023-06-10', 56.17),
(55, 'Dixie Kuhn', 'mae.lebsack@yahoo.com', 'Female', 25, '2024-11-22', 73.02),
(56, 'Rudolph Kozey', 'legros.micheal@hotmail.com', 'Female', 22, '2022-07-08', 64.59),
(57, 'Jazmyne Harvey Jr.', 'leo.kuhic@gmail.com', 'Male', 22, '2025-04-14', 53.92),
(58, 'Mollie Luettgen', 'schristiansen@yahoo.com', 'Female', 20, '2024-01-25', 66.81),
(59, 'Magdalena Beer', 'bartell.kassandra@gmail.com', 'Male', 21, '2022-05-07', 81.27),
(60, 'Perry Harris', 'dariana.labadie@yahoo.com', 'Female', 22, '2023-10-01', 73.95),
(61, 'Unique Schulist', 'maxime.koepp@yahoo.com', 'Female', 25, '2023-03-27', 75.92),
(62, 'Magnolia Jacobi', 'greg.swaniawski@gmail.com', 'Female', 20, '2022-10-18', 66.76),
(63, 'Allie Olson', 'qgrady@hotmail.com', 'Male', 23, '2022-02-26', 56.02),
(64, 'Lilyan Boyle', 'wiegand.kamren@yahoo.com', 'Female', 25, '2023-06-07', 70.85),
(65, 'Lane Lakin', 'hlynch@gmail.com', 'Male', 20, '2022-03-23', 54.17),
(66, 'Larue Tromp', 'tremblay.shyanne@yahoo.com', 'Male', 20, '2025-01-12', 90.32),
(67, 'Shana Gleichner', 'floyd18@yahoo.com', 'Male', 21, '2023-09-09', 75.06),
(68, 'Laurie Lemke', 'adella06@yahoo.com', 'Female', 21, '2024-05-21', 54.36),
(69, 'D\'angelo Turcotte', 'tschaden@yahoo.com', 'Male', 23, '2022-05-26', 78.62),
(70, 'Miss Bridgette Jacobs', 'erau@yahoo.com', 'Female', 24, '2023-01-18', 57.03),
(71, 'Warren Windler', 'hhuels@gmail.com', 'Female', 25, '2022-09-30', 81.28),
(72, 'Hester Greenfelder', 'cleveland.schneider@gmail.com', 'Female', 23, '2022-06-16', 62.31),
(73, 'Ethelyn Russel', 'rtremblay@yahoo.com', 'Female', 20, '2025-02-03', 58.73),
(74, 'Carole Cruickshank', 'marjolaine.krajcik@gmail.com', 'Female', 23, '2023-04-14', 56.70),
(75, 'Neva Weber', 'lexie.sauer@gmail.com', 'Female', 20, '2022-03-09', 57.33),
(76, 'Braulio Keeling', 'mackenzie23@yahoo.com', 'Male', 21, '2025-04-14', 66.56),
(77, 'Roderick Denesik', 'joel.schoen@hotmail.com', 'Male', 22, '2025-01-25', 69.78),
(78, 'Heidi Bahringer', 'ezra17@hotmail.com', 'Male', 24, '2024-03-10', 58.25),
(79, 'Eino O\'Hara', 'noelia.rolfson@yahoo.com', 'Female', 25, '2023-08-14', 72.90),
(80, 'Kenny Bernhard', 'ricky.padberg@gmail.com', 'Female', 20, '2023-05-22', 57.74),
(81, 'Vernie Dickinson', 'cassidy.larkin@hotmail.com', 'Female', 25, '2023-12-15', 61.03),
(82, 'Janet Kovacek', 'ibergnaum@gmail.com', 'Male', 20, '2024-04-23', 81.89),
(83, 'Kiana Altenwerth', 'orlo33@yahoo.com', 'Female', 20, '2024-05-23', 53.39),
(84, 'Tracy Kris', 'tyreek48@yahoo.com', 'Male', 24, '2023-09-27', 53.27),
(85, 'Alverta Gleason', 'cathryn.white@gmail.com', 'Male', 22, '2023-05-20', 56.18),
(86, 'Emerson McLaughlin', 'tromp.mauricio@hotmail.com', 'Female', 21, '2023-07-29', 71.07),
(87, 'Georgette Corkery', 'carolina.breitenberg@yahoo.com', 'Female', 23, '2022-06-04', 54.84),
(88, 'Damon Bechtelar', 'elijah01@gmail.com', 'Female', 24, '2022-06-07', 51.96),
(89, 'Ike Douglas', 'yrunolfsdottir@gmail.com', 'Female', 22, '2022-10-08', 86.28),
(90, 'Hal Mraz', 'champlin.haleigh@hotmail.com', 'Male', 25, '2024-06-02', 61.54),
(91, 'Lauriane Borer', 'jacobs.vernie@yahoo.com', 'Female', 24, '2022-02-26', 80.87),
(92, 'Hettie Price DVM', 'zoey.cole@yahoo.com', 'Male', 24, '2024-11-25', 87.70),
(93, 'Maci Block', 'brent.moen@yahoo.com', 'Female', 22, '2023-03-28', 63.92),
(94, 'Doyle Zieme', 'milan06@yahoo.com', 'Female', 23, '2022-07-10', 88.48),
(95, 'Jerome Reynolds', 'trantow.judge@hotmail.com', 'Female', 20, '2023-12-10', 77.66),
(96, 'Casey Bradtke', 'augustus.pagac@hotmail.com', 'Male', 23, '2023-09-01', 72.87),
(97, 'Lesley Rippin Jr.', 'jimmie29@hotmail.com', 'Female', 24, '2024-05-19', 81.36),
(98, 'Kira Deckow', 'vhaag@hotmail.com', 'Male', 20, '2022-06-13', 56.18),
(99, 'Arch Sporer', 'ikilback@hotmail.com', 'Male', 24, '2023-04-23', 68.81),
(100, 'Brandyn Bogan', 'abernathy.penelope@hotmail.com', 'Male', 24, '2023-11-24', 84.50),
(101, 'John Smith', 'johnsmith@gmail.com', 'Male', 22, '2024-04-07', 84.10),
(102, 'Peter Parker', 'peterparker@gmail.com', 'Female', 21, '2024-05-06', 75.99),
(103, 'Donna Huber', 'donnahuber@mailinator.com', 'Female', 23, '2023-08-17', 77.66),
(105, 'Jim Perry', 'jim_perry@gmail.com', 'Male', 25, '2022-12-19', 69.30);

--
-- Indexes for dumped tables
--

--
-- Indexes for table `students`
--
ALTER TABLE `students`
ADD PRIMARY KEY (`id`),
ADD UNIQUE KEY `user_table_email_unique` (`email`),
ADD KEY `age` (`age`),
ADD KEY `admission_date` (`admission_date`),
ADD KEY `percent` (`percent`);

--
-- AUTO_INCREMENT for dumped tables
--

--
-- AUTO_INCREMENT for table `students`
--
ALTER TABLE `students`
MODIFY `id` bigint(20) UNSIGNED NOT NULL AUTO_INCREMENT, AUTO_INCREMENT=106;
COMMIT;

Basics

Templates & Forms

Database

Useful Functions

Django Datatables

Prerequites

Usage Example