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 %}