displaytag在jQuery tab中的翻页定位.doc

Functional SpecificationsProduct Name: SMSVersion: 1.0Displaytag使用及在jQuery Tab中的翻页定位 本文描述Displaytag工具的使用及其在jQuery Tab中的翻页定位。Copyright 2010, Dextrys All Rights Reserved.Division:Dextrys_SH Team:SMS ProjectVersion:1.0Copyright 2010, Dextrys All Rights Reserved. Page 7 of 7TABLE OF CONTENTS1.Displaytag获取32.安装步骤33.Displaytag使用33.1.分页33.2.排序33.3.导出数据34.Displaytag在jQuery Tab中的翻页定位44.1.jQuery Tab使用44.2.Displaytag分页定位41. Displaytag获取从Display tag官方网站下载最新的版本。获取地址：2. 安装步骤我们以Displaytag1.1版本为例子进行说明。1、 下载displaytag1.1-bin.zip后解压缩并将displaytag-examples-1.1.war中的WEB-INF/lib类包放入自己的web应用程序中WEB-INF/lib目录下，并将WEB-INF/classes中的perties放入自己web应用程序中的WEB-IINF/classes目录下。2、 将displaytag-examples-1.1.war中的资源文件放置到与自己web应用程序同级的目录中，资源文件包括css,，images，img三个文件夹下的所有内容。3、修改web.xml文件，添加一个filter： exportFilter org.displaytag.filter.ResponseOverrideFilter 4、在jsp页面添加一个引用：3. Displaytag的使用3.1. 分页(1)实现接口 org.displaytag.pagination.PaginatedList,用户可以实现这个接口用来代替以前传入DisplayTag的list对象,DisplayTag将认为分页和排序的动作已经由外部动作执行了,而不会使用 原来的分页方式(即全部读入内存).但是这样用户需要自己编写分页和排序代码;(2)设置相应参数,告诉DisplayTag传入的数据集由外部分页和排序,而不使用默认的方式.比如:其中：sort=external 告诉DisplayTag传入的数据集已经由外部程序排好序了.defaultsort=1 说明默认是升序(Descending is 2, Ascending is 1);partialList=true 说明部分装入数据;pagesize=20 每页显示记录数;size=resultSize 显示记录的总条数(此参数结合PageSize，使得表格在只拿到某一页的完整数据的同时，可以知道会有多少页，并将其他的页数也列举出来，当用户实际翻页时才去获取当页数据);3.2. 排序1标签添加sort=external属性；2标签添加sortable=true和sortProperty= 属性。Sortable属性值必须为true，sortProperty属性值为对应具体SQL语句中需要排序字段的字段名称3.3. 导出数据标签添加export=true 和requestURI=属性，export属性值必须为true，requestURI属性值可以为空，但必须存在。4. Displaytag在jQuery Tab中的翻页定位4.1. jQuery Tab使用JSP页面：/引入jQuery库script type=text/javascript src=/script type=text/javascript src=/script type=text/javascript src=/Tab页一Tab页二/Tab页一 /Tab页二 JS：/页面加载时jQuery(function($) $(#tabs).show();/显示Tab$(#tabs).tabs( selected: $showDeptTab );/显示指定的Tab页$(#showDeptTab).val($showDeptTab);/保存当前显示Tab页编号);4.2. Displaytag分页定位一 JSP页面添加：1 添加隐藏表单，标识当前显示Tab编号/添加隐藏表单，标识当前显示Tab2 JS添加方法：function setShowDeptTab(index) document.getElementById(showDeptTab).value = index;if (index = 0) /将Tab1翻页链接“首页”、“上一页”、“下一页”、“尾页”添加参数showDeptTabjQuery(#tabs1 span.pagelinksahref*=page).each(function(i)var href = jQuery(this).attr(href);if (href.indexOf(?) = -1) href = href + ?showDeptTab=0; else if (href.indexOf(showDeptTab) = -1) href = href + &showDeptTab=0; else href = href.replace(showDeptTab=1, showDeptTab=0);href = href.replace(searchid=tab1pagination, searchid=pagination);jQuery(this).attr(href, href););/将Tab1排序链接添加参数showDeptTabjQuery(#tabs1 thead a).each(function(i)var href = jQuery(this).attr(href);if (href.indexOf(showDeptTab) = -1) href = href + &showDeptTab=0; else href = href.replace(showDeptTab=1, showDeptTab=0);jQuery(this).attr(href, href);); else if (index = 1) /将Tab2翻页链接“首页”、“上一页”、“下一页”、“尾页”添加参数showDeptTabjQuery(#tabs2 span.pagelinksahref*=page).each(function(i)var href = jQuery(this).attr(href);if (href.indexOf(?) = -1) href = href + ?showDeptTab=1; else if (href.indexOf(showDeptTab) = -1) href = href + &showDeptTab=1; else href = href.replace(showDeptTab=0, showDeptTab=1);href = href.replace(searchid=pagination, searchid=tab1pagination);jQuery(this).attr(href, href););/将Tab2排序链接添加参数showDeptTabjQuery(#tabs2 thead a).each(function(i)var href = jQuery(this).attr(href);if (href.indexOf(showDeptTab) = -1) href = href + &showDeptTab=1; else href = href.replace(showDeptTab=0, showDeptTab=1);jQuery(this).attr(href, href););3 JSP页面末尾添加JS方法：/重写displaytag的refreshPage()方法，解决“刷新”定位function refreshPage() var href = location.href;var tab = document.getElementById(showDeptTab).value;/为请求添加参数，目的是标识显示Tab页编号if (href.indexOf(?) = -1) href = href + ?showDeptTab= + tab; else if (href.indexOf(showDeptTab) = -1) href = href + &showDeptTab= + tab; else href = href.replace(showDeptTab=0, showDeptTab= + tab).replace(showDeptTab=1, showDeptTab= + tab);location.href = href; /重写displaytag的gotoPage()方法，解决“跳转”定位function gotoPage(pageURL)var tab = document.getElementById(showDeptTab).value; /获得当前显示Tab页内的分页参数：记录总数和当前页面号 if(tab=0) var totalPage = jQuery(#div_SR inputname=totalPage).val(); var pageNumber = jQuery(#div_SR inputname=pageNumber).val(); pageNumber = pageNumber.replace(/,/i, ); else var totalPage = jQuery(#div_SA inputname=totalPage).val(); var pageNumber = jQuery(#div_SA inputname=pageNumber).val();pageNumber = pageNumber.replace(/,/i, ); pageNumber = pageNumber.replace(/,/i, ); if(isBlank(pageNumber)=0|!isNumber(pageNumber) alert(); return false; if(pageNumberparseInt(totalPage.replace(/,/i, )|pageNumber=0) alert(); return false; pageURL = pageURL.replace(/page=d*/,page=+pageNumber); var href; /为请求添加参数，目的是标识显示Tab页编号if (pageURL.indexOf(?) = -1) href = pageURL + ?showDeptTab= + tab; else if (pageURL.indexOf(showDeptTab) = -1) href = pageURL + &showDeptTab= + tab; else href = pageURL.replace(showDeptTab=0, showDeptTab= + tab).replace(showDeptTab=1, sh