display分页组件使用流程总结

1.在项目中引入相关的jar包。包括以下几个
commons-beanutils-1.7.0.jar
commons-collections-3.1.jar
commons-lang-2.3.jar
itext-1.3.jar
log4j-1.2.13.jar
slf4j-api-1.4.2.jar
slf4j-log4j12-1.4.2.jar          (以上五个在displaytag-examples-1.2.war放到webapps目录下重启tomcat后得到一个项目包,在displaytag-examples-1.2\WEB-INF\lib中可以找到)
displaytag-1.2.jar                (http://displaytag.sourceforge.net/11/下载解压得到)
commons-logging-1.1.1.jar       (这个需要在网上下载得到)
以上所有的包均包含在我的电脑:F:\Develop\Tools\Package\displaytag-1.2-bin\ExampleLib

2.要在某个页面中使用这个分页控件,需要在第二行加入以下引用:<%@ taglib uri="http://displaytag.sf.net" prefix="display" %>

3.使用的前提是要保证该页的request对象中是有数据记录的。
<!--list:表示request集合中对象的名称,不需要使用request.getAttribute("list")来得到,直接用,而引用页需要使用request.setAttribute("list",list);-->
<!--list中的对象comment类必须要进行序列化,即是继承java.io.Serializable;requestURI是表示获取数据的页面,即是request.setAttribute的页面啦-->
<!--class表示要引用的样式的名称-->
<!--最重要的几个设置,name,pagesize,requestURI,property,title,sortable(这个属性实现排序功能)-->
<display:table name="list" pagesize="4" class="isis" requestURI="/servlet/CommentServlet" id="c">
 <display:column property="id" title="编号" sortable="true"/>
 <display:column property="username" sortable="true" title="作者"/>
 <display:column property="content" title="内容" />
 <display:column property="createdTime" title="日期" sortable="true"/>
 <display:column title="操作">
  <a href="/blog/servlet/CommentServlet?method=edit&id=${c.id}"><img src="/blog/admin/images/edit.gif " border="0"/></a>
  <a href="/blog/servlet/CommentServlet?method=delete&id=${c.id}" οnclick="javascript:return del()"><img src="/blog/admin/images/delete.gif" border="0"/></a>
 </display:column>
</display:table>

4.将需要应用到的样式(css)和图像资源(img)拷贝到对应的包下,并将inc目录下的head.jsp和footer.jsp拷贝到项目根目录下,它已经包含在F:\Develop\Tools\Package\displaytag-1.2-bin\ExampleLib中

5.引入css文件到项目中,加入一下代码:
<style type="text/css" media="all">
 @import url("/blog/admin/css/maven-base.css");@import url("/blog/admin/css/maven-theme.css"); @import url("/blog/admin/css/site.css"); @import url("/blog/admin/css/screen.css");
</style>
<link rel="stylesheet" href="/blog/admin/css/print.css" type="text/css" media="print"/>

而实际上,去掉不用的样式表文件,就只需要加入一下三行即可:
<style type="text/css" media="all">
 @import url("/blog/admin/css/screen.css");
</style>

6.将displaytag.properties文件拷贝到项目的src文件目录下,记住一定是这个src目录下。打开进行编辑,删除一下代码
export.types=csv excel xml pdf rtf
export.excel=true
export.csv=true
export.xml=true
export.pdf=true
export.rtf=true
export.excel.class=org.displaytag.export.excel.DefaultHssfExportView
export.pdf.class=org.displaytag.export.DefaultPdfExportView
export.rtf.class=org.displaytag.export.DefaultRtfExportView
因为它们是用于导出的,我们不需要导出,所以删除掉。

7.让现实的翻页提示到表的下方,把#paging.banner.placement=top中的#去掉并改为paging.banner.placement=bottom或者paging.banner.placement=both之后放到代码最下方。
在displaytag-1.2.jar\org\displaytag\properties \displaytag.properties下有完整的属性设置可以参考。

8.把其中的文字改成中文。将改好的文件复制一下并改为displaytag_zh.properties
在displaytag.properties中找到相关属性并粘贴到displaytag_zh.properties中并进行修改,将其属性中编码方式变为UTF-8.然后才可以加入中文
paging.banner.items_name=条记录
paging.banner.no_items_found=<span class="pagebanner">没有 {0} 找到.</span>
paging.banner.all_items_found=<span class="pagebanner">{0} {1} 找到,显示{2}.</span>
paging.banner.some_items_found=<span class="pagebanner">{0} {1} 找到, 显示 {2} 到 {3}.</span>

paging.banner.full=<span class="pagelinks">[<a href="{1}">首页</a>/<a href="{2}">上一页</a>] {0} [<a href="{3}">下一页</a>/<a href="{4}">末页</a>]</span>
paging.banner.first=<span class="pagelinks">[首页/上一页] {0} [<a href="{3}">下一页</a>/<a href="{4}">末页</a>]</span>
paging.banner.last=<span class="pagelinks">[<a href="{1}">首页</a>/<a href="{2}">上一页</a>] {0} [下一页/末页]</span>
paging.banner.onepage=<span class="pagelinks">{0}</span>

paging.banner.page.selected=<strong>{0}</strong>
paging.banner.page.link=<a href="{1}" title="Go to page {0}">{0}</a>
paging.banner.page.separator=, \

8.在dos下进行Unicode转码displaytag_zh.properties
C:\Program Files\Java\jdk1.6.0_10\bin下有一个native2ascii.exe,配置Path环境变量并用如下命令进行转码
native2ascii回车之后无错误就表示正确,Ctrl+C结束。开始转码,输入:
d:\>native2ascii -encoding UTF-8 displaytag_zh.properties displaytag_zh_CN.properties
转好之后把displaytag_zh_CN.properties粘贴到src目录下并重新部署项目,然后分页就成功了。

9.在其它也引用分页排序的时候就引用样式文件,和复制表格显示部分 的内容就可以 了。
加入操作:
写成以下形式:前提是requestURI="/servlet/CommentServlet" id="comment"       即是加入一个id,之后就可以写成:
<display:column title="操作">
  <a href="/blog/servlet/CommentServlet?method=edit&id=${comment.id}"><img src="/blog/admin/images/edit.gif " border="0"/></a>
  <a href="/blog/servlet/CommentServlet?method=delete&id=${comment.id}>" οnclick="javascript:return del()"><img src="/blog/admin/images/delete.gif" border="0"/></a>
</display:column>

10.总结:display其实会自动填充数据到相关列中,我们要做的只是设置列的属性并且配置好其需要的文件信息,并处理好其中的乱码等问题。
总体来说,display做出的效果确实很专业。

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
在 Vue 3 中使用分页组件实现数据切换可以遵循以下步骤: 1. 创建一个分页组件,该组件应该包含一些参数和方法来处理分页逻辑。例如,每页显示的项目数,当前页码等等。 2. 在父组件中将数据传递到分页组件中,并将分页参数绑定到分页组件中。例如,将要分页的数据数组传递给分页组件,并将每页显示的项目数和当前页码绑定到分页组件中。 3. 在分页组件中,使用计算属性或者 watch 监听分页参数的变化,从而在数据数组中筛选出当前页要显示的数据,然后将这些数据通过事件或者回调函数传递给父组件,从而实现数据切换。 以下是一个简单的分页组件实现示例: ```html <template> <div> <ul> <li v-for="item in displayedData">{{ item }}</li> </ul> <div> <button @click="previousPage">Previous</button> <span>{{ currentPage }} / {{ pageCount }}</span> <button @click="nextPage">Next</button> </div> </div> </template> <script> export default { props: { data: { type: Array, required: true, }, pageSize: { type: Number, default: 10, }, }, data() { return { currentPage: 1, }; }, computed: { pageCount() { return Math.ceil(this.data.length / this.pageSize); }, displayedData() { const startIndex = (this.currentPage - 1) * this.pageSize; const endIndex = startIndex + this.pageSize; return this.data.slice(startIndex, endIndex); }, }, methods: { previousPage() { if (this.currentPage > 1) { this.currentPage--; } }, nextPage() { if (this.currentPage < this.pageCount) { this.currentPage++; } }, }, }; </script> ``` 在父组件中引入该分页组件,并将要分页的数据数组和每页显示的项目数绑定到分页组件中: ```html <template> <div> <Pagination :data="items" :page-size="pageSize" @page-changed="onPageChanged" /> </div> </template> <script> import Pagination from './Pagination.vue'; export default { components: { Pagination, }, data() { return { items: [/* some data to display */], pageSize: 10, }; }, methods: { onPageChanged(pageData) { // handle page changed event }, }, }; </script> ``` 在分页组件中,当用户点击 “Previous” 或 “Next” 按钮时,会触发 `previousPage` 或 `nextPage` 方法,从而更新当前页码,并通过 `displayedData` 计算属性筛选出当前页要显示的数据。在 `displayedData` 计算属性中,我们使用了 `Array.prototype.slice` 方法从数据数组中获取当前页要显示的数据。最后,将这些数据通过事件或者回调函数传递给父组件,以便父组件更新界面显示
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值