How To Assign Variables To Child Template Use {% include %} Tag In Django

We have learnt how to add search result pagination in the user list page in article Django Filter And Pagination Example. In that example, we use below html code in DjangoHelloWorld / templates / dept_emp / user_list.html template file to add pagination. But how to add pagination to other list page such as dept_list.html and emp_list.html. Should we add and edit below source code in each of the list pages? That is not a good idea. I will tell you how to create a general pagination html file, and include that pagination html file in each of the list page.

1. Currently Used Pagination Source Code In user_list.html.

<div class="pagination">

   <!-- previous page link -->
   {% if user_list.has_previous %}
       <a href="{{ base_url }}page={{ user_list.previous_page_number }}">Prev</a></li>
   {% else %}
       <span class="disabled">Prev</span>
   {% endif %}

   <!-- page number link-->
   {% for i in paginator.page_range %}
      {% if user_list.number == i %}
         <span class="active">{{ i }} <span class="sr-only">(current)</span></span>
      {% else %}
         <a href="{{ base_url }}page={{ i }}">{{ i }}</a></li>
      {% endif %}
   {% endfor %}

   <!-- next page link -->
   {% if user_list.has_next %}
       <a href="{{ base_url }}page={{ user_list.next_page_number }}">Next</a>
   {% else %}
       <span class="disabled">Next</span>
   {% endif %}

</div>

2. Create A Template Html File Focus On Paginition.

To resolve above issue, we will create a separate template html file pagination.html which will focus on page result pagination like below.

Then add below template html source code in pagination.html. Please note that we has use page_object to replace user_list. And below source code has two variables page_object and base_url, these two variables value will be passed from parent template html file ( user_list.html ) which include pagination.html.

<div class="pagination">

    <!-- previous page link -->
    {% if page_object.has_previous %}
        <a href="{{ base_url }}page={{ page_object.previous_page_number }}">Prev</a></li>
    {% else %}
        <span class="disabled">Prev</span>
    {% endif %}


    <!-- page number link-->
    {% for i in paginator.page_range %}
         {% if page_object.number == i %}
               <span class="active">{{ i }} <span class="sr-only">(current)</span></span>
         {% else %}
               <a href="{{ base_url }}page={{ i }}">{{ i }}</a></li>
         {% endif %}
    {% endfor %}

    <!-- next page link -->
    {% if page_object.has_next %}
          <a href="{{ base_url }}page={{ page_object.next_page_number }}">Next</a>
    {% else %}
          <span class="disabled">Next</span>
    {% endif %}

</div>

3. Include Above pagination.html In user_list.html.

Now we should edit user_list.html source code like below. It will pass user_list and base_url object value to the included template html file. Use below source code to replace old pagination source code in user_list.html.

{% include "./pagination.html" with page_object=user_list base_url=base_url%}

4. Include pagination.html In dept_list.html.

Edit dept_list view function in DjangoHelloWorld / dept_emp / views.py file to below source code.

@login_required()
def dept_list(request):

    '''
    Below is old source code without pagination function.
    # list all department.
    dept_list = Department.objects.all()
    return render(request, 'dept_emp/dept_list.html',
                     {'dept_list': dept_list})
    '''

    # list all department.
    dept_list = Department.objects.all()

    page_number = request.GET.get('page', 1)

    paginate_result = do_paginate(dept_list, page_number)

    dept_list = paginate_result[0]

    paginator = paginate_result[1]

    base_url = '/dept_emp/dept_list/?'

    return render(request, 'dept_emp/dept_list.html',
                  {'dept_list': dept_list, 'paginator': paginator, 'base_url': base_url})

Include pagination.html in dept_list.html.

    </table>

    {% include "./pagination.html" with page_object=dept_list base_url=base_url%}

</form>

Below is the dept list page with pagination at page bottom.

5. Include pagination.html In emp_list.html.

Edit emp_list view function in DjangoHelloWorld / dept_emp / views.py file to below source code.

'''
emp_list view function add result pagination function.
'''
@login_required()
def emp_list(request):

    emp_list = None

    dept_id = request.GET.get('dept_id', -1)
    # list all employee.
    if dept_id == -1:
        emp_list = Employee.objects.all()
        print(emp_list)

    # list special department employee.
    else:
        # return Department object which id equals to the dept_id
        dept_list = Department.objects.filter(id = dept_id)

        # create an empty employee list object.
        emp_list = list()

        if len(dept_list) > 0:
            dept = dept_list[0]

            # return the employee list of this department.
            emp_list = Employee.objects.filter(dept=dept)

    page_number = request.GET.get('page', 1)

    paginate_result = do_paginate(emp_list, page_number)

    emp_list = paginate_result[0]

    paginator = paginate_result[1]

    base_url = '/dept_emp/emp_list/?'

    return render(request, 'dept_emp/emp_list.html',
                  {'emp_list': emp_list, 'paginator': paginator, 'base_url': base_url})

Include pagination.html in emp_list.html.

      </table>

      {% include "./pagination.html" with page_object=emp_list base_url=base_url%}

</form>

Employee list page with pagination at page bottom.

6. Conclusion.

The Django include template tag has a with parameter, you can assign values in parent template html file to the included child template variables.

{% include "child template html file path" with variable_1=value_1 variable_2=value_2 %}