Bootstrap 5
https://getbootstrap.com/docs/5.0/getting-started/introduction/
https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css
CREATE TABLE `employee` (
`id` bigint(20) NOT NULL,
`name` varchar(100) NOT NULL,
`email` varchar(254) NOT NULL,
`contact` varchar(15) NOT NULL
) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4;
INSERT INTO `employee` (`id`, `name`, `email`, `contact`) VALUES
(1, 'Cairocoders', 'cairocoders@gmail.com', '35345345'),
(2, 'clydey Ednalan', 'calyde@gmail.com', '6456'),
(3, 'Airi Satou', 'Airi Satou@gmail.com', '45345435'),
(4, 'Angelica Ramos', 'Angelica Ramos', '435345345'),
(5, 'Ashton Cox', 'Ashton Cox@gmail.com', '35345345'),
(6, 'Bradley Greer', 'Bradley Greer', '3453453'),
(7, 'Brenden Wagner', 'Brenden Wagner@gmail.com', '5656'),
(8, 'Brielle Williamson', 'Brielle Williamson@gmail.com', '56456'),
(9, 'Bruno Nash', 'Bruno Nash@gmail.com', '456456'),
(10, 'Caesar Vance', 'Caesar Vance@gmail.com', '45345'),
(11, 'Cara Stevens', 'Cara Stevens@gmail.com', 'ertert'),
(12, 'Cedric Kelly', 'Cedric Kelly@gmail.com', '565656'),
(13, 'Charde Marshall', 'Charde Marshall@gmail.com', '67567'),
(14, 'Colleen Hurst', 'Colleen Hurst@gmail.com', '979789'),
(15, 'Dai Rios', 'Dai Rios@gmail.com', '7868678'),
(16, 'Donna Snider', 'Donna Snider@gamil.com', '77868');
Register App myapp and Connect to MySQL Database
devproject/settings.py
//devproject/settings.py
INSTALLED_APPS = [
'django.contrib.admin',
'django.contrib.auth',
'django.contrib.contenttypes',
'django.contrib.sessions',
'django.contrib.messages',
'django.contrib.staticfiles',
'myapp', #add myapp
]
DATABASES = {
'default': {
'ENGINE': 'django.db.backends.mysql',
'NAME': 'django',
'USER': 'root',
'PASSWORD': '',
'HOST': 'localhost',
'PORT': '3306'
}
}
Model myapp/models.py
//myapp/models.py
from django.db import models
# Create your models here.
class Employee(models.Model):
name = models.CharField(max_length=100)
email = models.EmailField()
contact = models.CharField(max_length=15)
class Meta:
db_table = "employee"
Make Migrations Run the commands below to make migrations:
python manage.py makemigrations
python manage.py migrate
C:\django\devproject>python manage.py makemigrations
C:\django\devproject>python manage.py migrate
Creating View
myapp/views.py
//myapp/views.py
from django.shortcuts import render, redirect
from myapp.models import Employee #models.py
from django.core.paginator import Paginator, EmptyPage, PageNotAnInteger
# Create your views here.
def index(request):
emplist = Employee.objects.all()
page = request.GET.get('page', 1)
paginator = Paginator(emplist, 5)
try:
employees = paginator.page(page)
except PageNotAnInteger:
employees = paginator.page(1)
except EmptyPage:
employees = paginator.page(paginator.num_pages)
return render(request, 'index.html', { 'employees': employees })
devproject/urls.py
//devproject/urls.py
from django.contrib import admin
from django.urls import path
from myapp import views
urlpatterns = [
path('admin/', admin.site.urls),
path('', views.index, name='index')
]
myapp/templates/index.html
//myapp/templates/index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Python Django Pagination Mysql with Bootstrap 5</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css">
</head>
<body>
<div class="container">
<div class="row">
<div class="col-12">
<h2>Python Django Pagination Mysql with Bootstrap 5</h2>
<h4>Employees</h4>
<table id="bootstrapdatatable" class="table table-striped table-bordered" width="100%">
<thead>
<tr>
<th>Name</th>
<th>Contact</th>
<th>Email</th>
</tr>
</thead>
<tbody>
{% for rs_emp in employees %}
<tr>
<td>{{ rs_emp.name }}</td>
<td>{{ rs_emp.contact }}</td>
<td>{{ rs_emp.email }}</td>
</tr>
{% endfor %}
</tbody>
</table>
<nav aria-label="...">
{% if employees.has_other_pages %}
<ul class="pagination">
{% if employees.has_previous %}
<li class="page-item"><a class="page-link" href="?page={{ employees.previous_page_number }}">Previous</a></li>
{% else %}
<li class="page-item disabled"><span class="page-link">Previous</span></li>
{% endif %}
{% for i in employees.paginator.page_range %}
{% if employees.number == i %}
<li class="page-item active" aria-current="page"><a class="page-link" href="#">{{ i }}</a></li>
{% else %}
<li class="page-item"><a class="page-link" href="?page={{ i }}">{{ i }}</a></li>
{% endif %}
{% endfor %}
{% if employees.has_next %}
<li class="page-item"><a class="page-link" href="?page={{ employees.next_page_number }}">Next</a></li>
{% else %}
<li class="page-item disabled"><span class="page-link">Next</span></li>
{% endif %}
</ul>
{% endif %}
</nav>
</div>
</div>
</div>
</body>
</html>
Run : C:\django\devproject>python manage.py runserver
