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


Posted in Javascript onFebruary 14, 2011

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

<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 顾客的名字, 文本框中输入的内容 
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> 
<input type="text" id="txtSearch" /> 
<input type="button" id="btnSearch" value="Search" /> 
</div> 
<div id="divSearchResult"> 
</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 
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

具体的效果,大家可以把上述的代码响应的复制到VS中和数据库中,进行演示。
这个版本其实很多的功能点都是没有考虑到的,仅仅是个示例,大家可以在自己的实际项目中修改以上的功能来满足自己的需求。
Javascript 相关文章推荐
精通JavaScript 纠正 cleanWhitespace函数
Mar 11 Javascript
再次分享18个非常棒的jQuery表格插件
Apr 10 Javascript
Javascript设计模式之观察者模式的多个实现版本实例
Mar 03 Javascript
JS实现的N多简单无缝滚动代码(包含图文效果)
Nov 06 Javascript
使用Function.apply()的参数数组化来提高 JavaScript程序性能的技巧
Dec 23 Javascript
整理AngularJS框架使用过程当中的一些性能优化要点
Mar 05 Javascript
JS实现漂亮的时间选择框效果
Aug 20 Javascript
Angular2 (RC5) 路由与导航详解
Sep 21 Javascript
js实现延迟加载的几种方法详解
Jan 19 Javascript
在vue中使用axios实现post方式获取二进制流下载文件(实例代码)
Dec 16 Javascript
jquery选择器和属性对象的操作实例分析
Jan 10 jQuery
详解Vue Cli浏览器兼容性实践
Jun 08 Javascript
基于jquery的图片的切换(以数字的形式)
Feb 14 #Javascript
jquery isType() 类型判断代码
Feb 14 #Javascript
jquery isEmptyObject判断是否为空对象的函数
Feb 14 #Javascript
jquery each()源代码
Feb 14 #Javascript
jquery trim() 功能源代码
Feb 14 #Javascript
jquery uaMatch源代码
Feb 14 #Javascript
AJAX 网页保留浏览器前进后退等功能
Feb 12 #Javascript
You might like
教你如何把一篇文章按要求分段
2006/10/09 PHP
使用swoole扩展php websocket示例
2014/02/13 PHP
php设计模式之简单工厂模式详解
2014/09/04 PHP
PHP间隔一段时间执行代码的方法
2014/12/02 PHP
javascript  Error 对象 错误处理
2008/05/18 Javascript
JavaScript的public、private和privileged模式
2009/12/28 Javascript
爆炸式的JS圆形浮动菜单特效代码
2010/03/03 Javascript
javascript中字符串的定义示例代码
2013/12/19 Javascript
json字符串之间的相互转换示例代码
2014/08/21 Javascript
让JavaScript的Alert弹出框失效的方法禁止弹出警告框
2014/09/03 Javascript
javascript执行环境及作用域详解
2016/05/05 Javascript
js判断登陆用户名及密码是否为空的简单实例
2016/05/16 Javascript
Javascript OOP之面向对象
2016/07/31 Javascript
vue2实现移动端上传、预览、压缩图片解决拍照旋转问题
2017/04/13 Javascript
微信小程序访问node.js接口服务器搭建教程
2017/04/25 Javascript
Vue兼容ie9的问题全面解决方案
2018/06/19 Javascript
微信小程序swiper实现滑动放大缩小效果
2018/11/15 Javascript
layui 对table中的数据进行转义的实例
2019/09/12 Javascript
实例讲解JavaScript 计时事件
2020/07/04 Javascript
微信小程序拖拽排序列表的示例代码
2020/07/08 Javascript
vue中可编辑树状表格的实现代码
2020/10/31 Javascript
python实现查找excel里某一列重复数据并且剔除后打印的方法
2015/05/26 Python
python简单实现计算过期时间的方法
2015/06/09 Python
使用Python设计一个代码统计工具
2018/04/04 Python
Python 调用PIL库失败的解决方法
2019/01/08 Python
python实现简易淘宝购物
2019/11/22 Python
如何使用Python处理HDF格式数据及可视化问题
2020/06/24 Python
Html5与App的通讯方式详解
2019/10/24 HTML / CSS
美国最大的电子宠物训练产品制造商:PetSafe
2018/10/12 全球购物
几道Web/Ajax的面试题
2016/11/05 面试题
2014道德模范事迹材料
2014/02/16 职场文书
小学绿色学校申报材料
2014/08/23 职场文书
纪律教育学习月活动总结
2014/08/27 职场文书
店铺转让协议书
2014/12/02 职场文书
《曾国藩家书》读后感——读家书,立家风
2019/08/21 职场文书
使用Django实现商城验证码模块的方法
2021/06/01 Python