用eXtremeComponents做分页-简单方便

本文介绍如何使用eXtremeComponents组件在JSP页面实现数据库数据的分页显示,包括环境搭建、数据库操作及JSP页面配置。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

eXtremeComponents是提供高级显示的开源JSP标签,用于以表的形式来显示数据,它的功能强大且使用简单,常用的功能包括排序、分页、导出Excel与pdf等。使用ExtremeComponents列表组件,您需要去http://sourceforge.net/projects/extremecomp/下载发布的压缩包文件。不过现在更推荐使用javaEye里的GT-Grid ( 原名叫EC Side ), 地址:http://ecside.group.javaeye.com/ ,大家可以去那里学习与讨论。

EC Side也是一个开源的列表组件,他是源自于开源列表组件 eXtremeComponents,不过已经早已脱离了eXtremeComponents而独立发展(里面仍有部分代码是来自eXtremeComponents)。青出于蓝而胜于蓝,EC Side比eXtremeComponents的功能更强大。一般我们建议先学习和使用一下eXtremeComponents,再去学习和使用EC Side.

以下是一个eXtremeComponents使用的示例,用来演示一下ExtremeComponents列表组件进行数据库数据分页显示的使用,更多跟深入的学习,您可以参考

http://www.blogjava.net/lucky/articles/33380.html 或者

http://blog.chinaunix.net/u/7893/showart_426623.html

上面有ExtremeComponents的中文参考文档。

 

完成下面的示例,我们按照如下的步骤进行:

先把一些准备工作做好,在MyEclipse新建web工程,在下载的ExtremeComponents压缩包中找到

commons-beanutils 1.7

commons-collections 3.0

commons-lang 2.0   

commons-logging 1.0.4

standard 1.0.2

extremecomponents-1.0.1.jar

将以上jar包和extremecomponents.tld文件拷贝到WEB-INF/lib目录下,并且把images整个文件夹拷贝到WebRoot下,以上的所有的jar包和文件都在下载的压缩包里可以找到。至此准备工作就完成了 。

1、建立数据库数据:

create database page;

use page;

create table student

(

stu_id integer auto_increment,

stuName varchar(255) not null,

address varchar(255) not null,

stuPhone varchar(255)not null,

primary key(stu_id)

);

insert into student(stuName,address,stuPhone) values('杨老板,'长沙','13787825190');

insert into student(stuName,address,stuPhone) values('王老板,'大连','13782251560');

这里可以复制上面的insert语句多插入几行不同的数据.

2、写一个类StudDAO.java来操作数据库,从数据库中取出一系列数据,该类的代码如下:

Java代码 用eXtremeComponents做分页-简单方便 - 清风幻影 - 清风幻影的博客

  1. package org.hnylj.eXtreme;   
  2.   
  3. import java.sql.Connection;   
  4. import java.sql.DriverManager;   
  5. import java.sql.PreparedStatement;   
  6. import java.sql.ResultSet;   
  7. import java.sql.SQLException;   
  8. import java.sql.Statement;   
  9. import java.util.ArrayList;   
  10. import java.util.HashMap;   
  11. import java.util.List;   
  12. import java.util.Map;   
  13.   
  14. public class StudDAO {   
  15.     private Connection conn = null ;   
  16.     private Statement stmt = null ;   
  17.     private PreparedStatement pstmt = null ;   
  18.     private ResultSet rs = null ;   
  19.     private static final String DRIVER = "com.mysql.jdbc.Driver" ;   
  20.     private static final String URL = "jdbc:mysql://localhost:3306/page" ;   
  21.     private static final String USERNAME = "root" ;   
  22.     private static final String PASSWORD = "123" ;   
  23.        
  24.     private List<Map<String,String>> list = new ArrayList<Map<String,String>>() ;   
  25.     private Map<String,String> map = null ;   
  26.   
  27.     public StudDAO () {   
  28.     }   
  29.        
  30.     //数据库连接   
  31.     public synchronized Connection getConnection () {   
  32.         try {   
  33.             Class.forName (DRIVER) ;   
  34.             conn = DriverManager.getConnection (URL,USERNAME,PASSWORD) ;   
  35.         } catch (ClassNotFoundException e) {   
  36.             e.printStackTrace () ;   
  37.             return null ;   
  38.         } catch (SQLException e) {   
  39.             e.printStackTrace () ;   
  40.             return null ;   
  41.         }    
  42.         return conn ;   
  43.     }   
  44.      
  45.   public List<Map<String,String>> query () {   
  46.     try {   
  47.       if (this.getConnection()!=null) {   
  48.           pstmt = this.getConnection().prepareStatement("select * from student") ;   
  49.           rs = pstmt.executeQuery () ;   
  50.              
  51.           while (rs.next()) {   
  52.               map = new HashMap<String,String>() ;   
  53.               map.put("stuName", rs.getString("stuName")) ;   
  54.               map.put("address", rs.getString("address")) ;   
  55.               map.put("stuPhone", rs.getString("stuPhone")) ;   
  56.               list.add(map) ;   
  57.           }   
  58.       }   
  59.     } catch(SQLException e) {   
  60.         e.printStackTrace() ;   
  61.     }   
  62.     return list ;   
  63.   }   
  64. }  

  1. package org.hnylj.eXtreme;   
  2.   
  3. import java.sql.Connection;   
  4. import java.sql.DriverManager;   
  5. import java.sql.PreparedStatement;   
  6. import java.sql.ResultSet;   
  7. import java.sql.SQLException;   
  8. import java.sql.Statement;   
  9. import java.util.ArrayList;   
  10. import java.util.HashMap;   
  11. import java.util.List;   
  12. import java.util.Map;   
  13.   
  14. public class StudDAO {   
  15.     private Connection conn = null ;   
  16.     private Statement stmt = null ;   
  17.     private PreparedStatement pstmt = null ;   
  18.     private ResultSet rs = null ;   
  19.     private static final String DRIVER = "com.mysql.jdbc.Driver" ;   
  20.     private static final String URL = "jdbc:mysql://localhost:3306/page" ;   
  21.     private static final String USERNAME = "root" ;   
  22.     private static final String PASSWORD = "123" ;   
  23.        
  24.     private List<Map<String,String>> list = new ArrayList<Map<String,String>>() ;   
  25.     private Map<String,String> map = null ;   
  26.   
  27.     public StudDAO () {   
  28.     }   
  29.        
  30.     //数据库连接   
  31.     public synchronized Connection getConnection () {   
  32.         try {   
  33.             Class.forName (DRIVER) ;   
  34.             conn = DriverManager.getConnection (URL,USERNAME,PASSWORD) ;   
  35.         } catch (ClassNotFoundException e) {   
  36.             e.printStackTrace () ;   
  37.             return null ;   
  38.         } catch (SQLException e) {   
  39.             e.printStackTrace () ;   
  40.             return null ;   
  41.         }    
  42.         return conn ;   
  43.     }   
  44.      
  45.   public List<Map<String,String>> query () {   
  46.     try {   
  47.       if (this.getConnection()!=null) {   
  48.           pstmt = this.getConnection().prepareStatement("select * from student") ;   
  49.           rs = pstmt.executeQuery () ;   
  50.              
  51.           while (rs.next()) {   
  52.               map = new HashMap<String,String>() ;   
  53.               map.put("stuName", rs.getString("stuName")) ;   
  54.               map.put("address", rs.getString("address")) ;   
  55.               map.put("stuPhone", rs.getString("stuPhone")) ;   
  56.               list.add(map) ;   
  57.           }   
  58.       }   
  59.     } catch(SQLException e) {   
  60.         e.printStackTrace() ;   
  61.     }   
  62.     return list ;   
  63.   }   
  64. }  

3、编写一个jsp页面,用来显示数据,其代码如下:

Html代码 用eXtremeComponents做分页-简单方便 - 清风幻影 - 清风幻影的博客

  1. <%@ page language="java" import="java.util.*,org.hnylj.eXtreme.*"  
  2.     pageEncoding="gb2312"%>  
  3. <%@ taglib uri="WEB-INF/extremecomponents.tld" prefix="ec"%>  
  4.   
  5. <html>  
  6.     <head>  
  7.         <title>用extremecomponents分页</title>  
  8.         <style type="text/css">  
  9. .eXtremeTable {   
  10.     margin: 0;   
  11.     padding: 0;   
  12. }   
  13.   
  14. .eXtremeTable select {   
  15.     font-family: Verdana;   
  16.     font-size: 9px;   
  17.     border: solid 1px #EEE;   
  18.     width: 75px;   
  19. }   
  20.   
  21. .eXtremeTable .tableRegion {   
  22.     border: 1px solid silver;   
  23.     padding: 2px;   
  24.     font-family: Verdana;   
  25.     font-size: 10px;   
  26.     margin-top: 7px;   
  27. }   
  28.   
  29. .eXtremeTable .filter {   
  30.     background-color: #efefef;   
  31. }   
  32.   
  33. .eXtremeTable .filter input {   
  34.     font-family: Verdana;   
  35.     font-size: 10px;   
  36.     width: 100%;   
  37. }   
  38.   
  39. .eXtremeTable .filter select {   
  40.     font-family: Verdana;   
  41.     font-size: 9px;   
  42.     border: solid 1px #EEE;   
  43.     width: 100%;   
  44. }   
  45.   
  46. .eXtremeTable .tableHeader {   
  47.     background-color: #308dbb;   
  48.     color: white;   
  49.     font-family: Verdana;   
  50.     font-size: 11px;   
  51.     font-weight: bold;   
  52.     text-align: left;   
  53.     padding-right: 3px;   
  54.     padding-left: 3px;   
  55.     padding-top: 4;   
  56.     padding-bottom: 4;   
  57.     margin: 0;   
  58.     border-right-style: solid;   
  59.     border-right-width: 1px;   
  60.     border-color: white;   
  61. }   
  62.   
  63. .eXtremeTable .tableHeaderSort {   
  64.     background-color: #3a95c2;   
  65.     color: white;   
  66.     font-family: Verdana;   
  67.     font-size: 11px;   
  68.     font-weight: bold;   
  69.     text-align: left;   
  70.     padding-right: 3px;   
  71.     padding-left: 3px;   
  72.     padding-top: 4;   
  73.     padding-bottom: 4;   
  74.     border-right-style: solid;   
  75.     border-right-width: 1px;   
  76.     border-color: white;   
  77. }   
  78.   
  79. .eXtremeTable .odd a,.even a {   
  80.     color: Black;   
  81.     font-size: 10px;   
  82. }   
  83.   
  84. .eXtremeTable .odd td,.eXtremeTable .even td {   
  85.     padding-top: 2px;   
  86.     padding-right: 3px;   
  87.     padding-bottom: 2px;   
  88.     padding-left: 3px;   
  89.     vertical-align: middle;   
  90.     font-family: Verdana;   
  91.     font-size: 10px;   
  92. }   
  93.   
  94. .eXtremeTable .odd {   
  95.     background-color: #FFFFFF;   
  96. }   
  97.   
  98. .eXtremeTable .even {   
  99.     background-color: #dfe4e8;   
  100. }   
  101.   
  102. .eXtremeTable .highlight td {   
  103.     color: black;   
  104.     font-size: 10px;   
  105.     padding-top: 2px;   
  106.     padding-right: 3px;   
  107.     padding-bottom: 2px;   
  108.     padding-left: 3px;   
  109.     vertical-align: middle;   
  110.     background-color: #fdecae;   
  111. }   
  112.   
  113. .eXtremeTable .highlight a,.highlight a {   
  114.     color: black;   
  115.     font-size: 10px;   
  116. }   
  117.   
  118. .eXtremeTable .toolbar {   
  119.     background-color: #F4F4F4;   
  120.     font-family: Verdana;   
  121.     font-size: 9px;   
  122.     margin-right: 1px;   
  123.     border-right: 1px solid silver;   
  124.     border-left: 1px solid silver;   
  125.     border-top: 1px solid silver;   
  126.     border-bottom: 1px solid silver;   
  127. }   
  128.   
  129. .eXtremeTable .toolbar td {   
  130.     color: #444444;   
  131.     padding: 0px 3px 0px 3px;   
  132.     text-align: center;   
  133. }   
  134.   
  135. .eXtremeTable .separator {   
  136.     width: 7px;   
  137. }   
  138.   
  139. .eXtremeTable .statusBar {   
  140.     background-color: #F4F4F4;   
  141.     font-family: Verdana;   
  142.     font-size: 10px;   
  143. }   
  144.   
  145. .eXtremeTable .filterButtons {   
  146.     background-color: #efefef;   
  147.     text-align: right;   
  148. }   
  149.   
  150. .eXtremeTable .title {   
  151.     color: #444444;   
  152.     font-weight: bold;   
  153.     font-family: Verdana;   
  154.     font-size: 15px;   
  155.     vertical-align: middle;   
  156. }   
  157.   
  158. .eXtremeTable .title span {   
  159.     margin-left: 7px;   
  160. }   
  161.   
  162. .eXtremeTable .formButtons {   
  163.     display: block;   
  164.     margin-top: 10px;   
  165.     margin-left: 5px;   
  166. }   
  167.   
  168. .eXtremeTable .formButton {   
  169.     cursor: pointer;   
  170.     font-family: Verdana;   
  171.     font-size: 10px;   
  172.     font-weight: bold;   
  173.     background-color: #308dbb;   
  174.     color: white;   
  175.     margin-top: 5px;   
  176.     border: outset 1px #333;   
  177.     vertical-align: middle;   
  178. }   
  179.   
  180. .eXtremeTable .tableTotal {   
  181.     background-color: #FFFFFF;   
  182.     border-top: solid 1px Silver;   
  183. }   
  184.   
  185. .eXtremeTable .tableTotalEmpty {   
  186.     background-color: #FFFFFF;   
  187. }   
  188. </style>  
  189.     </head>  
  190.     <body style="margin: 25px;">  
  191.         <%    
  192.         StudDAO studDAO = new StudDAO() ;   
  193.         List<Map<String,String>> list = studDAO.query() ;   
  194.         request.setAttribute("studList", list) ;   
  195.         %>  
  196.         <ec:table items="studList"  
  197.             action="${pageContext.request.contextPath}/result.jsp"  
  198.             imagePath="${pageContext.request.contextPath}/images/table/*.gif"  
  199.             title="学员信息表" width="60%" rowsDisplayed="5">  
  200.             <ec:row>  
  201.                 <ec:column property="stuName" />  
  202.                 <ec:column property="address" />  
  203.                 <ec:column property="stuPhone" />  
  204.             </ec:row>  
  205.         </ec:table>  
  206.     </body>  
  207. </html>  

  1. <%@ page language="java" import="java.util.*,org.hnylj.eXtreme.*"  
  2.     pageEncoding="gb2312"%>  
  3. <%@ taglib uri="WEB-INF/extremecomponents.tld" prefix="ec"%>  
  4.   
  5. <html>  
  6.     <head>  
  7.         <title>用extremecomponents分页</title>  
  8.         <style type="text/css">  
  9. .eXtremeTable {   
  10.     margin: 0;   
  11.     padding: 0;   
  12. }   
  13.   
  14. .eXtremeTable select {   
  15.     font-family: Verdana;   
  16.     font-size: 9px;   
  17.     border: solid 1px #EEE;   
  18.     width: 75px;   
  19. }   
  20.   
  21. .eXtremeTable .tableRegion {   
  22.     border: 1px solid silver;   
  23.     padding: 2px;   
  24.     font-family: Verdana;   
  25.     font-size: 10px;   
  26.     margin-top: 7px;   
  27. }   
  28.   
  29. .eXtremeTable .filter {   
  30.     background-color: #efefef;   
  31. }   
  32.   
  33. .eXtremeTable .filter input {   
  34.     font-family: Verdana;   
  35.     font-size: 10px;   
  36.     width: 100%;   
  37. }   
  38.   
  39. .eXtremeTable .filter select {   
  40.     font-family: Verdana;   
  41.     font-size: 9px;   
  42.     border: solid 1px #EEE;   
  43.     width: 100%;   
  44. }   
  45.   
  46. .eXtremeTable .tableHeader {   
  47.     background-color: #308dbb;   
  48.     color: white;   
  49.     font-family: Verdana;   
  50.     font-size: 11px;   
  51.     font-weight: bold;   
  52.     text-align: left;   
  53.     padding-right: 3px;   
  54.     padding-left: 3px;   
  55.     padding-top: 4;   
  56.     padding-bottom: 4;   
  57.     margin: 0;   
  58.     border-right-style: solid;   
  59.     border-right-width: 1px;   
  60.     border-color: white;   
  61. }   
  62.   
  63. .eXtremeTable .tableHeaderSort {   
  64.     background-color: #3a95c2;   
  65.     color: white;   
  66.     font-family: Verdana;   
  67.     font-size: 11px;   
  68.     font-weight: bold;   
  69.     text-align: left;   
  70.     padding-right: 3px;   
  71.     padding-left: 3px;   
  72.     padding-top: 4;   
  73.     padding-bottom: 4;   
  74.     border-right-style: solid;   
  75.     border-right-width: 1px;   
  76.     border-color: white;   
  77. }   
  78.   
  79. .eXtremeTable .odd a,.even a {   
  80.     color: Black;   
  81.     font-size: 10px;   
  82. }   
  83.   
  84. .eXtremeTable .odd td,.eXtremeTable .even td {   
  85.     padding-top: 2px;   
  86.     padding-right: 3px;   
  87.     padding-bottom: 2px;   
  88.     padding-left: 3px;   
  89.     vertical-align: middle;   
  90.     font-family: Verdana;   
  91.     font-size: 10px;   
  92. }   
  93.   
  94. .eXtremeTable .odd {   
  95.     background-color: #FFFFFF;   
  96. }   
  97.   
  98. .eXtremeTable .even {   
  99.     background-color: #dfe4e8;   
  100. }   
  101.   
  102. .eXtremeTable .highlight td {   
  103.     color: black;   
  104.     font-size: 10px;   
  105.     padding-top: 2px;   
  106.     padding-right: 3px;   
  107.     padding-bottom: 2px;   
  108.     padding-left: 3px;   
  109.     vertical-align: middle;   
  110.     background-color: #fdecae;   
  111. }   
  112.   
  113. .eXtremeTable .highlight a,.highlight a {   
  114.     color: black;   
  115.     font-size: 10px;   
  116. }   
  117.   
  118. .eXtremeTable .toolbar {   
  119.     background-color: #F4F4F4;   
  120.     font-family: Verdana;   
  121.     font-size: 9px;   
  122.     margin-right: 1px;   
  123.     border-right: 1px solid silver;   
  124.     border-left: 1px solid silver;   
  125.     border-top: 1px solid silver;   
  126.     border-bottom: 1px solid silver;   
  127. }   
  128.   
  129. .eXtremeTable .toolbar td {   
  130.     color: #444444;   
  131.     padding: 0px 3px 0px 3px;   
  132.     text-align: center;   
  133. }   
  134.   
  135. .eXtremeTable .separator {   
  136.     width: 7px;   
  137. }   
  138.   
  139. .eXtremeTable .statusBar {   
  140.     background-color: #F4F4F4;   
  141.     font-family: Verdana;   
  142.     font-size: 10px;   
  143. }   
  144.   
  145. .eXtremeTable .filterButtons {   
  146.     background-color: #efefef;   
  147.     text-align: right;   
  148. }   
  149.   
  150. .eXtremeTable .title {   
  151.     color: #444444;   
  152.     font-weight: bold;   
  153.     font-family: Verdana;   
  154.     font-size: 15px;   
  155.     vertical-align: middle;   
  156. }   
  157.   
  158. .eXtremeTable .title span {   
  159.     margin-left: 7px;   
  160. }   
  161.   
  162. .eXtremeTable .formButtons {   
  163.     display: block;   
  164.     margin-top: 10px;   
  165.     margin-left: 5px;   
  166. }   
  167.   
  168. .eXtremeTable .formButton {   
  169.     cursor: pointer;   
  170.     font-family: Verdana;   
  171.     font-size: 10px;   
  172.     font-weight: bold;   
  173.     background-color: #308dbb;   
  174.     color: white;   
  175.     margin-top: 5px;   
  176.     border: outset 1px #333;   
  177.     vertical-align: middle;   
  178. }   
  179.   
  180. .eXtremeTable .tableTotal {   
  181.     background-color: #FFFFFF;   
  182.     border-top: solid 1px Silver;   
  183. }   
  184.   
  185. .eXtremeTable .tableTotalEmpty {   
  186.     background-color: #FFFFFF;   
  187. }   
  188. </style>  
  189.     </head>  
  190.     <body style="margin: 25px;">  
  191.         <%    
  192.         StudDAO studDAO = new StudDAO() ;   
  193.         List<Map<String,String>> list = studDAO.query() ;   
  194.         request.setAttribute("studList", list) ;   
  195.         %>  
  196.         <ec:table items="studList"  
  197.             action="${pageContext.request.contextPath}/result.jsp"  
  198.             imagePath="${pageContext.request.contextPath}/images/table/*.gif"  
  199.             title="学员信息表" width="60%" rowsDisplayed="5">  
  200.             <ec:row>  
  201.                 <ec:column property="stuName" />  
  202.                 <ec:column property="address" />  
  203.                 <ec:column property="stuPhone" />  
  204.             </ec:row>  
  205.         </ec:table>  
  206.     </body>  
  207. </html>  

4、部署整个web工程到Tomcat下,启动Tomcat,在浏览器中输入:

http://localhost:8080/eXtremeDemo/result.jsp

至此,就可以在页面中看到从数据库中查询出来的数据,而且自动进行了分页显示,有上一页,下一页,首页,末页,这样给我们剩去了很多进行分页显示的代码,在不做其他考虑的情况下,使用该组件大大提高了工作的效率。

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值