詳解Python odoo中嵌入html簡單的分頁功能
在odoo中,通過iframe嵌入 html,頁面數(shù)據(jù)則通過controllers獲取,使用jinja2模板傳值渲染
html頁面分頁內(nèi)容,這里寫了判斷邏輯
<!-- 分頁 --> <ul id="ty_paging"> <li class="home" id="home"><a href="/car/budget/report/1" rel="external nofollow" ></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}}" rel="external nofollow" ><</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}}" rel="external nofollow" >></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)" rel="external nofollow" onclick="subNmbr()">跳轉(zhuǎn)</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', }); }); // 點擊跳轉(zhuǎn)頁面需要用到方法 function subNmbr() { // 先獲取到頁面上input輸入框中的值 var subNmbr = document.getElementById('inputPage').value; // console.log(subNmbr); // 在獲取li的id,在點擊時做一個動作 document.getElementById("jump").onclick = function () { //根據(jù)a標簽的id獲取鏈接,設置href屬性 var aObj = document.getElementById("add"); // 把要跳轉(zhuǎn)的頁面連接傳入href aObj.href = "/car/budget/report/" + subNmbr; //根據(jù)id獲取超鏈接,設置文字內(nèi)容 aObj.innerText = "跳轉(zhuǎn)"; }; } </script>
之后便可以進行數(shù)據(jù)的簡單分頁
總結
以上所述是小編給大家介紹的Python odoo中嵌入html簡單的分頁功能,希望對大家有所幫助,如果大家有任何疑問請給我留言,小編會及時回復大家的。在此也非常感謝大家對腳本之家網(wǎng)站的支持!
如果你覺得本文對你有幫助,歡迎轉(zhuǎn)載,煩請注明出處,謝謝!
相關文章
探索Python庫coconut輕松地編寫函數(shù)式代碼實例
本文將介紹Python Coconut的基本概念、語法特性和實際應用,同時提供豐富的示例代碼,以幫助大家更好地理解和應用這個強大的工具2024-01-01Python+Selenium隨機生成手機驗證碼并檢查頁面上是否彈出重復手機號碼提示框
這篇文章主要介紹了Python+Selenium隨機生成手機驗證碼并檢查頁面上是否彈出重復手機號碼提示框,本文通過實例代碼給大家介紹的非常詳細,對大家的學習或工作具有一定的參考借鑒價值,需要的朋友可以參考下2020-09-09Python爬蟲eval實現(xiàn)看漫畫漫畫柜mhgui實戰(zhàn)分析
這篇文章主要為大家介紹了Python爬蟲eval實現(xiàn)看漫畫漫畫柜mhgui實戰(zhàn)分析,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進步,早日升職加薪2022-07-07Django查詢數(shù)據(jù)庫的性能優(yōu)化示例代碼
這篇文章主要給大家介紹了關于Django查詢數(shù)據(jù)庫性能優(yōu)化的相關資料,文中通過示例代碼介紹的非常詳細,對大家的學習或者工作具有一定的參考學習價值,需要的朋友們下面隨著小編來一起學習學習吧。2017-09-09PyCharm2020.1.1與Python3.7.7的安裝教程圖文詳解
這篇文章主要介紹了PyCharm2020.1.1與Python3.7.7的安裝教程,本文通過圖文并茂的形式給大家介紹的非常詳細,對大家的學習或工作具有一定的參考借鑒價值,需要的朋友可以參考下2020-08-08