Django Web Framework Tutorials

How to Add Pagination in Django Template

Last Updated: by

Pagination is a crucial aspect of web development, enhancing user experience by breaking down large sets of data into manageable chunks. In this blog post, we’ll guide you through the process of implementing pagination in your Django website, ensuring your users can navigate content effortlessly.

Step 1: Set Up Your Django Project

  1. Create a new Django project or use an existing one.
  2. Make sure you have your models, views, and templates ready.

Step 2: Install Required Packages

  1. Open your terminal and install the django-bootstrap-pagination package:
   pip install django-bootstrap-pagination
  1. Add 'bootstrap_pagination' to your INSTALLED_APPS in settings.py.

Step 3: Create a View for Pagination

  1. In your views file, import the necessary modules:
   from django.core.paginator import Paginator
   from django.shortcuts import render
   from .models import YourModel
  1. Define a view function that retrieves your data and creates a paginator:
   def paginated_view(request):
       items_per_page = 10  # Define the number of items per page
       queryset = YourModel.objects.all()
       paginator = Paginator(queryset, items_per_page)

       page_number = request.GET.get('page')
       page_obj = paginator.get_page(page_number)

       return render(request, 'your_template.html', {'page_obj': page_obj})

Step 4: Implement Pagination in the Template

  1. In your template, loop through the items in the page_obj:
   {% for item in page_obj %}
       <!-- Display your item content here -->
   {% endfor %}
  1. Add the pagination tags below the loop to display the pagination controls:
   <div class="pagination">
       <span class="step-links">
           {% if page_obj.has_previous %}
               <a href="?page=1">&laquo; first</a>
               <a href="?page={{ page_obj.previous_page_number }}">previous</a>
           {% endif %}

           <span class="current">
               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>
               <a href="?page={{ page_obj.paginator.num_pages }}">last &raquo;</a>
           {% endif %}
       </span>
   </div>
  1. Optionally, you can style the pagination using CSS classes.

Step 5: Testing and Customization

  1. Run your Django server and navigate to the paginated view.
  2. Test the pagination functionality and customize the number of items per page as needed.

Conclusion

Congratulations! You’ve successfully added pagination to your Django website, improving user experience when browsing through large datasets. Pagination is a valuable feature that enhances the usability of your site and makes content consumption smoother. By following this step-by-step guide, you’ve empowered your Django project with effective pagination that keeps users engaged and content accessible.

Blogs You Might Like to Read!