在odoo中，通過iframe嵌入 html，頁面數據則通過controllers獲取，使用jinja2模板傳值渲染

html頁面分頁內容，這里寫了判斷邏輯

• 首頁

{% if current_page == 1 %}

＜

{% else %}

＜

{% endif %}

{% if current_page == total_page %}

＞

{% else %}

＞

{% endif %}

共{{total_page}}頁第{{current_page}}頁跳轉

在,odoo的controllers中的邏輯

class CarBudgetReport(http.Controller):

@http.route('/car/budget/report/', 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

html 分頁js代碼

//懸浮樣式

$('#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',

});

});//點擊跳轉頁面需要用到方法

functionsubNmbr() {//先獲取到頁面上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 = "跳轉";

};

}

之后便可以進行數據的簡單分頁

總結

以上是生活随笔為你收集整理的python嵌入html_Python odoo中嵌入html简单的分页功能的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。