How to Add Pagination in Website portal in Odoo

How to Add Pagination in
Website portal in Odoo
Enterprise

Introduction
Enterprise
In the context of an Odoo website portal, pagination refers to the
process of dividing a large set of records into smaller, more
manageable pages and providing navigation controls to move
between these pages. This is essential for enhancing the user
experience by preventing long loading times and making data
presentation more manageable.
Odoo provides the feature to manage website pagination by default.
For that you have to render the pager values in the controller

Enterprise
Controllers
Controllers are responsible for defining the routes (URLs) that the
application responds to, executing the necessary business logic, and
rendering the appropriate views or templates. Create a Python file in
your module, typically in the controllers directory, and define a
controller class. Use the http.Controller class from Odoo’s web
framework.
Controllers' are utilized to arrange the frontend modules which are
incorporated with backend modules.
Edit your controller to support pagination by adding parameters.

Enterprise
The code for the controller main.py file can be set as
class MyPortal(http.Controller):
@http.route(['/customer','/customer/page/<int:page>'],type="http",auth="user",website=True)
def customer_kanban(self, page=0, search='', **post):
Domain = []
if search:
domain.append(('name', 'ilike', search))
if search:
post["search"] = search
customer_obj = request.env['res.partner'].sudo().search(domain)
total = customer_obj.sudo().search_count([])
pager = request.website.pager(
url='/customer',
total=total,
page=page,
step=3,
)

Enterprise
Here, The request.website.pager() method in Odoo is used to create
pagination controls for listing records on a web page. This method
generates the necessary pagination data, such as the total number of
pages, the current page, and the URLs for navigating between pages.
We can pass the required parameters, some of the parameters are as
follows ,
● url: base url of the page link
● total: number total of item to be splitted into pages
● page: current page
● step: item per page
● scope: number of page to display on pager
● url_args: additional parameters to add as query params to page
url

Enterprise
The offset key within the pager dictionary can be used to calculate the
starting point for fetching records from the database. It represents the
position in the dataset from which to start retrieving records for the current
page.
offset = pager['offset']
customer_obj = customer_obj[offset: offset + 5]
return request.render('customer_website.customer_form', {
'search': search,
'customer_details': customer_obj,
'pager': pager,
})

Enterprise
Now, <t t-call="website.pager"> is used to render pagination links (like
previous, next, and specific page numbers) on your web page, making it
easier to navigate through paginated data. This ensures that your web
pages have consistent and functional pagination controls, improving the
user experience when navigating through large datasets.
To display the pagination inside the website, include this in the template
<div class="products_pager form-inline justify-content-center mt-3">
<t t-call="website.pager">
<t t-set="_classes">mt-2 ml-md-2</t>
</t>
</div>

Enterprise
And for the template customer_form for displaying all the customers in our
website along with the pagination at the bottom, call the website.layout, and
start designing the form
<template id="customer_form" name="Customers">
<t t-call="website.layout">
<div>
<div class="col-md-6">
<br/>
<div>
<form action="/customer" method="post">
<t t-call="website.website_search_box">
</t>
<input type="hidden" name="csrf_token" t-att-
value="request.csrf_token()"/>

Enterprise
Under the <section>, design to show the customer details
<section><div class="customer_details"><center>
<h3>Customers</h3></center></div><br/>
<div class="oe_product_cart_new row" style="overflow: hidden;">
<t t-foreach="customer_details" t-as="customers">
<div class="col-md-3 col-sm-3 col-xs-12" style="padding:1px 1px 1px 1px;">
<div style="border: 1px solid #f0eaea;width: 150px;height: auto;padding: 7% 0% 10% 0%;
border-radius: 3px;overflow: hidden;margin-bottom: 44px;width: 100%;height: 100%;">
<div class="oe_product_image">
<center>
<div style="width:100%;overflow: hidden;">
<img t-if="customers.image_1920" t-attf-src="/web/image/res.partner/#{customers.id}/image_1920"
class="img oe_product_image" style="padding: 0px; margin: 0px; width:auto; height:100%;"/> </div>
<div style="text-align: left;margin: 10px 15px 3px 15px;">
<t t-if="customers.name"><span t-esc="customers.name" style="font-weight: bolder;color:
#3e3b3b;"/><br/></t></div></center></div></div></div></t></div>

Enterprise
After that, put the code for the pagination that we mentioned earlier.
By implementing pagination, you enhance the performance, scalability,
and user experience of your Odoo application. Users benefit from
faster load times, easier navigation, and a cleaner interface, while
developers gain control and efficiency in managing large datasets.

For More Info.
Check our company website for related blogs
and Odoo book.
Check our YouTube channel for
functional and technical videos in Odoo.
Enterprise
www.cybrosys.com

How to Add Pagination in Website portal in Odoo

More Related Content

Similar to How to Add Pagination in Website portal in Odoo (20)

More from Celine George (20)

Recently uploaded (20)

How to Add Pagination in Website portal in Odoo