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

因为公司某个项目一直使用的是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 οnclick="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 οnclick="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 οnclick="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即可。