Asp.net中怎么利用jquery和.ashx文件實現(xiàn)分頁

本篇文章給大家分享的是有關(guān)Asp.net中怎么利用jquery和.ashx文件實現(xiàn)分頁，小編覺得挺實用的，因此分享給大家學(xué)習(xí)，希望大家閱讀完這篇文章后可以有所收獲，話不多說，跟著小編一起來看看吧。

首先是頁面，因為是要實踐思路，所以頁面真是很簡單。引用了jquery.js

復(fù)制代碼 

<div id="lab">
<input id="Button1" type="button" value="初始化數(shù)據(jù)" onclick="Init();" />
<div id="Content" >
</div>
<div id="PagePanel" ><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)在顯示頁面儲存了當(dāng)前頁碼信息 一個<input type='hidden'>。
引用js文件后，就可以用了，哈哈，很順利。

復(fù)制代碼 代碼如下:

// 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="當(dāng)前第 "+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="當(dāng)前第 "+nextIndex+" 頁";
document.getElementById('currPageIndex').value=nextIndex;
});
}

將它引用到顯示頁面

復(fù)制代碼 代碼如下:

<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ù)。....

復(fù)制代碼 代碼如下:

<%@ 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文件。

復(fù)制代碼 代碼如下:

<%@ 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了。

復(fù)制代碼 代碼如下:

<%@ 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)該還是會有所提升的。
效果如圖、、順便畫了一幅抽象畫。哈哈...順便也欣賞一下吧。

以上就是Asp.net中怎么利用jquery和.ashx文件實現(xiàn)分頁，小編相信有部分知識點可能是我們?nèi)粘９ぷ鲿姷交蛴玫降?。希望你能通過這篇文章學(xué)到更多知識。更多詳情敬請關(guān)注億速云行業(yè)資訊頻道。