displaytag新增自定義跳轉頁數功能
阿新 • • 發佈:2019-02-18
因為公司某個專案一直使用的是displaytag來做表格,需求需要,自定義跳轉頁面,然而displaytag似乎並沒有這個功能,通過網上查詢資料,感謝各位網友大神的資料指點,然後總結了一下:
在需要新增跳轉功能的頁面display:table中新增
其中{1}代表第一頁,{2}代表上一頁,{3}代表下一頁,{4}代表最後一頁
這裡的paging.banner.full,paging.banner.first,paging.banner.last是display自帶的,分別代表2到n-1頁、第一頁、最後一頁,paging.banner.full,paging.banner.first的跳轉標籤中使用{4},即最大頁碼,paging.banner.last的跳轉標籤中使用{2}即最大頁碼的上一頁。
這樣做的目的是為了判斷最大頁,計算輸入數字後,實際跳轉的頁,如果超過最大頁,則預設跳轉到最大頁。
接下來需要用JavaScript些一個function,控制跳轉事件
function gotoPage_displaytag(pageFlag) { //判斷輸入的內容,如果不是正整數則不跳轉 var T = /^[1-9]\d*$/; var pageNum = $("#gotoPageNumber_displaytag").val(); if (!T.test(pageNum)) { return; } var url = null; if (pageFlag == 0) { //根據我們傳進來的值,即paging.banner.full、paging.banner.first為0 url = $("#lastPageUrl_displaytag").val(); console.log(url); } else { //否則是paging.banner.last url = $("#prevPageUrl_displaytag").val(); console.log(url); } //查詢url中的page=,因為displaytag中跳轉使用的是page=?使用的時候檢視一下連結就會發現 //然後用輸入的數字進行替換即可 var urlLastPart = url.substr(1, url.length); console.log(urlLastPart); var index = urlLastPart.indexOf("page="); urlLastPart = urlLastPart.substr(index, urlLastPart.length); index = urlLastPart.indexOf("&"); console.log(index); var totalPageNum = null; if (index < 0) { totalPageNum = urlLastPart.substr(5, urlLastPart.length); urlLastPart = ""; } else { urlLastPart = urlLastPart.substr(0, index); totalPageNum = urlLastPart.substr(5, urlLastPart.length); urlLastPart = urlLastPart.substr(index); } if (pageFlag == 1) { totalPageNum = parseInt(totalPageNum) + 1; } console.log(pageNum); console.log(totalPageNum); if (parseInt(pageNum) < parseInt(totalPageNum)) { if (pageFlag == 0) { url = url.replace("page="+totalPageNum,"page="+pageNum); }else{ url = url.replace("page="+(totalPageNum-1),"page="+pageNum); } } else { //當數字大於總頁數時,跳轉到最後一頁 url = url; } console.log(url); window.location = url; }
#gotoPageNumber_displaytag {width: 30px;}
.pagelinks a {color:#118ad2;cursor: pointer;}
以上是單個頁面新增的方法,
如果想統一修改displaytag的外掛程式碼,就再classes中新增displaytag.properties配置檔案
加入程式碼
想空格的話使用 即可paging.banner.full=<span class\="pagelinks"><a href\="{1}">\u9996\u9875</a> <a href\="{2}">\u4E0A\u4E00\u9875</a> {0} <a href\="{3}">\u4E0B\u4E00\u9875</a> <a href\="{4}">\u5C3E\u9875</a> \u7b2c<input id="gotoPageNumber_displaytag">\u9875 <a onclick="gotoPage_displaytag(0)">GO</a><input type="hidden" id="lastPageUrl_displaytag" value="{4}"/></span> paging.banner.first=<span class\="pagelinks">\u9996\u9875 \u4E0A\u4E00\u9875 {0} <a href\="{3}">\u4E0B\u4E00\u9875</a> <a href\="{4}">\u5C3E\u9875</a> \u7b2c<input id="gotoPageNumber_displaytag">\u9875 <a onclick="gotoPage_displaytag(0)">GO</a><input type="hidden" id="lastPageUrl_displaytag" value="{4}"/></span> paging.banner.last=<span class\="pagelinks"><a href\="{1}">\u9996\u9875</a> <a href\="{2}">\u4E0A\u4E00\u9875</a> {0} \u4E0B\u4E00\u9875 \u5C3E\u9875 \u7b2c<input id="gotoPageNumber_displaytag">\u9875 <a onclick="gotoPage_displaytag(1)">GO</a><input type="hidden" id="prevPageUrl_displaytag" value="{2}"/></span>
displaytag.properties中漢字儲存的是Unicode碼:
\u7b2c為第 \u9875為頁
\u9996\u9875為首頁
\u4E0A\u4E00\u9875為上一頁
\u4E0B\u4E00\u9875為下一頁
\u5C3E\u9875為尾頁
不用糾結不知道某些字對應的Unicode碼是多少,在properties檔案中輸入漢字就自動轉化為Unicode碼了
然後容易呼叫js和css即可。