在odoo中,通過iframe嵌入 html,頁面數據則通過controllers獲取,使用jinja2模板傳值渲染
html頁面分頁內容,這裏寫了判斷邏輯
<!-- 分頁 -->
<ul id="ty_paging">
<li class="home" id="home"><a href="/car/budget/report/1"></a>首頁</li>
{% if current_page == 1 %}
<li class="prev" id="prev"><</li>
{% else %}
<li class="prev" id="prev"><a href="/car/budget/report/{{current_page - 1}}"><</a></li>
{% endif %}
{% if current_page == total_page %}
<li class="next" id="next">></li>
{% else %}
<li class="next" id="next"><a href="/car/budget/report/{{current_page + 1}}">></a></li>
{% endif %}
<li class="max">共{{total_page}}頁</li>
<li class="max">第{{current_page}}頁</li>
<input type="number" min="1" value="1" class="inputPage" id="inputPage"/>
<li class="jump" id="jump"><a id="add" href="javascript:void(0)" οnclick="subNmbr()">跳轉</a></li>
</ul>
在,odoo的controllers中的邏輯
class CarBudgetReport(http.Controller):
@http.route('/car/budget/report/<int:page>', auth='public')
def index(self, page=1, **kw):
data1 = request.env['lims.car.scheme'].get_first_budget()
total_page = int(len(data1) / 10) + 1
if page > total_page:
data = []
else:
data = data1[(page - 1) * 10: page * 10]
return env.get_template(HTML_FIEL_NAME).render({'data': data, 'current_page': page, 'total_page': total_page})
CSS文件:
/* 分頁功能的通用樣式 */
#ty_paging {
overflow: hidden;
display: block;
width: 100%;
margin-top: 20px;
text-align: center;
user-select: none;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
font-size: 14px;
color: #000000;
background-color: #FFFFFF;
}
#ty_paging li {
display: inline-block;
height: 32px;
width: 32px;
line-height: 32px;
margin: 0px 5px;
padding: 0px;
border: 1px solid #ddd;
border-radius: 2px;
cursor: pointer;
vertical-align: top;
text-align: center;
}
#ty_paging .home,#ty_paging .jump {
width: 56px;
height: 32px;
}
#ty_paging .max {
width: 60px;
border: none;
}
#ty_paging .inputPage {
height: 32px;
width: 56px;
border: 1px solid #ddd;
border-radius: 2px;
text-align: center;
color: #000000;
}
在後臺xml中需要將路由設置默認爲1
<?xml version="1.0" encoding="UTF-8"?>
<templates id="template" xml:space="preserve">
<t t-name="BudgettIframe">
<iframe src="car/budget/report/1" marginheight="0" marginwidth="0" width="100%" height="100%" />
</t>
</templates>
html 分頁js代碼
<script>
// 懸浮樣式
$('#home, #jump').mouseover(function () {
// if ($(this).val() == ty_currentPage) return;
$(this).css({
'border-color': '#2db71a',
'color': '#000000',
// 'background-color': '#337ab7',
});
});
$('#home, #prev, #next, #jump').mouseout(function () {
// if ($(this).val() == ty_currentPage) return;
$(this).css({
'border-color': "#ddd",
'color': '#666',
// 'background-color': '#ffffff',
});
});
$('#up, #down').mouseover(function () {
// if ($(this).val() == ty_currentPage) return;
$(this).css({
'border-color': '#337ab7',
'color': '#ffffff',
'background-color': '#2db71a',
});
});
$('#up, #down').mouseout(function () {
// if ($(this).val() == ty_currentPage) return;
$(this).css({
'border-color': "#000000",
'color': '#000000',
'background-color': '#ffffff',
});
});
// 點擊跳轉頁面需要用到方法
function subNmbr() {
// 先獲取到頁面上input輸入框中的值
var subNmbr = document.getElementById('inputPage').value;
// console.log(subNmbr);
// 在獲取li的id,在點擊時做一個動作
document.getElementById("jump").onclick = function () {
//根據a標籤的id獲取鏈接,設置href屬性
var aObj = document.getElementById("add");
// 把要跳轉的頁面連接傳入href
aObj.href = "/car/budget/report/" + subNmbr;
//根據id獲取超鏈接,設置文字內容
aObj.innerText = "跳轉";
};
}
</script>
之後便可以進行數據的簡單分頁