首先在数据库里面添加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 οnlοad="getPage(1);">
请输入每页要显示的数据:
<input type="text" name="pageSizes" id="psizes" size="1" value="10" />
<input type="button" οnclick="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" οnchange="myPage(this.value)">
<option selected="selected">
</select>
页
</td>
</tr>
</tbody>
第
<span id="pid">1</span> 页 总共有
<span id="total">0</span>页
</body>
简单的静态分页功能就这样实现了,可能我写的有点问题吧,但大致就是这样了,其实还有更简单的方法,但我这个人比较懒,一直都没去做了,如果有什么问题,可以给我留言,大家一起好好讨论。