快捷導(dǎo)航

AJAX分頁的代碼(后臺asp.net)

更新時間：2011年02月14日 21:01:58 作者：

查詢功能是開發(fā)中最重要的一個功能，大量數(shù)據(jù)的顯示，我們用的最多的就是分頁。

在ASP.NET 中有很多數(shù)據(jù)展現(xiàn)的控件，比如用的最多的GridView，它同時也自帶了分頁的功能。但是我們知道用GridView來顯示數(shù)據(jù)，如果沒有禁用ViewState，頁面的大小會是非常的大的。而且平時我們點擊首頁，下一頁，上一頁，尾頁這些功能都是會引起頁面回發(fā)的，也就是需要完全跟服務(wù)器進行交互，來回響應(yīng)的時間，傳輸?shù)臄?shù)據(jù)量都是很大的。AJAX的分頁可以很好的解決這些問題。
開發(fā)的壞境是：jQuery AJAX+Northwind。
具體的步驟：
SearchCustomer.aspx:

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

 
<script src="Scripts/jquery-1.4.1.js" type="text/javascript"></script> 
<script type="text/javascript"> 
var pageIndex = 0; 
var pageSize = 10; 
$(function () { 
$("#btnSearch").click(function () { 
/* 
name 顧客的名字, 文本框中輸入的內(nèi)容 
0 表示的是第1頁 
10 每頁的大小 
*/ 
var name = $("#txtSearch").val(); 
pageIndex = 0; 
AjaxGetData(name, pageIndex, pageSize); 
}); 
}); 
function AjaxGetData(name, index, size) { 
$.ajax({ 
url: "jQueryPaging.aspx", 
type: "Get", 
data: "Name=" + name + "&PageIndex=" + index + "&PageSize=" + size, 
dataType: "json", 
success: function (data) { 
var htmlStr = ""; 
htmlStr += "<table>" 
htmlStr += "<thead>" 
htmlStr += "<tr><td>CustomerID</td><td>CompanyName</td><td>ContactName</td><td>ContactTitle</td><td>Address</td><td>City</td></tr>" 
htmlStr += "</thead>"; 
htmlStr += "<tbody>" 
for (var i = 0; i < data.Customers.length; i++) { 
htmlStr += "<tr>"; 
htmlStr += "<td>" + data.Customers[i].CustomerID + "</td>" 
+ "<td>" + data.Customers[i].CompanyName + "</td>" 
+ "<td>" + data.Customers[i].ContactName + "</td>" 
+ "<td>" + data.Customers[i].ContactTitle + "</td>" 
+ "<td>" + data.Customers[i].Address + "</td>" 
+ "<td>" + data.Customers[i].City + "</td>" 
htmlStr += "</tr>"; 
} 
htmlStr += "</tbody>"; 
htmlStr += "<tfoot>"; 
htmlStr += "<tr>"; 
htmlStr += "<td colspan='6'>"; 
htmlStr += "<span>共有記錄" + data.Count + ";共<span id='count'>" + (data.Count % 10 == 0 ? parseInt(data.Count / 10) : parseInt(data.Count / 10 + 1)) + "</span>頁" + "</span>"; 
htmlStr += "<a href='javascript:void' onclick='GoToFirstPage()' id='aFirstPage' >首 頁</a>&nbsp;&nbsp; "; 
htmlStr += "<a href='javascript:void' onclick='GoToPrePage()' id='aPrePage' >前一頁</a>&nbsp;&nbsp; "; 
htmlStr += "<a href='javascript:void' onclick='GoToNextPage()' id='aNextPage'>后一頁</a>&nbsp;&nbsp; "; 
htmlStr += "<a href='javascript:void' onclick='GoToEndPage()' id='aEndPage' >尾 頁</a>&nbsp;&nbsp; "; 
htmlStr += "<input type='text' /><input type='button' value='跳轉(zhuǎn)' onclick='GoToAppointPage(this)' /> "; 
htmlStr += "</td>"; 
htmlStr += "</tr>"; 
htmlStr += "</tfoot>"; 
htmlStr += "</table>"; 
$("#divSearchResult").html(htmlStr); 
}, 
error: function (XMLHttpRequest, textStatus, errorThrown) { 
alert(XMLHttpRequest); 
alert(textStatus); 
alert(errorThrown); 
} 
}); 
} 
//首頁 
function GoToFirstPage() { 
pageIndex = 0; 
AjaxGetData($("#txtSearch").val(), pageIndex, pageSize); 
} 
//前一頁 
function GoToPrePage() { 
pageIndex -= 1; 
pageIndex = pageIndex >= 0 ? pageIndex : 0; 
AjaxGetData($("#txtSearch").val(), pageIndex, pageSize); 
} 
//后一頁 
function GoToNextPage() { 
if (pageIndex + 1 < parseInt($("#count").text())) { 
pageIndex += 1; 
} 
AjaxGetData($("#txtSearch").val(), pageIndex, pageSize); 
} 
//尾頁 
function GoToEndPage() { 
pageIndex = parseInt($("#count").text()) - 1; 
AjaxGetData($("#txtSearch").val(), pageIndex, pageSize); 
} 
//跳轉(zhuǎn) 
function GoToAppointPage(e) { 
var page = $(e).prev().val(); 
if (isNaN(page)) { 
alert("請輸入數(shù)字!"); 
} 
else { 
var tempPageIndex = pageIndex; 
pageIndex = parseInt($(e).prev().val())-1; 
if (pageIndex < 0 || pageIndex >= parseInt($("#count").text())) { 
pageIndex = tempPageIndex; 
alert("請輸入有效的頁面范圍!"); 
} 
else { 
AjaxGetData($("#txtSearch").val(), pageIndex, pageSize); 
} 
} 
} 
</script> 

數(shù)據(jù)的傳輸用的JSON格式。大家知道JSON是輕量級別的數(shù)據(jù)傳輸。前臺的展現(xiàn)時用的table。這樣生成的HTML代碼很簡潔。
HTML如下：

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

 
<div> 
<input type="text" id="txtSearch" /> 
<input type="button" id="btnSearch" value="Search" /> 
</div> 
<div id="divSearchResult"> 
</div> 

jQueryPaging.aspx頁面的CS代碼如下：

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

 
public partial class jQueryPaging : System.Web.UI.Page 
{ 
protected void Page_Load(object sender, EventArgs e) 
{ 
Int32 pageIndex=Int32.MinValue; 
Int32 pageSize=Int32.MinValue; 
String name=String.Empty; 
JavaScriptSerializer jss=new JavaScriptSerializer(); 
if(Request["Name"]!=null) 
{ 
name=Request["Name"].ToString(); 
if (Request["PageIndex"] != null) 
{ 
pageIndex = Int32.Parse(Request["PageIndex"].ToString()); 
pageSize = Request["PageSize"] != null ? Int32.Parse(Request["PageSize"].ToString()) : 10; 
IList<Customer> customersLists = new List<Customer>(); 
Customer c = null; 
DataSet ds= LookDataFromDB(name,pageIndex,pageSize); 
foreach (DataRow row in ds.Tables[0].Rows) 
{ 
c = new Customer(); 
c.CustomerID = row["CustomerID"].ToString(); 
c.CompanyName = row["CompanyName"].ToString(); 
c.ContactName = row["ContactName"].ToString(); 
c.ContactTitle = row["ContactTitle"].ToString(); 
c.Address = row["Address"].ToString(); 
c.City = row["City"].ToString(); 
customersLists.Add(c); 
} 
if (customersLists.Count>0) 
{ 
Response.Write("{\"Count\":"+ds.Tables[1].Rows[0][0]+",\"Customers\":"+jss.Serialize(customersLists)+"}"); 
Response.End(); 
} 
} 
} 
} 
private DataSet LookDataFromDB(string name, int pageIndex, int pageSize) 
{ 
SqlConnection conn = new SqlConnection(ConfigurationManager.ConnectionStrings["NorthwindConnectionString"].ConnectionString); 
conn.Open(); 
SqlCommand cmd = new SqlCommand(); 
cmd.Connection = conn; 
cmd.CommandType = CommandType.StoredProcedure; 
cmd.CommandText = "SearchCustomerByName"; 
cmd.Parameters.Add(new SqlParameter("@name",name)); 
cmd.Parameters.Add(new SqlParameter("@pageIndex",pageIndex)); 
cmd.Parameters.Add(new SqlParameter("@pageSize", pageSize)); 
SqlDataAdapter dataAdapter = new SqlDataAdapter(cmd); 
DataSet ds = new DataSet(); 
try 
{ 
dataAdapter.Fill(ds); 
} 
catch (Exception) 
{ 
} 
finally 
{ 
if (dataAdapter != null) 
{ 
dataAdapter.Dispose(); 
} 
if (cmd != null) 
{ 
cmd.Dispose(); 
} 
if (conn != null) 
{ 
conn.Dispose(); 
} 
} 
return ds; 
} 
} 

還有我們在CS中定義的Model類：

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

 
public class Customer 
{ 
public String CustomerID { get; set; } 
public String CompanyName { get; set; } 
public String ContactName { get;set;} 
public String ContactTitle { get; set; } 
public String Address { get; set; } 
public String City { get; set; } 
} 
SearchCustomerByName 存儲過程的代碼如下： 
SET ANSI_NULLS ON 
GO 
SET QUOTED_IDENTIFIER ON 
GO 
Create PROCEDURE SearchCustomerByName 
@name nvarchar(30), 
@pageIndex int, 
@pageSize int 
AS 
BEGIN 
SET NOCOUNT ON; 
select t.CustomerID,t.CompanyName,t.ContactName,t.ContactTitle,t.Address,t.City from 
( 
select Row_Number() over (order by CustomerID) AS RowNum,* from Customers where ContactName like '%'+@name+'%' 
) t 
where t.RowNum between @pageIndex*10+1 and (@pageIndex+1)*10 
select count(*) from Customers 
where ContactName like '%'+@name+'%' 
END 
GO 