Not all sites can have their complete information on one page. Websites will have to use multiple pages for smoother navigation and good user experience. An example here would be e-commerce sites. This might be impractical to possess a site like Amazon list all of its products in one category on one page.
In such cases we use pagination. Pagination may be a sequence of pages which are connected and have similar content.
So, Now let us display our customers inside the website with pagination at the bottom as shown below.
Odoo provides the feature to manage website pagination by default. For that you have to render the pager values in the controller as shown in the code below, Here is my controller,
Controller
Controllers are a class that can be utilized when a user needs to render some information into a site. In Odoo, 'Controllers' are utilized to arrange the frontend modules. These frontend modules are incorporated with backend modules. For example, a user can't utilize the usefulness of 'Models' in Odoo to deliver the business request subtleties to the site. In any case, by utilizing the Controllers in Odoo, clients can undoubtedly get the business request subtleties from the backend.
main.py
class MyCustomWeb(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,
)
here you 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: additionnal parameters to add as query params to page url
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,
})
Now you have to call website pager template in your custom template as shown below,
customer_template.xml
<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>
This will display the pagination inside the website, As shown in the screenshot above for displaying all the customers in our website along with the pagination at the bottom, the code is as follows
<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()"/>
<div>
<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 !important;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>
<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>
</section>
<br/>
<hr class="border-600 s_hr_1px w-100 mx-auto s_hr_dotted"/>
</div>
</form>
</div>
</div>
</div>
</t>
</template>