Odoo 18 is the latest release in the Odoo ERP suite, offering enhanced tools for website building, better performance, and greater flexibility for developers and users alike. It brings improvements across various modules, including the Website and eCommerce apps, making it easier to create responsive, user-friendly websites.
When websites handle large volumes of information, such as product listings, blog posts, or customer records, presenting all of it on a single page can negatively affect the user experience. Long pages can be slow to load and difficult to navigate. To solve this, pagination is used. Pagination divides large sets of data into more manageable, smaller sections across multiple pages, helping users browse content more efficiently. This blog explores how pagination can be implemented on an Odoo 18 website.
Pagination is a technique for splitting large amounts of content into smaller, organized segments displayed over several pages. This improves readability and keeps the interface easy to navigate, allowing visitors to navigate content with ease. Rather than presenting users with an excessive amount of information all at once, pagination organizes data into logical segments. For instance, on an e-commerce platform like Amazon, displaying all products from a single category on one page would be impractical. To enhance usability, such platforms implement pagination, enabling users to move through several pages to explore the full range of products efficiently.
Implementing Pagination on an Odoo Website Portal
Odoo is a powerful business platform that supports website pagination through its controller system. Pagination can be added by calculating page data in the controller and passing it to the website view.
Controllers in Odoo handle the connection between backend data and frontend display. To paginate website content, a custom controller is used to fetch records with limits and offsets based on the current page. For guidance on creating a menu and list view on the portal (fleet), refer to this blog How to Add a Custom Menu, List View, & Filters in the Customer Portal Odoo 18.
Here's a simple example of python controller code that shows how to list fleet vehicles with pagination:
from odoo import http
from odoo.http import request
from odoo.addons.portal.controllers.portal import CustomerPortal, pager as portal_page
class CustomPortal(CustomerPortal):
@http.route(['/Fleet', '/Fleet/page/<int:page>'], type='http', auth="user", website=True)
def portal_fleet(self, page=1, search=None, search_in='All', filterby='All', groupby='none', date_begin=None, date_end=None, sortby=None):
"""To search the fleet vehicles data in the portal"""
searchbar_inputs = {
'All': {'label': 'All', 'input': 'All', 'domain': []},
'Vehicle Name': {'label': 'Vehicle Name', 'input': 'Vehicle Name', 'domain': [('name', 'like', search)]},
'License Plate': {'label': 'License Plate', 'input': 'License Plate', 'domain': [('license_plate', 'like', search)]},
'Status': {'label': 'Status', 'input': 'Status', 'domain': [('state_id.name', 'like', search)]},
}
# Define the search bar filters
searchbar_filters = {
'All': {'label': 'All', 'domain': []},
'Registered': {'label': 'Registered', 'domain': [('state_id.name', '=', 'Registered')]},
'Downgraded': {'label': 'Downgraded', 'domain': [('state_id.name', '=', 'Downgraded')]},
}
# Combine search and filter domains
search_domain = searchbar_inputs.get(search_in, searchbar_inputs['All'])['domain']
filter_domain = searchbar_filters.get(filterby, searchbar_filters['All'])['domain']
combined_domain = search_domain + filter_domain
# Base fleet records for the current user
fleet = request.env['fleet.vehicle'].sudo().search([
('driver_id', '=', request.env.user.partner_id.id)])
# Apply the combined domain to filter/search the fleet
search_fleet = fleet.search(combined_domain)
fleet_count = len(search_fleet)
# Add pagination
pager = portal_page(
url="/Fleet",
url_args={'search': search, 'search_in': search_in, 'filterby': filterby, 'sortby': sortby, 'date_begin': date_begin, 'date_end': date_end},
total=fleet_count,
page=page,
step=3
)
# Apply pagination to the search results
search_fleet = fleet.search(combined_domain, limit=3, offset=pager['offset'])
return request.render(your_module_name.template_name,
{
'fleet': search_fleet,
'page_name': 'fleet',
'search': search,
'search_in': search_in,
'searchbar_inputs': searchbar_inputs,
'filterby': filterby,
'searchbar_filters': searchbar_filters,
'default_url': '/Fleet',
'pager': pager, # Pass the pager to the template
})
The following image illustrates the fleet list view as it appears without pagination.
The above code extends the CustomerPortal controller to add a new route /Fleet, which displays a paginated list of fleet vehicles on the portal. The method portal_fleet handles search, filter, and pagination logic.
Search and filter options are defined using searchbar_inputs and searchbar_filters. These are used to build a dynamic domain for querying fleet records assigned to the logged-in user. The pager object calculates the pagination details based on the total record count and current page. Filtered results are then limited and offset accordingly to show paginated content in the portal view.
Customizing Pagination Settings
Odoo's website pagination supports several adjustable parameters to tailor the paging experience based on specific needs. Below are some important options:
* url: The base URL used for pagination links.
* total: The total number of items to paginate.
* page: The current page number being viewed.
* step: The number of records shown per page.
* scope: The number of page numbers displayed in the pager.
* url_args: Additional URL parameters passed with each page link.
Modifying these values inside the controller allows for precise control over how content is split and displayed across pages.
After adding pagination as mentioned in the code above, it will result in the fleet list view with pagination as shown in the images below:
As a result, the data will be split into two pages, with each page showing up to 3 records.
Adding pagination to an Odoo website plays a vital role in improving user experience and simplifying navigation through extensive content. By following the implementation steps discussed, it's easy to integrate pagination and create a more structured and user-friendly interface. Adjusting pagination parameters ensures the setup meets specific business needs. With a proper pagination system in place, the website becomes more efficient at managing and displaying large datasets in a clean, organized manner.
To read more about How to Add Pagination in Website Portal in Odoo 17, refer to our blog How to Add Pagination in Website Portal in Odoo 17.