Bài 23: Pagination

Why Pagination?

Pagination chia dữ liệu thành nhiều pages để hiển thị, cải thiện performance và UX.

# Without pagination:posts = Post.objects.all()  # Load 10,000+ posts# Problems:# - Slow database query# - Large memory usage# - Slow page load# - Poor user experience # With pagination:posts = Post.objects.all()[:10]  # Load 10 posts# Benefits:# - Fast queries (LIMIT 10)# - Less memory# - Fast page load# - Better UX

Paginator Class

Basic Paginator

from django.core.paginator import Paginator # Sample dataposts = Post.objects.all() # Create paginator (25 items per page)paginator = Paginator(posts, 25) # Paginator properties:print(paginator.count)        # Total items (e.g., 150)print(paginator.num_pages)    # Total pages (e.g., 6)print(paginator.page_range)   # range(1, 7) - for iteration # Get specific page:page_1 = paginator.page(1)    # First pagepage_2 = paginator.page(2)    # Second page # Get objects on page:for post in page_1.object_list:    print(post.title)

Paginator in Views

from django.core.paginator import Paginator, EmptyPage, PageNotAnIntegerfrom django.shortcuts import render def post_list(request):    # Get all posts    post_list = Post.objects.all().order_by('-created')        # Create paginator    paginator = Paginator(post_list, 10)  # 10 posts per page        # Get page number from request    page_number = request.GET.get('page')        # Get page object    try:        posts = paginator.page(page_number)    except PageNotAnInteger:        # If page is not an integer, deliver first page        posts = paginator.page(1)    except EmptyPage:        # If page is out of range, deliver last page        posts = paginator.page(paginator.num_pages)        return render(request, 'blog/post_list.html', {        'posts': posts    }) # Cleaner version using get_page():def post_list(request):    post_list = Post.objects.all().order_by('-created')    paginator = Paginator(post_list, 10)        page_number = request.GET.get('page')    posts = paginator.get_page(page_number)  # Handles exceptions automatically        return render(request, 'blog/post_list.html', {'posts': posts})

Paginator Options

from django.core.paginator import Paginator # Allow orphans (small last page merged with previous)paginator = Paginator(    post_list,    per_page=10,    orphans=3,  # If last page has ≤3 items, merge with previous page    allow_empty_first_page=True  # Allow first page to be empty) # Example:# 53 items, per_page=10, orphans=3# Without orphans: [10, 10, 10, 10, 10, 3]  # 6 pages# With orphans=3:  [10, 10, 10, 10, 13]     # 5 pages (3 merged) # Custom per_page from user:per_page = request.GET.get('per_page', 10)per_page = min(int(per_page), 100)  # Max 100 itemspaginator = Paginator(post_list, per_page)

Page Object

Page Properties

from django.core.paginator import Paginator posts = Post.objects.all()paginator = Paginator(posts, 10)page = paginator.page(2) # Page information:print(page.number)              # Current page number (2)print(page.object_list)         # List of objects on this pageprint(page.paginator)           # Reference to paginator # Navigation:print(page.has_previous())      # True (has page 1)print(page.has_next())          # True/Falseprint(page.previous_page_number())  # 1print(page.next_page_number())      # 3 # Range methods:print(page.start_index())       # 11 (first item index)print(page.end_index())         # 20 (last item index) # Total:print(paginator.count)          # Total items across all pagesprint(paginator.num_pages)      # Total number of pages

Page Methods in Templates

<!-- Template: post_list.html --><h2>Posts ({{ posts.paginator.count }} total)</h2> {% for post in posts %}    <div class="post">        <h3>{{ post.title }}</h3>        <p>{{ post.excerpt }}</p>    </div>{% endfor %} <!-- Pagination info --><div class="pagination-info">    Showing {{ posts.start_index }} to {{ posts.end_index }}     of {{ posts.paginator.count }} posts</div> <!-- Navigation --><div class="pagination">    {% if posts.has_previous %}        <a href="?page=1">First</a>        <a href="?page={{ posts.previous_page_number }}">Previous</a>    {% endif %}        <span>Page {{ posts.number }} of {{ posts.paginator.num_pages }}</span>        {% if posts.has_next %}        <a href="?page={{ posts.next_page_number }}">Next</a>        <a href="?page={{ posts.paginator.num_pages }}">Last</a>    {% endif %}</div>

Template Pagination

Basic Pagination Template

<!-- Simple pagination --><div class="pagination">    {% if posts.has_previous %}        <a href="?page={{ posts.previous_page_number }}">← Previous</a>    {% endif %}        <span class="current">        Page {{ posts.number }} of {{ posts.paginator.num_pages }}    </span>        {% if posts.has_next %}        <a href="?page={{ posts.next_page_number }}">Next →</a>    {% endif %}</div>

Page Number Links

<!-- Show all page numbers --><div class="pagination">    {% if posts.has_previous %}        <a href="?page=1">« First</a>        <a href="?page={{ posts.previous_page_number }}">‹ Prev</a>    {% endif %}        {% for page_num in posts.paginator.page_range %}        {% if page_num == posts.number %}            <span class="current">{{ page_num }}</span>        {% else %}            <a href="?page={{ page_num }}">{{ page_num }}</a>        {% endif %}    {% endfor %}        {% if posts.has_next %}        <a href="?page={{ posts.next_page_number }}">Next ›</a>        <a href="?page={{ posts.paginator.num_pages }}">Last »</a>    {% endif %}</div>

Smart Pagination (Show Limited Range)

<!-- Show current page ±2 pages --><div class="pagination">    {% if posts.has_previous %}        <a href="?page=1">« First</a>        <a href="?page={{ posts.previous_page_number }}">‹</a>    {% endif %}        {% for page_num in posts.paginator.page_range %}        {% if page_num >= posts.number|add:'-2' and page_num <= posts.number|add:'2' %}            {% if page_num == posts.number %}                <span class="current">{{ page_num }}</span>            {% else %}                <a href="?page={{ page_num }}">{{ page_num }}</a>            {% endif %}        {% elif page_num == 1 or page_num == posts.paginator.num_pages %}            {% if page_num == posts.number %}                <span class="current">{{ page_num }}</span>            {% else %}                <a href="?page={{ page_num }}">{{ page_num }}</a>            {% endif %}        {% endif %}    {% endfor %}        {% if posts.has_next %}        <a href="?page={{ posts.next_page_number }}">›</a>        <a href="?page={{ posts.paginator.num_pages }}">Last »</a>    {% endif %}</div> <!-- Example output for page 5 of 10: --><!-- « First ‹ 1 ... 3 4 [5] 6 7 ... 10 › Last » -->

Custom Pagination Template Tag

# templatetags/pagination_tags.pyfrom django import template register = template.Library() @register.inclusion_tag('includes/pagination.html')def pagination(page_obj, range_size=5):    """Smart pagination with ellipsis"""    current = page_obj.number    num_pages = page_obj.paginator.num_pages        # Calculate range    range_start = max(1, current - range_size // 2)    range_end = min(num_pages, range_start + range_size - 1)        # Adjust if at the end    if range_end - range_start < range_size - 1:        range_start = max(1, range_end - range_size + 1)        page_range = range(range_start, range_end + 1)        return {        'page_obj': page_obj,        'page_range': page_range,        'show_first': range_start > 1,        'show_last': range_end < num_pages,    } # Template: includes/pagination.html{% if page_obj.paginator.num_pages > 1 %}<div class="pagination">    {% if page_obj.has_previous %}        <a href="?page=1">First</a>        <a href="?page={{ page_obj.previous_page_number }}">Previous</a>    {% endif %}        {% if show_first %}        <a href="?page=1">1</a>        <span>...</span>    {% endif %}        {% for page_num in page_range %}        {% if page_num == page_obj.number %}            <span class="current">{{ page_num }}</span>        {% else %}            <a href="?page={{ page_num }}">{{ page_num }}</a>        {% endif %}    {% endfor %}        {% if show_last %}        <span>...</span>        <a href="?page={{ page_obj.paginator.num_pages }}">{{ page_obj.paginator.num_pages }}</a>    {% endif %}        {% if page_obj.has_next %}        <a href="?page={{ page_obj.next_page_number }}">Next</a>        <a href="?page={{ page_obj.paginator.num_pages }}">Last</a>    {% endif %}</div>{% endif %} # Usage:{% load pagination_tags %}{% pagination posts %}

ListView Pagination

Basic ListView Pagination

from django.views.generic import ListView class PostListView(ListView):    model = Post    template_name = 'blog/post_list.html'    context_object_name = 'posts'    paginate_by = 10  # Enable pagination    ordering = ['-created'] # Template automatically gets:# - page_obj: Page object# - paginator: Paginator object# - is_paginated: Boolean # Template usage:{% if is_paginated %}    <div class="pagination">        {% if page_obj.has_previous %}            <a href="?page={{ page_obj.previous_page_number }}">Previous</a>        {% endif %}                <span>Page {{ page_obj.number }} of {{ page_obj.paginator.num_pages }}</span>                {% if page_obj.has_next %}            <a href="?page={{ page_obj.next_page_number }}">Next</a>        {% endif %}    </div>{% endif %}

Custom Paginate By

class PostListView(ListView):    model = Post    template_name = 'blog/post_list.html'    paginate_by = 10        def get_paginate_by(self, queryset):        """Allow user to change items per page"""        return self.request.GET.get('per_page', self.paginate_by) # Usage: /posts/?per_page=25

ListView with Filtering and Pagination

class PostListView(ListView):    model = Post    template_name = 'blog/post_list.html'    context_object_name = 'posts'    paginate_by = 10        def get_queryset(self):        queryset = super().get_queryset()                # Filter by category        category = self.request.GET.get('category')        if category:            queryset = queryset.filter(category__slug=category)                # Search        query = self.request.GET.get('q')        if query:            queryset = queryset.filter(title__icontains=query)                return queryset.order_by('-created')        def get_context_data(self, **kwargs):        context = super().get_context_data(**kwargs)                # Add filters to context for template        context['category'] = self.request.GET.get('category', '')        context['query'] = self.request.GET.get('q', '')                return context # Template - preserve query params:<a href="?page={{ page_obj.next_page_number }}&category={{ category }}&q={{ query }}">    Next</a> # Better - use template filter:{% load query_string %}<a href="?{% query_string page=page_obj.next_page_number %}">Next</a>

URL Parameters

Preserving Query Parameters

# Template filter to preserve query params# templatetags/query_string.pyfrom django import templatefrom django.utils.http import urlencode register = template.Library() @register.simple_tag(takes_context=True)def query_string(context, **kwargs):    """    Add/update query parameters    Usage: {% query_string page=2 %}    """    query = context['request'].GET.copy()        for key, value in kwargs.items():        if value:            query[key] = value        elif key in query:            del query[key]        return query.urlencode() # Template usage:{% load query_string %} <!-- Preserve all params, change page --><a href="?{% query_string page=2 %}">Page 2</a> <!-- Change multiple params --><a href="?{% query_string page=2 per_page=25 %}">Page 2 (25 items)</a> <!-- Remove param --><a href="?{% query_string category=None %}">Clear filter</a>

Complete Pagination Template

{% load query_string %} {% if is_paginated %}<nav class="pagination">    <!-- Info -->    <div class="pagination-info">        Showing {{ page_obj.start_index }}-{{ page_obj.end_index }}         of {{ paginator.count }} results    </div>        <!-- Navigation -->    <ul class="pagination-links">        <!-- Previous -->        {% if page_obj.has_previous %}            <li>                <a href="?{% query_string page=1 %}" title="First page">                    &laquo;&laquo;                </a>            </li>            <li>                <a href="?{% query_string page=page_obj.previous_page_number %}" title="Previous page">                    &laquo;                </a>            </li>        {% else %}            <li class="disabled"><span>&laquo;&laquo;</span></li>            <li class="disabled"><span>&laquo;</span></li>        {% endif %}                <!-- Page numbers -->        {% for page_num in paginator.page_range %}            {% if page_num >= page_obj.number|add:'-3' and page_num <= page_obj.number|add:'3' %}                {% if page_num == page_obj.number %}                    <li class="active"><span>{{ page_num }}</span></li>                {% else %}                    <li><a href="?{% query_string page=page_num %}">{{ page_num }}</a></li>                {% endif %}            {% endif %}        {% endfor %}                <!-- Next -->        {% if page_obj.has_next %}            <li>                <a href="?{% query_string page=page_obj.next_page_number %}" title="Next page">                    &raquo;                </a>            </li>            <li>                <a href="?{% query_string page=paginator.num_pages %}" title="Last page">                    &raquo;&raquo;                </a>            </li>        {% else %}            <li class="disabled"><span>&raquo;</span></li>            <li class="disabled"><span>&raquo;&raquo;</span></li>        {% endif %}    </ul></nav>{% endif %}

AJAX Pagination

Basic AJAX Pagination

# views.pyfrom django.http import JsonResponsefrom django.template.loader import render_to_string def post_list_ajax(request):    post_list = Post.objects.all().order_by('-created')    paginator = Paginator(post_list, 10)        page_number = request.GET.get('page')    posts = paginator.get_page(page_number)        if request.headers.get('X-Requested-With') == 'XMLHttpRequest':        # AJAX request - return JSON        html = render_to_string('blog/post_list_partial.html', {            'posts': posts        })                return JsonResponse({            'html': html,            'has_next': posts.has_next(),            'has_previous': posts.has_previous(),            'current_page': posts.number,            'total_pages': posts.paginator.num_pages,        })    else:        # Normal request - return full page        return render(request, 'blog/post_list.html', {            'posts': posts        })

AJAX Pagination JavaScript

// static/js/pagination.jsdocument.addEventListener('DOMContentLoaded', function() {    const postList = document.getElementById('post-list');    const pagination = document.getElementById('pagination');        // Delegate click events on pagination links    if (pagination) {        pagination.addEventListener('click', function(e) {            if (e.target.tagName === 'A') {                e.preventDefault();                                const url = e.target.href;                loadPage(url);            }        });    }        function loadPage(url) {        // Show loading        postList.classList.add('loading');                fetch(url, {            headers: {                'X-Requested-With': 'XMLHttpRequest'            }        })        .then(response => response.json())        .then(data => {            // Update content            postList.innerHTML = data.html;                        // Update pagination            updatePagination(data);                        // Scroll to top            window.scrollTo({ top: 0, behavior: 'smooth' });                        // Update URL without reload            history.pushState({}, '', url);        })        .catch(error => {            console.error('Error:', error);        })        .finally(() => {            postList.classList.remove('loading');        });    }        function updatePagination(data) {        // Update pagination links based on data        // Implementation depends on your pagination structure    }});

Infinite Scroll

// static/js/infinite-scroll.jslet loading = false;let currentPage = 1;let hasNextPage = true; window.addEventListener('scroll', function() {    if (loading || !hasNextPage) return;        // Check if near bottom    const scrollTop = window.pageYOffset || document.documentElement.scrollTop;    const windowHeight = window.innerHeight;    const documentHeight = document.documentElement.scrollHeight;        if (scrollTop + windowHeight >= documentHeight - 500) {        loadMorePosts();    }}); function loadMorePosts() {    loading = true;    currentPage++;        fetch(`/posts/?page=${currentPage}`, {        headers: {            'X-Requested-With': 'XMLHttpRequest'        }    })    .then(response => response.json())    .then(data => {        // Append new posts        const postList = document.getElementById('post-list');        postList.insertAdjacentHTML('beforeend', data.html);                // Update state        hasNextPage = data.has_next;        loading = false;                // Hide loading indicator if no more pages        if (!hasNextPage) {            document.getElementById('loading-indicator').style.display = 'none';        }    })    .catch(error => {        console.error('Error:', error);        loading = false;    });}

Custom Pagination

Bootstrap Pagination

<!-- Bootstrap 5 pagination -->{% if is_paginated %}<nav aria-label="Page navigation">    <ul class="pagination justify-content-center">        <!-- Previous -->        <li class="page-item {% if not page_obj.has_previous %}disabled{% endif %}">            {% if page_obj.has_previous %}                <a class="page-link" href="?page={{ page_obj.previous_page_number }}">Previous</a>            {% else %}                <span class="page-link">Previous</span>            {% endif %}        </li>                <!-- Page numbers -->        {% for num in paginator.page_range %}            {% if num >= page_obj.number|add:'-2' and num <= page_obj.number|add:'2' %}                <li class="page-item {% if num == page_obj.number %}active{% endif %}">                    <a class="page-link" href="?page={{ num }}">{{ num }}</a>                </li>            {% endif %}        {% endfor %}                <!-- Next -->        <li class="page-item {% if not page_obj.has_next %}disabled{% endif %}">            {% if page_obj.has_next %}                <a class="page-link" href="?page={{ page_obj.next_page_number }}">Next</a>            {% else %}                <span class="page-link">Next</span>            {% endif %}        </li>    </ul></nav>{% endif %}

django-bootstrap-pagination

# Install:# pip install django-bootstrap-pagination # settings.pyINSTALLED_APPS = [    # ...    'bootstrap_pagination',] # Template:{% load bootstrap_pagination %} {% bootstrap_paginate page_obj range=5 show_prev_next="true" show_first_last="true" %}

Bài Tập

Bài 1: Blog Pagination

Task: Implement pagination for blog:

# Requirements:# 1. Post list with 10 posts per page# 2. Page number links (show current ±2 pages)# 3. First/Last links# 4. Previous/Next buttons# 5. Show current page info (e.g., "Showing 11-20 of 153")# 6. Preserve filters (category, search) in pagination# 7. Allow user to change items per page (10, 25, 50)# 8. Style with Bootstrap or custom CSS# 9. Handle invalid page numbers gracefully# 10. Add pagination to search results

Bài 2: Product Catalog

Task: Create paginated product catalog:

# Requirements:# 1. Product list with filtering (category, price, rating)# 2. Pagination (12 products per page)# 3. Sort options (name, price, newest, popular)# 4. Search functionality# 5. Preserve all filters/sort in pagination# 6. Show product count ("Showing 13-24 of 156 products")# 7. Grid/List view toggle (preserved in pagination)# 8. Custom pagination template tag# 9. Mobile-friendly pagination# 10. URL structure: /products/?page=2&category=electronics&sort=price

Bài 3: AJAX Pagination

Task: Implement AJAX pagination:

# Requirements:# 1. Load posts without page reload# 2. Update URL with history API# 3. Show loading indicator# 4. Smooth scroll to top on page change# 5. Preserve filters in AJAX requests# 6. Handle errors gracefully# 7. Browser back/forward button support# 8. Fall back to normal pagination if JS disabled# 9. Implement infinite scroll as alternative# 10. Add "Load More" button option

Bài 4: Advanced Pagination

Task: Build advanced pagination system:

# Requirements:# 1. Multiple pagination on same page (posts, comments)# 2. Cursor-based pagination (for real-time data)# 3. Custom page size per user preference (saved in session)# 4. Jump to specific page (input field)# 5. Keyboard navigation (left/right arrows)# 6. Remember scroll position# 7. Prefetch next page (performance)# 8. Show skeleton loaders during load# 9. Analytics tracking (page views, time on page)# 10. Export all results option (with pagination for export)

Tài Liệu Tham Khảo

Previous: Bài 22: File Uploads & Media Files | Next: Bài 24: Search Functionality

#paginator

Django Pagination