用Ajax和DWR做的静态分页功能源代码

首先在数据库里面添加N条信息 
我这里是用sqlserver2005做的 

开启Eclipse 新建项目，新建类DBHelper类，连接数据库的帮助类  
1.   DBHelper
public class DBHelper {
	private Connection conn;

	private Statement stmt;

	private ResultSet rs;

	/**
	 * 创建数据库连接
	 * 
	 */
	private void getConnection() {
		String driverClassName = "com.microsoft.sqlserver.jdbc.SQLServerDriver";
		String url = "jdbc:sqlserver://localhost:1433;databasename=ajax03";
		String username = "sa";
		String password = "123456";

		// 1、加载驱动
		try {
			Class.forName(driverClassName);
		} catch (ClassNotFoundException e) {
			// TODO 自动生成 catch 块
			e.printStackTrace();
		}
		// 2、获取连接

		try {
			conn = DriverManager.getConnection(url, username, password);
		} catch (SQLException e) {
			// TODO 自动生成 catch 块
			e.printStackTrace();
		}
	}

	/**
	 * 用statement执行查询，外面调用的时候，要关闭数据库资源
	 * 
	 * @param sql
	 * @return
	 * @throws SQLException
	 */
	public ResultSet executeQuery(String sql) throws SQLException {
		getConnection();
		stmt = conn.createStatement();
		rs = stmt.executeQuery(sql);
		return rs;
	}

	/**
	 * 关闭数据库资源
	 * 
	 */
	public void close() {
		try {
			if (rs != null) {
				rs.close();
			}
			if (stmt != null) {
				stmt.close();
			}
			if (conn != null && !conn.isClosed()) {
				conn.close();
			}
		} catch (SQLException e) {
			// TODO 自动生成 catch 块
			e.printStackTrace();
		}
	}

}
 DBHelper类已创建成功，接着创建它的实体类Province，我们在这里假设有2列数据（id ,name）
2.   Province
public class Province {
	private Integer id;
	private String name;

	public Province() {
		super();
	}

	public Province(Integer id, String name) {
		super();
		this.id = id;
		this.name = name;
	}

	public Integer getId() {
		return id;
	}

	public void setId(Integer id) {
		this.id = id;
	}

	public String getName() {
		return name;
	}

	public void setName(String name) {
		this.name = name;
	}
}
 接着开始创建逻辑类，首先考虑的是，分页需要哪些步骤，有些什么功能，在数据库里面如何写sql语句，我在这里简单的写了些功能
3. PageDao
 
public class PageDao {

	private DBHelper helper = new DBHelper();

	/*
	 * 每页的记录数
	 */
	private int pageSizes=10 ;

	/*
	 * 总页数
	 */
	private int totalPage;

	/*
	 * 当前行号
	 */
	private int currentPage = 1;
	
	/**
	 * 得到所有数据
	 * @return
	 */
	public int getTotalPage(int total) {
		total =0;
		String sql = "select * from tbl_province";
		try {
			ResultSet rs = helper.executeQuery(sql);
			while (rs.next()) {
				total++;
			}

		} catch (SQLException e) {
			e.printStackTrace();
		} finally {
			helper.close();
		}
		totalPage = (int) Math.ceil(total/(double)pageSizes);
		return totalPage  ;
	}
	
	/**
	 * 分页
	 * @param page
	 * @return
	 */
	public List<Province> getPage(int page ,int pageSize) {
		pageSizes = pageSize;
		String sql = "SELECT TOP " + pageSizes + " * "
				+ "FROM tbl_province WHERE (id NOT IN " + "(SELECT TOP "
				+ (pageSizes*(page-1)) + " id " + "FROM tbl_province order by id)) "
				+ "order by id";
		List<Province> list = new ArrayList<Province>();
		try {
			ResultSet rs = helper.executeQuery(sql);
			while (rs.next()) {
				Province province = new Province();
				province.setId(rs.getInt("id"));
				province.setName(rs.getString("name"));
				list.add(province);
			}
		} catch (SQLException e) {
			e.printStackTrace();
		} finally {
			helper.close();
		}
		return list;
	}

	/**
	 * 得到第一页
	 * @param page
	 * @return
	 */
	public int getFistPage(int page) {
		currentPage = page;
		return currentPage;
	}
	
	/**
	 * 得到最后一页
	 * @param page
	 * @return
	 */
	public int getLastPage(int page) {
		totalPage = getTotalPage(page-1);
		page = totalPage;
		return totalPage;
	}

	/**
	 * 下一页
	 * @param page
	 * @return
	 */
	public int hasNextPage(int page) {
		totalPage = getTotalPage(page);
		if (page >= totalPage) {
			return totalPage;
		}
		currentPage = page+1;
//		System.out.println(totalPage);
		return currentPage ++;

	}
	/**
	 * 上一页
	 * @param page
	 * @return
	 */
	public int hasPreviousPage(int page) {
		totalPage = getTotalPage(page);
		if (page <= 1) {
			return 1;
		}
		currentPage = page;
		return currentPage -1;
	}
	
	/**
	 * 得到当前的页数
	 * @param page
	 * @return
	 */
	public int getNowPage(int page){
		currentPage = page;
		return currentPage;
	}
	
}
 基本上的逻辑已经完成，现在只需要界面上的代码，就可以实现简单的分页了...
 当然在web.xml 和 dwr.xml中的配置可不能忘记，这里我就不多说了
 在index.jsp中导入dwr的配置文件
<script type='text/javascript' src='/项目名/dwr/engine.js'></script>
		<script type='text/javascript' src='/项目名/dwr/util.js'></script>
		<script type='text/javascript'
			src='/项目名/dwr/interface/PageDao.js'></script>
 完成之后开始js脚本 和页面的设置
<script type="text/javascript">
		DWREngine.setOrdered(true);
		var page = 1;
			function getPage(pages){
				page = pages;
				PageDao.getPage(pages,$("psizes").value,showPage);
			}
			//用来确定显示具体数据的
			var cellFunctions=[
				//第一列显示什么数据,item就是相应的对象
				function(item){return item.id},
				//第二列显示什么数据
				function(item){return item.name}
			]
			function showPage(data){
				
				totalPage();
				getNpage();
				
				DWRUtil.removeAllRows("abc");
				DWRUtil.addRows("abc", data, cellFunctions);
				
			}
			
			//得到第一页
			function fistPage(){
				PageDao.getFistPage(1,getPage);
				if(page <= 1){
					alert("已经是第一页了...");
				}
			}
			
			//下一页
			function nextPage(){
				PageDao.hasNextPage(page,getPage);
				var total = $("total").innerHTML;
				if(page >= total){
					alert("已经是最后一页了...");
				}
			}
			
			//上一页
			function previousPage(){
				PageDao.hasPreviousPage(page,getPage);
				if(page <= 1){
					alert("已经是第一页了...");
				}
			}
			
			//最后一页
			function lastPage(){
			var total = $("total").innerHTML;
				PageDao.getLastPage(page,getPage);
				if(page >= total){
					alert("已经是最后一页了...");
				}
			}
			
			//到第几页
			function myPage(page){
				PageDao.getNowPage(page,getPage);
			}
			
			function getTotal(data){
				$("total").innerHTML=data;
				setForPage();
				setPageId();
			}
			
			//显示得到现在的页面数
			function getNow(data){
				$("pid").innerText=data;
				$("pageSize").options[data-1].selected =true;
			}
			
			//得到总共的页面书
			function totalPage(){
				PageDao.getTotalPage(page,getTotal);
			}
			//得到现在的页面数
			function getNpage(){
				PageDao.getNowPage(page,getNow);
			}
			//设置下拉框到的页面
			function setForPage(){
				$("pageSize").length=0;
				var allPageNumber = $("total").innerHTML;
				for(i=1;i<=allPageNumber;i++){
					$("pageSize").options.add(new Option(i,i));
				}
			}
			//得到页面的数字
			function setPageId(){
				$("pageId").innerHTML="";
				var allPageNumber = $("total").innerHTML;
				for(i=1;i<=allPageNumber;i++){
					if(page != i){
						$("pageId").innerHTML += "<a href='javascript:myPage("+i+")'>"+"[ "+i+" ]"+"</a>"+"  ";
					}else{
						$("pageId").innerHTML += "[<span style='color:red'> "+i+" </span>]";
					}                                                                                                                    
				}
			}
		</script>

	</head>

	<body onload="getPage(1);">
		请输入每页要显示的数据：
		<input type="text" name="pageSizes" id="psizes" size="1" value="10" />
		<input type="button" onclick="fistPage();" value="确定">
		<br>
		<table border="1" width="600">
			<caption>
				简单的分页功能
			</caption>
			<thead>
				<tr>
					<th>
						ID
					</th>
					<th>
						名字
					</th>
				</tr>
			</thead>
			<tbody id="abc">
			</tbody>

		</table>
		<tbody>
			<tr>
				<td>
					<a href="javaScript:fistPage()">首页</a>
				</td>
				<td>
					<a href="javaScript:previousPage()" id="up">上一页</a>
				</td>
				<td style="color:red">
					
						<span id="pageId">  </span>
						
				</td>
				<td>
					<a href="javaScript:nextPage()" id="next">下一页</a>
				</td>
				<td>
					<a href="javaScript:lastPage()">最后一页</a>
				</td>
				<td>
					第
					<select id="pageSize" onchange="myPage(this.value)">
						<option selected="selected">
					</select>
					页
				</td>
			</tr>
		</tbody>
		第
		<span id="pid">1</span> 页    总共有
		<span id="total">0</span>页 
	</body>
 
简单的静态分页功能就这样实现了，可能我写的有点问题吧，但大致就是这样了，其实还有更简单的方法，但我这个人比较懒，一直都没去做了，如果有什么问题，可以给我留言，大家一起好好讨论。

  
  

    
      
        

          

          
          
大小: 52 KB
        
      
    
    
      

        
查看图片附件
      
    
  



  

    
    
分享到：
      
      
    
  

  

    

      简历要简 面试要试 求职才能成功
      |
      Oracle 查询并删除重复记录的SQL语句
    
  
  

    

      
2009-01-03 22:25
      
浏览 1651
      
评论(0)
      
      
            
      
查看更多