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

本文涉及的产品
云数据库 RDS MySQL,集群系列 2核4GB
推荐场景:
搭建个人博客
RDS MySQL Serverless 基础系列,0.5-2RCU 50GB
云数据库 RDS PostgreSQL,集群系列 2核4GB
简介:
在看本文之前,建议查看本人的系列文章:
《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 "   %>

<! 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;
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代码,开发效率高,但是较真地说它占用了服务器资源;在客户端拼接的办法的优点就是拼接时不占用服务器资源,运行效率高,但是编写的时候效率较低。


















本文转自周金桥51CTO博客,原文链接: http://blog.51cto.com/zhoufoxcn/167033 ,如需转载请自行联系原作者
相关实践学习
如何在云端创建MySQL数据库
开始实验后,系统会自动创建一台自建MySQL的 源数据库 ECS 实例和一台 目标数据库 RDS。
全面了解阿里云能为你做什么
阿里云在全球各地部署高效节能的绿色数据中心,利用清洁计算为万物互联的新世界提供源源不断的能源动力,目前开服的区域包括中国(华北、华东、华南、香港)、新加坡、美国(美东、美西)、欧洲、中东、澳大利亚、日本。目前阿里云的产品涵盖弹性计算、数据库、存储与CDN、分析与搜索、云通信、网络、管理与监控、应用服务、互联网中间件、移动服务、视频服务等。通过本课程,来了解阿里云能够为你的业务带来哪些帮助 &nbsp; &nbsp; 相关的阿里云产品:云服务器ECS 云服务器 ECS(Elastic Compute Service)是一种弹性可伸缩的计算服务,助您降低 IT 成本,提升运维效率,使您更专注于核心业务创新。产品详情: https://www.aliyun.com/product/ecs
相关文章
|
11天前
|
存储 NoSQL 关系型数据库
非关系型数据库-MongoDB技术(二)
非关系型数据库-MongoDB技术(二)
|
11天前
|
NoSQL 关系型数据库 MongoDB
非关系型数据库-MongoDB技术(一)
非关系型数据库-MongoDB技术(一)
|
23天前
|
存储 负载均衡 数据库
探索后端技术:从服务器架构到数据库优化的实践之旅
在当今数字化时代,后端技术作为支撑网站和应用运行的核心,扮演着至关重要的角色。本文将带领读者深入后端技术的两大关键领域——服务器架构和数据库优化,通过实践案例揭示其背后的原理与技巧。无论是对于初学者还是经验丰富的开发者,这篇文章都将提供宝贵的见解和实用的知识,帮助读者在后端开发的道路上更进一步。
|
23天前
|
SQL 关系型数据库 MySQL
MySQL技术安装配置、数据库与表的设计、数据操作解析
MySQL,作为最流行的关系型数据库管理系统之一,在WEB应用领域中占据着举足轻重的地位。本文将从MySQL的基本概念、安装配置、数据库与表的设计、数据操作解析,并通过具体的代码示例展示如何在实际项目中应用MySQL。
65 0
|
1月前
|
关系型数据库 Java MySQL
"解锁Java Web传奇之旅:从JDK1.8到Tomcat,再到MariaDB,一场跨越数据库的冒险安装盛宴,挑战你的技术极限!"
【9月更文挑战第6天】在Linux环境下安装JDK 1.8、Tomcat和MariaDB是搭建Java Web应用的关键步骤。本文详细介绍了使用apt-get安装OpenJDK 1.8、下载并配置Tomcat,以及安装和安全设置MariaDB(MySQL的开源分支)的方法。通过这些步骤,您可以快速构建一个稳定、高效的开发和部署环境,并验证各组件是否正确安装和运行。这为您的Java Web应用提供了一个坚实的基础。
37 0
|
1月前
|
SQL 安全 数据库
基于SQL Server事务日志的数据库恢复技术及实战代码详解
基于事务日志的数据库恢复技术是SQL Server中一个非常强大的功能,它能够帮助数据库管理员在数据丢失或损坏的情况下,有效地恢复数据。通过定期备份数据库和事务日志,并在需要时按照正确的步骤恢复,可以最大限度地减少数据丢失的风险。需要注意的是,恢复数据是一个需要谨慎操作的过程,建议在执行恢复操作之前,详细了解相关的操作步骤和注意事项,以确保数据的安全和完整。
59 0
|
2月前
|
C# UED 定位技术
WPF控件大全:初学者必读,掌握控件使用技巧,让你的应用程序更上一层楼!
【8月更文挑战第31天】在WPF应用程序开发中,控件是实现用户界面交互的关键元素。WPF提供了丰富的控件库,包括基础控件(如`Button`、`TextBox`)、布局控件(如`StackPanel`、`Grid`)、数据绑定控件(如`ListBox`、`DataGrid`)等。本文将介绍这些控件的基本分类及使用技巧,并通过示例代码展示如何在项目中应用。合理选择控件并利用布局控件和数据绑定功能,可以提升用户体验和程序性能。
46 0
|
2月前
|
存储 SQL 数据库
|
2月前
|
存储 SQL 数据库
自连接:数据库查询中的镜像技术
【8月更文挑战第31天】
15 0
下一篇
无影云桌面