怎樣用AjaxPro實(shí)現(xiàn)無(wú)刷新翻頁(yè)效果及數(shù)據(jù)庫(kù)分頁(yè)_AJAX教程
      
編輯Tag賺U幣
      


      教程Tag：暫無(wú)Tag,歡迎添加,賺取U幣!
      


      

      推薦：解析簡(jiǎn)單自定義實(shí)現(xiàn)jQuery驗(yàn)證
      分兩種情況驗(yàn)證，一是直接使用本地驗(yàn)證，二是ajax到服務(wù)器驗(yàn)證。 我現(xiàn)在需要驗(yàn)證：用戶名，郵箱，電話 三個(gè)input(text)，用戶名、電話號(hào)碼只需要本地驗(yàn)證格式，只要匹配給定的正則表達(dá)式即可，而郵箱首先在本地驗(yàn)證格式，符合格式則ajax到服務(wù)器驗(yàn)證是否已被
      在看本文之前，建議查看本人的系列文章：
      《AjaxPro與服務(wù)器端交互過(guò)程中如何傳值》
      《用AjaxPro實(shí)現(xiàn)二級(jí)聯(lián)動(dòng)》
      《用AjaxPro實(shí)現(xiàn)定時(shí)刷新效果》
      以便對(duì)AjaxPro有個(gè)初步印象。
      題外話：經(jīng)不住一些朋友的一再要求，一氣寫了這么幾篇Ajax方面的文章，這其中大部分代碼都是從我的項(xiàng)目中摘取出來(lái)的，不過(guò)為了演示整個(gè)程序的框架結(jié)構(gòu)，所以在演示程序代碼里不會(huì)有大量與實(shí)際相關(guān)的業(yè)務(wù)邏輯處理，但是這并不妨礙你利用這些理論做出復(fù)雜的、完善的應(yīng)用。
      一、數(shù)據(jù)庫(kù)分頁(yè)理論
      在實(shí)際項(xiàng)目中經(jīng)常會(huì)遇到一個(gè)表里有幾K、幾M以上的數(shù)據(jù)，而呈現(xiàn)給用戶時(shí)并不會(huì)一下子都顯示出來(lái)，所以都是分批展示給用戶，這樣一來(lái)可以減小網(wǎng)絡(luò)傳輸量，二來(lái)也減輕服務(wù)器壓力。
      通常在不同數(shù)據(jù)庫(kù)中都有查詢從第N條到第M條記錄的方法(M>N>=0)，不過(guò)其效率和性能都不太一樣。假如有如下一個(gè)表：
       
      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;
      以上是我今天演示要用到的一個(gè)MySQL中的表，對(duì)于同樣結(jié)構(gòu)的表，查詢從第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; 
       
      另外，如果數(shù)據(jù)量小的話還可以直接用DbDataAdapter 的子類的實(shí)例的public int Fill (int startRecord,int maxRecords,params DataTable[] dataTables)方法。如果數(shù)據(jù)量大的話，可能會(huì)根據(jù)實(shí)際情況采用臨時(shí)表或者緩存的辦法，來(lái)獲得更高性能。
      二、程序代碼：
      前臺(tái)頁(yè)面：
       
      <%@ 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翻頁(yè)效果</title>
      <style type="text/css">
      tr.items{ 
      background-color: #8FACC2;
      border-color:#FFFFFF;
      line-height:18px;
      }
      tr.table{ /*表格內(nèi)容*/
      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>和諧小區(qū)青年居民概況表</td></tr>
      <tr><td>
      <div id="memberList">
      數(shù)據(jù)裝載中，請(qǐng)等待.....
      </div>
      </td></tr>
      <tr><td>說(shuō)明：本名單中不包括離退休人員、殘疾智障人員和兒童。</td></tr>
      </table>
      </form>
      <script language="javascript" type="text/javascript" defer="defer">
      var pageSize=20;//假定每頁(yè)顯示20條數(shù)據(jù)
      function JumpPage(page)//完全服務(wù)器端分頁(yè)處理方法
      {
      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>
      后臺(tái)代碼：
      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>
      /// 說(shuō)明：本文介紹如何利用AjaxPro技術(shù)實(shí)現(xiàn)翻頁(yè)時(shí)局部刷新，同時(shí)也介紹了翻頁(yè)所涉及到的數(shù)據(jù)庫(kù)知識(shí)(MySQL、MS SQL和Oracle)。
      /// 本演示程序采用MySQL數(shù)據(jù)庫(kù)，數(shù)據(jù)庫(kù)中的數(shù)據(jù)是采用程序隨機(jī)生成的。
      /// 首發(fā)地址：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>
      /// 從數(shù)據(jù)庫(kù)中指定位置讀取指定數(shù)目的數(shù)據(jù)
      /// </summary>
      /// <param name="startIndex">記錄的起始頁(yè)位置</param>
      /// <param name="size">要讀取的記錄條數(shù)</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節(jié)點(diǎn)的html字符串
      /// </summary>
      /// <param name="startIndex">記錄的起始頁(yè)位置</param>
      /// <param name="size">要讀取的記錄條數(shù)</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'>編號(hào)</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)'>首頁(yè)</a></td>");
      if (pageIndex < pageCount)
      {
      text.Append("<td><a href='javascript：JumpPage(" + (pageIndex+1) + ")'>下一頁(yè)</a></td>");
      }
      else
      {
      text.Append("<td>下一頁(yè)</a></td>");
      }
      if (pageIndex > 1)
      {
      text.Append("<td><a href='javascript：JumpPage(" + (pageIndex-1)+ ")'>上一頁(yè)</a></td>");
      }
      else
      {
      text.Append("<td>上一頁(yè)</a></td>");
      }
      text.Append("<td><a href='javascript：JumpPage(" + pageCount + ")'>尾頁(yè)</a><td>");
      text.Append("<td>當(dāng)前頁(yè)："+pageIndex+"/"+pageCount+"</td>");
      text.Append("</table>");
      return text.ToString();
      }
      /// <summary>
      /// 返回記錄總條數(shù)
      /// </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;
      }
      }
      程序的運(yùn)行效果：
      最后說(shuō)明：細(xì)心的朋友也許還會(huì)發(fā)現(xiàn)程序中public DataTable GetDataTable(int pageIndex, int size)也有AjaxMethod屬性，我原本打算將這個(gè)方法寫完的，可是現(xiàn)在時(shí)間太晚，留待大家實(shí)現(xiàn)了。這也就是另外一種辦法：向客戶端返回一個(gè)DataTable，在客戶端將DataTable內(nèi)的數(shù)據(jù)加工一下，它與我現(xiàn)在展示的方法區(qū)別是一個(gè)在服務(wù)器端、一個(gè)在客戶端實(shí)現(xiàn)拼接div層的innerHtml方法。在服務(wù)器拼接的優(yōu)點(diǎn)是純cs代碼，開(kāi)發(fā)效率高，但是較真地說(shuō)它占用了服務(wù)器資源；在客戶端拼接的辦法的優(yōu)點(diǎn)就是拼接時(shí)不占用服務(wù)器資源，運(yùn)行效率高，但是編寫的時(shí)候效率較低。
      分享：如何使用 jQuery(Ajax)/PHP/MySQL實(shí)現(xiàn)自動(dòng)完成功能
      使用 jQuery(Ajax)/PHP/MySQL實(shí)現(xiàn)自動(dòng)完成功能 一如往常，demo和源碼的zip包在文章最后，慢慢欣賞吧！ 我覺(jué)得我有必要寫這個(gè)教程，因?yàn)樵?jīng)見(jiàn)到的大部分關(guān)于自動(dòng)完成的應(yīng)用程序都只是給你一個(gè)程序源碼包，然后告訴你怎么使用，而不是告訴你它是如何工作的以
      


      

      


      來(lái)源：模板無(wú)憂//所屬分類：AJAX教程/更新時(shí)間：2010-01-09


      


      



      


      



      相關(guān)AJAX教程：