article

Friday, April 29, 2022

Python Django Pagination Mysql with Bootstrap 5

Python Django Pagination Mysql with Bootstrap 5

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
?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
//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
?
1
2
3
4
5
6
7
8
9
10
11
//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
?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
//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
?
1
2
3
4
5
6
7
8
9
//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
?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
//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

Posted by ednalan at 9:41 PM . Under .

Related Post