在看本文之前,建议查看本人的系列文章:
《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),不过其效率和性能都不太一样。假如有如下一个表:
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;
( select top n userid from userList order by userid) order by userid
另外,如果数据量小的话还可以直接用DbDataAdapter 的子类的实例的public int Fill (int startRecord,int maxRecords,params DataTable[] dataTables)方法。如果数据量大的话,可能会根据实际情况采用临时表或者缓存的办法,来获得更高性能。
二、程序代码:
前台页面:
<! DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd" >
< html xmlns ="http://www.w3.org/1999/xhtml" >
< head runat ="server" >
< title > AjaxPro翻页效果 </ title >
< style type ="text/css" >
tr.items {
background-color : #8FACC2 ;
border-color : #FFFFFF ;
line-height : 18px ;
}
tr.table { /* 表格内容 */
background-color : #F1F3F5 ;
border-color : #FFFFFF ;
line-height : 18px ;
}
</ style >
</ head >
< body onload ="JumpPage(1)" >
< form id ="form1" runat ="server" >
< table border ="0" cellpadding ="1" cellspacing ="1" >
< tr >< td > 和谐小区青年居民概况表 </ td ></ tr >
< tr >< td >
< div id ="memberList" >
数据装载中,请等待.....
</ div >
</ td ></ tr >
< tr >< td > 说明:本名单中不包括离退休人员、残疾智障人员和儿童。 </ td ></ tr >
</ table >
</ form >
< script language ="javascript" type ="text/javascript" defer ="defer" >
var pageSize = 20 ; // 假定每页显示20条数据
function JumpPage(page) // 完全服务器端分页处理方法
{
var label = document.getElementById( " memberList " );
label.innerHTML = AjaxPager.GetString(parseInt(page),parseInt(pageSize)).value;
}
/*
function ShowPager()
{
}
function JumpPageClient(page)
{
var label=document.getElementById("memberList");
var data=AjaxPager.GetDataTable(parseInt(page),parseInt(pageSize)).value;
if(data!=null)
{
alert(data.Rows.length);
}
label.innerHTML=data.Rows.length;
}
*/
</ script >
</ body >
</ html >
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;
/// <summary>
/// 说明:本文介绍如何利用AjaxPro技术实现翻页时局部刷新,同时也介绍了翻页所涉及到的数据库知识(MySQL、MS SQL和Oracle)。
/// 本演示程序采用MySQL数据库,数据库中的数据是采用程序随机生成的。
/// 首发地址:http://blog.csdn.net/zhoufoxcn/archive/2008/03/12/2174234.aspx
/// 作者:周公
/// 日期:2008-3-12
/// </summary>
public partial class AjaxPager : System.Web.UI.Page
{
protected void Page_Load( object sender, EventArgs e)
{
AjaxPro.Utility.RegisterTypeForAjax( typeof (AjaxPager));
}
/// <summary>
/// 从数据库中指定位置读取指定数目的数据
/// </summary>
/// <param name="startIndex"> 记录的起始页位置 </param>
/// <param name="size"> 要读取的记录条数 </param>
/// <returns></returns>
[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;
}
/// <summary>
/// 传递div节点的html字符串
/// </summary>
/// <param name="startIndex"> 记录的起始页位置 </param>
/// <param name="size"> 要读取的记录条数 </param>
/// <returns></returns>
[AjaxPro.AjaxMethod]
public string GetString( int pageIndex, int size)
{
StringBuilder text = new StringBuilder();
text.Append( " <table border='0' cellpadding='0' cellspacing='0' width='520px'> " );
text.Append( " <tr class='items' align='center'> " );
text.Append( " <td style='width:80px'>编号</td> " );
text.Append( " <td style='width:80px'>姓名</td> " );
text.Append( " <td style='width:80px'>年龄</td> " );
text.Append( " <td style='width:80px'>性别</td> " );
text.Append( " <td style='width:80px'>身高</td> " );
text.Append( " <td style='width:80px'>工资</td> " );
text.Append( " </tr> " );
DataTable source = GetDataTable(pageIndex,size);
DataRow row;
for ( int i = 0 ; i < source.Rows.Count; i ++ )
{
row = source.Rows[i];
text.Append( " <tr class='table' align='center'> " );
for ( int column = 0 ; column < source.Columns.Count; column ++ )
{
text.Append( " <td style='width:80px'> " + row[column].ToString() + " </td> " );
}
text.Append( " </tr> " );
}
int pageCount = ( int )(Math.Ceiling(GetRecordCount() / ( double )size));
text.Append( " <tr class='items' align='center'> " );
text.Append( " <td><a href='javascript:JumpPage(1)'>首页</a></td> " );
if (pageIndex < pageCount)
{
text.Append( " <td><a href='javascript:JumpPage( " + (pageIndex + 1 ) + " )'>下一页</a></td> " );
}
else
{
text.Append( " <td>下一页</a></td> " );
}
if (pageIndex > 1 )
{
text.Append( " <td><a href='javascript:JumpPage( " + (pageIndex - 1 ) + " )'>上一页</a></td> " );
}
else
{
text.Append( " <td>上一页</a></td> " );
}
text.Append( " <td><a href='javascript:JumpPage( " + pageCount + " )'>尾页</a><td> " );
text.Append( " <td>当前页: " + pageIndex + " / " + pageCount + " </td> " );
text.Append( " </table> " );
return text.ToString();
}
/// <summary>
/// 返回记录总条数
/// </summary>
/// <returns></returns>
[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代码,开发效率高,但是较真地说它占用了服务器资源;在客户端拼接的办法的优点就是拼接时不占用服务器资源,运行效率高,但是编写的时候效率较低。