用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.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 >请输入每页要显示的数据:<input type="text" name="pageSizes" id="psizes" size="1" value="10" /><input type="button"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>
简单的静态分页功能就这样实现了,可能我写的有点问题吧,但大致就是这样了,其实还有更简单的方法,但我这个人比较懒,一直都没去做了,如果有什么问题,可以给我留言,大家一起好好讨论。
页:
[1]