Django - How to Paginate with Django and Bootstrap
#views.py
from django.shortcuts import render, redirect
from myapp.models import Employee #models.py
# Create your views here.
from django.contrib.auth.models import User
from django.core.paginator import Paginator, EmptyPage, PageNotAnInteger
def index(request):
user_list = User.objects.all()
page = request.GET.get('page', 1)
paginator = Paginator(user_list, 3)
try:
users = paginator.page(page)
except PageNotAnInteger:
users = paginator.page(1)
except EmptyPage:
users = paginator.page(paginator.num_pages)
return render(request, 'user_list.html', { 'users': users })
def emp(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, 'emp_list.html', { 'employees': employees })
#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),
path('emp', views.emp),
]
#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"
//templates/user_list.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Django - How to Paginate with Django and Bootstrap</title>
<link href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.0/js/bootstrap.min.js"></script>
<script src="http://code.jquery.com/jquery-1.11.1.min.js"></script>
</head>
<body>
<div class="container">
<div class="row">
<div class="col-md-12">
<h4>Django - How to Paginate with Django and Bootstrap</h4>
<table id="bootstrapdatatable" class="table table-striped table-bordered" width="100%">
<thead>
<tr>
<th>Username</th>
<th>First name</th>
<th>Last name</th>
<th>Email</th>
</tr>
</thead>
<tbody>
{% for user in users %}
<tr>
<td>{{ user.username }}</td>
<td>{{ user.first_name }}</td>
<td>{{ user.last_name }}</td>
<td>{{ user.email }}</td>
</tr>
{% endfor %}
</tbody>
</table>
{% if users.has_other_pages %}
<ul class="pagination">
{% if users.has_previous %}
<li><a href="?page={{ users.previous_page_number }}">«</a></li>
{% else %}
<li class="disabled"><span>«</span></li>
{% endif %}
{% for i in users.paginator.page_range %}
{% if users.number == i %}
<li class="active"><span>{{ i }} <span class="sr-only">(current)</span></span></li>
{% else %}
<li><a href="?page={{ i }}">{{ i }}</a></li>
{% endif %}
{% endfor %}
{% if users.has_next %}
<li><a href="?page={{ users.next_page_number }}">»</a></li>
{% else %}
<li class="disabled"><span>»</span></li>
{% endif %}
</ul>
{% endif %}
</div>
</div>
</div>
</body>
</html>
//templates/emp_list.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Django - How to Paginate with Django and Bootstrap</title>
<link href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.0/js/bootstrap.min.js"></script>
<script src="http://code.jquery.com/jquery-1.11.1.min.js"></script>
</head>
<body>
<div class="container">
<div class="row">
<div class="col-md-12">
<h4>Django - How to Paginate with Django and Bootstrap</h4>
<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>
{% if employees.has_other_pages %}
<ul class="pagination">
{% if employees.has_previous %}
<li><a href="?page={{ employees.previous_page_number }}">«</a></li>
{% else %}
<li class="disabled"><span>«</span></li>
{% endif %}
{% for i in employees.paginator.page_range %}
{% if employees.number == i %}
<li class="active"><span>{{ i }} <span class="sr-only">(current)</span></span></li>
{% else %}
<li><a href="?page={{ i }}">{{ i }}</a></li>
{% endif %}
{% endfor %}
{% if employees.has_next %}
<li><a href="?page={{ emplist.next_page_number }}">»</a></li>
{% else %}
<li class="disabled"><span>»</span></li>
{% endif %}
</ul>
{% endif %}
</div>
</div>
</div>
</body>
</html>
