We have learned how to add search result pagination to the user list page in the 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 pages 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 pages.
1. Currently Used Pagination Source Code In user_list.html.
- Below Html source code is the pagination source code that is used in the current user_list.html file.
<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 Pagination.
- To resolve the above issue, we will create a separate template Html file pagination.html which will focus on page result pagination like below.
C:\WORKSPACE\WORK\DEV2QA.COM-EXAMPLE-CODE\PYTHONPYCHARMPOJECT\DJANGOHELLOWORLD ├───.idea ├───dept_emp ├───DjangoHelloWorld ├───my_hello_world ├───templates │ ├───dept_emp │ ├──base.html │ ├──base_menu_bar.html │ ├──base_pagination.html │ ├──dept_list.html │ ├──dept_pre_add.html │ ├──emp_detail.html │ ├──emp_list.html │ ├──emp_pre_add.html │ ├──home_page.html │ ├──pagination.html │ ├──user_list.html │ ├──user_pre_add.html
- Now add below template Html source code in pagination.html. Please note that we have to 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 The Above pagination.html In user_list.html.
- Now we should edit the user_list.html source code like below. It will pass user_list and base_url object values to the included template Html file. Use the below source code to replace the 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 the 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 %}
