displaytag添加自定义跳转页数功能

来源：互联网发布：cc域名注册哪里便宜编辑：程序博客网时间：2024/06/05 04:45

因为公司某个项目一直使用的是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;}

然后再css中加入相应的样式即可

#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即可。

0 0