现在的位置: 首页 > 综合 > 正文

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

2014年01月24日 ⁄ 综合 ⁄ 共 8293字 ⁄ 字号 小 中 大 ⁄ 评论关闭
文章目录
 

在看本文之前，建议查看本人的系列文章：
《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代码，开发效率高，但是较真地说它占用了服务器资源；在客户端拼接的办法的优点就是拼接时不占用服务器资源，运行效率高，但是编写的时候效率较低。

发表于 @ 2008年03月12日 19:34:00|评论(4

)|收藏

新一篇: 用c#和GDI+实现杂志翻页动画效果 | 旧一篇: 用AjaxPro实现定时刷新效果

评论

#TangJuhnpen 发表于2008-03-13 18:23:02  IP: 202.97.139.*
这篇文章写的真不错了，大有收获

2008-03-13 20:24:20作者回复
其实如果看了前面我写的几篇文章，再看这篇就没有太多技术含量了。唯一值得一提的就是数据库的分页技术。
#student 发表于2008-07-14 15:06:28  IP: 220.178.29.*
初学AJAX，不知道看什么书比较好。

2008-07-15 09:22:04作者回复
在ASP.NET实现AJAX技术有三种方式：<br />一种是纯粹用JavaScript代码实现；另外一种是利用微软提供的AJAX控件来做；还有利用第三方的技术。<br />总体来说，利用纯JS来做最灵活，但是开发速度相对较慢，调试也较为困难；<br />利用微软的实现开发速度快，调试非常容易，但是灵活性稍微低一些；<br />利用第三方的，比如AJAXPro，在灵活性和开发速度以及调试便捷性上介于上面二者之间。<br />开发Ajax需要对Javascript有一定的了解。建议从这方面的知识入手。
#abaal 发表于2008-07-29 11:47:27  IP: 221.216.60.*
你的文章写的太好了，太适合我们这些刚学AJXA的人了。
我也用了这个代码试试，发现我页面显示不出来，一直在显示数据正在调用.....
#abaal 发表于2008-07-29 11:47:34  IP: 221.216.60.*
你的文章写的太好了，太适合我们这些刚学AJXA的人了。
我也用了这个代码试试，发现我页面显示不出来，一直在显示数据正在调用.....

返回
【上篇】
【下篇】

作者:

抱歉!评论已关闭.

返回首页

Copyright © 2013-2018 学步园  保留所有权利.
软文销售 QQ客服：2265327166 点击这里给我发消息（其他合作也可洽谈）
必威体育
必威电竞