开发者社区> 技术小甜> 正文
阿里云
为了无法计算的价值
打开APP
阿里云APP内打开

用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 
《用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(45NOT 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,如需转载请自行联系原作者

版权声明:本文内容由阿里云实名注册用户自发贡献,版权归原作者所有,阿里云开发者社区不拥有其著作权,亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容,填写侵权投诉表单进行举报,一经查实,本社区将立刻删除涉嫌侵权内容。

相关文章
1.17~1.30 标准C库IO函数和Linux系统IO函数
1.17~1.30 标准C库IO函数和Linux系统IO函数
10 0
MaxCompute技术人背后的故事:从ApacheORC到AliORC | 7月25号云栖夜读
今天的首篇文章,讲述了:2019大数据技术公开课第一季《技术人生专访》来袭,本季将带领开发者们探讨大数据技术,分享不同国家的工作体验。本文整理自阿里巴巴计算平台事业部高级技术专家吴刚的专访,将为大家介绍Apache ORC开源项目、主流的开源列存格式ORC和Parquet的区别以及MaxCompute选择ORC的原因。
4174 0
大数据分析平台产品对比之MaxCompute 篇
之前尝试使用过一些国内外的云产品,特别是大数据分析型产品,例如:亚马逊的EMR、Redshift,Google的Bigquery以及阿里云的MaxCompute。相信大多数人对亚马逊的EMR、Redshift,Google的Bigquery都比较了解。
8160 0
精通linux c编程 --answer
  第1章 一、填空题 1、Unix 2、Shell 3、普通文件 目录文件 设备文件 4、目录 5、mkdir 二、选择题 1、A 2、A 3、B 4、C 5、C 第2章 一、填空题 1、Shell 高级语言 2、vi emacs 3、Make...
871 0
+关注
文章
问答
文章排行榜
最热
最新
相关电子书
更多
低代码开发师(初级)实战教程
立即下载
阿里巴巴DevOps 最佳实践手册
立即下载
冬季实战营第三期:MySQL数据库进阶实战
立即下载