用AjaxPro实现无刷新翻页效果及数据库分页技术介绍



在看本文之前，建议查看本人的系列文章： 《AjaxPro与服务器端交互过程中如何传值》：http://blog.csdn.net/zhoufoxcn/archive/2008/01/05/2026908.aspx 《用AjaxPro实现二级联动》：http://blog.csdn.net/zhoufoxcn/archive/2008/01/07/2029204.aspx 《用Aj

在看本文之前，建议查看本人的系列文章：
《AjaxPro与服务器端交互过程中如何传值》：http://blog.csdn.net/zhoufoxcn/archive/2008/01/05/2026908.aspx
《用AjaxPro实现二级联动》：http://blog.csdn.net/zhoufoxcn/archive/2008/01/07/2029204.aspx
《用AjaxPro实现定时刷新效果》：http://blog.csdn.net/zhoufoxcn/archive/2008/03/09/2160407.aspx
以便对AjaxPro有个初步印象。

题外话：经不住一些朋友的一再要求，一气写了这么几篇Ajax方面的文章，这其中大部分代码都是从我的项目中摘取出来的，不过为了演示整个程序的框架结构，所以在演示程序代码里不会有大量与实际相关的业务逻辑处理，但是这并不妨碍你利用这些理论做出复杂的、完善的应用。

一、数据库分页理论
在实际项目中经常会遇到一个表里有几K、几M以上的数据，而呈现给用户时并不会一下子都显示出来，所以都是分批展示给用户，这样一来可以减小网络传输量，二来也减轻服务器压力。

通常在不同数据库中都有查询从第N条到第M条记录的方法(M>N>=0)，不过其效率和性能都不太一样。假如有如下一个表：

DROP TABLE IF EXISTS `zhoufoxcn`.`userlist`;
CREATE TABLE `zhoufoxcn`.`userlist` (
`UserId` int(10) unsigned NOT NULL auto_increment,
`UserName` varchar(45) NOT NULL,
`Age` int(10) unsigned NOT NULL default '10',
`Sex` tinyint(3) unsigned NOT NULL default '1',
`Tall` int(10) unsigned NOT NULL,
`Salary` int(10) unsigned NOT NULL,
PRIMARY KEY (`UserId`)
) ENGINE=InnoDB AUTO_INCREMENT=694 DEFAULT CHARSET=utf8;

以上是我今天演示要用到的一个MySQL中的表，对于同样结构的表，查询从第N条到第M条记录的方法在MySQL中表示为：

select * from userlist order by userId limit n,m

MS SQL Server:

select top (m-n) * from userList where userid not in
(select top n userid from userList order by userid) order by userid

Oracle:

select * from (select rownum no,* from userlist where rownum<=m) where no>=n;

另外，如果数据量小的话还可以直接用DbDataAdapter 的子类的实例的public int Fill (int startRecord,int maxRecords,params DataTable[] dataTables)方法。如果数据量大的话，可能会根据实际情况采用临时表或者缓存的办法，来获得更高性能。

二、程序代码：
前台页面：

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="AjaxPager.aspx.cs" Inherits="AjaxPager" %>

和谐小区青年居民概况表

数据装载中，请等待.....

说明：本名单中不包括离退休人员、残疾智障人员和儿童。

后台代码：

using System;
using System.Data;
using System.Configuration;
using System.Collections;
using System.Web;
using System.Web.Caching;
using System.Web.Security;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.Web.UI.WebControls.WebParts;
using System.Web.UI.HtmlControls;
using System.Text;
using MySql.Data.MySqlClient;
using MySql.Data.Types;

///

/// 说明：本文介绍如何利用AjaxPro技术实现翻页时局部刷新，同时也介绍了翻页所涉及到的数据库知识(MySQL、MS SQL和Oracle)。
/// 本演示程序采用MySQL数据库，数据库中的数据是采用程序随机生成的。
/// 首发地址：http://blog.csdn.net/zhoufoxcn/archive/2008/03/12/2174234.aspx
/// 作者：周公
/// 日期：2008-3-12
///

public partial class AjaxPager : System.Web.UI.Page
{
protected void Page_Load(object sender, EventArgs e)
{
AjaxPro.Utility.RegisterTypeForAjax(typeof(AjaxPager));
}

///

/// 从数据库中指定位置读取指定数目的数据
///

/// 记录的起始页位置
/// 要读取的记录条数
///
[AjaxPro.AjaxMethod]
public DataTable GetDataTable(int pageIndex, int size)
{
MySqlConnection connection = new MySqlConnection(ConfigurationManager.ConnectionStrings["MySql"].ConnectionString);
MySqlDataAdapter adapter = new MySqlDataAdapter("select * from userlist limit " + (pageIndex-1) * size + "," + size, connection);
DataTable data = new DataTable();
adapter.Fill(data);
connection.Close();
adapter.Dispose();
return data;
}
///

/// 传递div节点的html字符串
///

/// 记录的起始页位置
/// 要读取的记录条数
///
[AjaxPro.AjaxMethod]
public string GetString(int pageIndex, int size)
{
StringBuilder text = new StringBuilder();
text.Append("");
text.Append("");
text.Append("");
text.Append("");
text.Append("");
text.Append("");
text.Append("");
text.Append("");
text.Append("");
DataTable source = GetDataTable(pageIndex,size);
DataRow row;
for (int i = 0; i < source.Rows.Count; i++)
{
row = source.Rows[i];
text.Append("");
for (int column = 0; column < source.Columns.Count; column++)
{
text.Append("");
}
text.Append("");
}
int pageCount=(int)(Math.Ceiling(GetRecordCount()/(double)size));
text.Append("");
text.Append("");
if (pageIndex < pageCount)
{
text.Append("");
text.Append("

编号	姓名	年龄	性别	身高	工资
" + row[column].ToString() + "
首页	" + (pageIndex+1) + ""); } else { text.Append(""); } if (pageIndex > 1) { text.Append("	" + (pageIndex-1)+ ""); } else { text.Append(""); } text.Append("	" + pageCount + ")'>尾页	"); text.Append("	当前页："+pageIndex+"/"+pageCount+"

");
return text.ToString();
}
///

/// 返回记录总条数
///

///
[AjaxPro.AjaxMethod]
public int GetRecordCount()
{
MySqlConnection connection = new MySqlConnection(ConfigurationManager.ConnectionStrings["MySql"].ConnectionString);
MySqlCommand command = new MySqlCommand("select count(userId) from userlist", connection);
connection.Open();
int count = int.Parse(command.ExecuteScalar().ToString());
connection.Close();
command.Dispose();
return count;
}
}

程序的运行效果：

最后说明：细心的朋友也许还会发现程序中public DataTable GetDataTable(int pageIndex, int size)也有AjaxMethod属性，我原本打算将这个方法写完的，可是现在时间太晚，留待大家实现了。这也就是另外一种办法：向客户端返回一个DataTable，在客户端将DataTable内的数据加工一下，它与我现在展示的方法区别是一个在服务器端、一个在客户端实现拼接div层的innerHtml方法。在服务器拼接的优点是纯cs代码，开发效率高，但是较真地说它占用了服务器资源；在客户端拼接的办法的优点就是拼接时不占用服务器资源，运行效率高，但是编写的时候效率较低。