AJAX分页的代码(后台asp.net)

　　在ASP.NET 中有很多数据展现的控件，比如用的最多的GridView，它同时也自带了分页的功能。但是我们知道用GridView来显示数据，如果没有禁用ViewState，页面的大小会是非常的大的。而且平时我们点击首页，下一页，上一页，尾页这些功能都是会引起页面回发的，也就是需要完全跟服务器进行交互，来回响应的时间，传输的数据量都是很大的。AJAX的分页可以很好的解决这些问题。

　　开发的坏境是：jQuery AJAX+Northwind。

　　具体的步骤：

　　SearchCustomer.aspx:

复制代码代码如下:

　　var pageIndex = 0;

　　var pageSize = 10;

　　$(function () {

　　$("#btnSearch").click(function () {

　　name 顾客的名字, 文本框中输入的内容

　　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> ";

　　htmlStr += "<a href='javascript:void' onclick='GoToPrePage()' id='aPrePage' >前一页</a> ";

　　htmlStr += "<a href='javascript:void' onclick='GoToNextPage()' id='aNextPage'>后一页</a> ";

　　htmlStr += "<a href='javascript:void' onclick='GoToEndPage()' id='aEndPage' >尾页</a> ";

　　htmlStr += "<input type='text' /><input type='button' value='跳转' 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);

　　}

　　//跳转

　　function GoToAppointPage(e) {

　　var page = $(e).prev().val();

　　if (isNaN(page)) {

　　alert("请输入数字!");

　　}

　　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>

　　数据的传输用的JSON格式。大家知道JSON是轻量级别的数据传输。前台的展现时用的table。这样生成的HTML代码很简洁。

　　HTML如下：

复制代码代码如下:

　　<div>

　　</div>

　　</div>

　　jQueryPaging.aspx页面的CS代码如下：

复制代码代码如下:

　　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类：

复制代码代码如下:

　　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

　　SET QUOTED_IDENTIFIER ON

　　Create PROCEDURE SearchCustomerByName

　　@name nvarchar(30),

　　@pageIndex int,

　　@pageSize int

　　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

　　具体的效果，大家可以把上述的代码响应的复制到VS中和数据库中，进行演示。

　　这个版本其实很多的功能点都是没有考虑到的，仅仅是个示例，大家可以在自己的实际项目中修改以上的功能来满足自己的需求。

教程首页更多教程