今天看到一個.java哥們寫過的在頁面直接請求數(shù)據(jù)列表的程序代碼。它是實現(xiàn)選中客戶聯(lián)系人后，無刷新的彈出div羅列其它聯(lián)系人列表的功能。忽然想到既然可以請求聯(lián)系人列表，而且無刷新。那么取復雜的數(shù)據(jù)列表呢，后來想到了數(shù)據(jù)分頁。我現(xiàn)在用了自己寫的一個分頁控件。但是效率有時候感覺不是很高，它是以 用戶控件＋存儲過程＋分頁處理類 來實現(xiàn)分頁的。但是無可避免的就碰到了刷新的問題即使分頁很快，但是只要這“刷”的一下總是感覺很不爽。而且還要頁面編譯一遍，還要在服務(wù)端處理ViewState。以及其它的性能損失。既然 .ashx 可以 省略頁面編譯的過程。再把分頁處理類 挪到客戶端，那應(yīng)該是會性能提升不少，還沒有刷新，一定很爽，想到就做。
我定的思路是： .ashx程序中，編寫好取得不同頁碼的程序。在頁面布局好的前提下，留下數(shù)據(jù)區(qū)域 div。然后在頁面請求 .ashx程序生成下一頁的html代碼。覆蓋div.innerHTMl 。
首先是頁面，因為是要實踐思路，所以頁面真是很簡單。引用了jquery.js
復制代碼 代碼如下:
div id="lab">
input id="Button1" type="button" value="初始化數(shù)據(jù)" onclick="Init();" />
div id="Content" style="width: 100%">
/div>
div id="PagePanel" style="margin-left:20px">label id="pageInfo">/label>a href="#" onclick="InitUp()">Last/a>nbsp; nbsp;a href="#" onclick="InitNext()">Next/a>/div>
input type="hidden" value="0" id="currPageIndex" />
/div>
然后編寫.js文件、實現(xiàn)客戶端的分頁控制。已經(jīng)在顯示頁面儲存了當前頁碼信息 一個input type='hidden'>。
引用js文件后，就可以用了，哈哈，很順利。
復制代碼 代碼如下:
// JScript 文件
function Init()
{
$.get("Handler.ashx", function (tablestr) {
document.getElementById('Content').innerHTML=tablestr;
document.getElementById('currPageIndex').value='1';
});
}
function InitNext()
{
var currIndex=document.getElementById('currPageIndex').value;
var nextIndex=Number(currIndex)+1;
$.get("NextHandler.ashx",{index:currIndex},function (tablestr) {
document.getElementById('Content').innerHTML=tablestr;
document.getElementById('pageInfo').innerText="當前第 "+nextIndex+" 頁";
document.getElementById('currPageIndex').value=nextIndex;
});
}
function InitUp()
{
var currIndex=document.getElementById('currPageIndex').value;
var nextIndex=Number(currIndex)-1;
$.get("PreviousHandler.ashx",{index:currIndex},function (tablestr) {
document.getElementById('Content').innerHTML=tablestr;
document.getElementById('pageInfo').innerText="當前第 "+nextIndex+" 頁";
document.getElementById('currPageIndex').value=nextIndex;
});
}
將它引用到顯示頁面
復制代碼 代碼如下:
script type="text/javascript" src="http://www.cnblogs.com/Media/Script/jquery.js">/script>
script src="JScript.js" type="text/javascript">/script>
搞定！
剩下的就是服務(wù)端了，這個就簡單了，咱就是c#代碼出身，直接呼啦呼啦.....
1、第一頁初始化的數(shù)據(jù)。....
復制代碼 代碼如下:
%@ WebHandler Language="C#" Class="Handler" %>
using System;
using System.Web;
using System.Data;
using System.Text;
public class Handler : IHttpHandler {
public void ProcessRequest (HttpContext context) {
context.Response.ContentType = "text/plain";
DataSet ds = HebHX.DBUtility.DbHelperSQL.Query("select top 20 cust_code,cust_name,cust_addr,bank_name,bank_account from customer_info");
StringBuilder tb = new StringBuilder("table class='dateGrid'>tr>th style＝'width:130px'>稅號/th>th style＝'width:150px'>企業(yè)名稱/th>th style＝'width:200px'>企業(yè)地址/th>th style＝'width:150px'>銀行/th>th style＝'width:150px'>銀行賬號/th>tr>");
for (int i = 0; i ds.Tables[0].Rows.Count; i++)
{
tb.Append("tr>");
for (int j = 0; j ds.Tables[0].Columns.Count; j++)
{
tb.Append("td class='Item'>");
tb.Append(ds.Tables[0].Rows[i][j].ToString());
tb.Append("/td>");
}
tb.Append("/tr>");
}
tb.Append("/table>");
context.Response.Write(tb.ToString());
}
public bool IsReusable {
get {
return false;
}
}
}
2、點擊下一頁用到的 .ashx文件。
復制代碼 代碼如下:
%@ WebHandler Language="C#" Class="NextHandler" %>
using System;
using System.Web;
using System.Data;
using System.Text;
public class NextHandler : IHttpHandler {
public void ProcessRequest (HttpContext context) {
context.Response.ContentType = "text/plain";
int pageRows = 20;
int pageIndex = Convert.ToInt32(context.Request.Params["index"]) + 1;
DataSet ds = HebHX.DBUtility.DbHelperSQL.Query("select top " + pageRows.ToString() + " cust_code,cust_name,cust_addr,bank_name,bank_account from customer_info where cust_id> (select max(t.cust_id) from (select top " + (pageRows * pageIndex).ToString() + " cust_id from customer_info order by cust_id) t) order by cust_id");
StringBuilder tb = new StringBuilder("table class='dateGrid'>tr>th style＝'width:130px'>稅號/th>th style＝'width:150px'>企業(yè)名稱/th>th style＝'width:200px'>企業(yè)地址/th>th style＝'width:150px'>銀行/th>th style＝'width:150px'>銀行賬號/th>tr>");
for (int i = 0; i ds.Tables[0].Rows.Count; i++)
{
tb.Append("tr>");
for (int j = 0; j ds.Tables[0].Columns.Count; j++)
{
tb.Append("td class='Item'>");
tb.Append(ds.Tables[0].Rows[i][j].ToString());
tb.Append("/td>");
}
tb.Append("/tr>");
}
tb.Append("/table>");
context.Response.Write(tb.ToString());
}
public bool IsReusable {
get {
return false;
}
}
}
3、點擊前一頁用到的.ashx文件。有思路了這個就更簡單了，直接就是copy了。
復制代碼 代碼如下:
%@ WebHandler Language="C#" Class="UpHandler" %>
using System;
using System.Web;
using System.Data;
using System.Text;
public class UpHandler : IHttpHandler {
public void ProcessRequest (HttpContext context) {
context.Response.ContentType = "text/plain";
int pageRows = 20;
int pageIndex = Convert.ToInt32(context.Request.Params["index"]) - 1;
DataSet ds = HebHX.DBUtility.DbHelperSQL.Query("select top " + pageRows.ToString() + " cust_code,cust_name,cust_addr,bank_name,bank_account from customer_info where cust_id> (select max(t.cust_id) from (select top " + (pageRows * pageIndex).ToString() + " cust_id from customer_info order by cust_id) t) order by cust_id");
StringBuilder tb = new StringBuilder("table class='dateGrid'>tr>th style＝'width:130px'>稅號/th>th style＝'width:150px'>企業(yè)名稱/th>th style＝'width:200px'>企業(yè)地址/th>th style＝'width:150px'>銀行/th>th style＝'width:150px'>銀行賬號/th>tr>");
for (int i = 0; i ds.Tables[0].Rows.Count; i++)
{
tb.Append("tr>");
for (int j = 0; j ds.Tables[0].Columns.Count; j++)
{
tb.Append("td class='Item'>");
tb.Append(ds.Tables[0].Rows[i][j].ToString());
tb.Append("/td>");
}
tb.Append("/tr>");
}
tb.Append("/table>");
context.Response.Write(tb.ToString());
}
public bool IsReusable {
get {
return false;
}
}
}
完成！直接測試..效果果然很不錯，要知道我們的數(shù)據(jù)庫的數(shù)據(jù)量大概在10萬級別以上。..基本上感覺不到什么延時。還無刷新真是爽 啊，我要是用分頁的存儲過程，應(yīng)該還是會有所提升的。
效果如圖、、順便畫了一幅抽象畫。哈哈...順便也欣賞一下吧。
最后還是有點疑惑，.net的ajax 的用法是不是也是這樣呢？..以前用ajax就是用一些服務(wù)端控件，沒有真正實踐過客戶端的用法。但是我一直覺得ajax應(yīng)該和現(xiàn)在我實現(xiàn)的方式大同小異。以后再學習吧..對ajax精通的哥們們可以指教一下，客戶端的ajax的 經(jīng)典、實用的知識。先謝謝了。
您可能感興趣的文章:- asp.net中利用Jquery+Ajax+Json實現(xiàn)無刷新分頁的實例代碼
- JQuery+Ajax無刷新分頁的實例代碼
- JQuery頁面的表格數(shù)據(jù)的增加與分頁的實現(xiàn)
- jQuery客戶端分頁實例代碼
- jquery+json實現(xiàn)數(shù)據(jù)列表分頁示例代碼
- jQuery 無刷新分頁實例代碼
- jQuery教程 $()包裝函數(shù)來實現(xiàn)數(shù)組元素分頁效果
- 使用PHP+JQuery+Ajax分頁的實現(xiàn)
- jquery分頁插件AmSetPager(自寫)
- jQuery getJSON()+.ashx 實現(xiàn)分頁(改進版)
- jQuery Pagination Ajax分頁插件(分頁切換時無刷新與延遲)中文翻譯版
- asp.net jquery無刷新分頁插件(jquery.pagination.js)
- 分享精心挑選的12款優(yōu)秀jQuery Ajax分頁插件和教程
- jquery.pagination.js 無刷新分頁實現(xiàn)步驟分享
- jquery.pagination +JSON 動態(tài)無刷新分頁實現(xiàn)代碼
- 基于jquery封裝的一個js分頁
- jQuery中jqGrid分頁實現(xiàn)代碼
- jquery分頁對象使用示例
