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 相关文章推荐
犀利的js 函数集合
Jun 11 Javascript
jQuery实现单击按钮遮罩弹出对话框(仿天猫的删除对话框)
Apr 10 Javascript
如何防止回车(enter)键提交表单
May 11 Javascript
jquery小火箭返回顶部代码分享
Aug 19 Javascript
jquery过滤特殊字符',防sql注入的实现方法
Aug 17 Javascript
Three.js 再探 - 写一个微信跳一跳极简版游戏
Jan 04 Javascript
vue 2.x 中axios 封装的get 和post方法
Feb 28 Javascript
JavaScript实现小球沿正弦曲线运动
Sep 07 Javascript
Node.js console控制台简单用法分析
Jan 04 Javascript
vue中使用GraphQL的实例代码
Nov 04 Javascript
vue+element-ui表格封装tag标签使用插槽
Jun 18 Javascript
vue脚手架项目创建步骤详解
Mar 02 Vue.js
基于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
追忆往昔!浅谈收音机的百年发展历史
2021/03/01 无线电
别人整理的服务器变量:$_SERVER
2006/10/20 PHP
PHP 模拟$_PUT实现代码
2010/03/15 PHP
php与java通过socket通信的实现代码
2013/10/21 PHP
php中mysql操作buffer用法详解
2015/03/19 PHP
php实现在限定区域里自动调整字体大小的类实例
2015/04/02 PHP
thinkPHP利用ajax异步上传图片并显示、删除的示例
2018/09/26 PHP
PHP使用PhpSpreadsheet操作Excel实例详解
2020/03/26 PHP
js图片闪动特效可以控制间隔时间如几分钟闪动一下
2014/08/12 Javascript
JS代码防止SQL注入的方法(超简单)
2016/04/12 Javascript
js实现简单的选项卡效果
2017/02/23 Javascript
详解Vue2.X的路由管理记录之 钩子函数(切割流水线)
2017/05/02 Javascript
实例详解JavaScript中setTimeout函数的执行顺序
2017/07/12 Javascript
Vue.JS实现垂直方向展开、收缩不定高度模块的JS组件
2018/06/19 Javascript
vue component 中引入less文件报错 Module build failed
2019/04/17 Javascript
vue2.0 获取从http接口中获取数据,组件开发,路由配置方式
2019/11/04 Javascript
js屏蔽F12审查元素,禁止修改页面代码等实现代码
2020/10/02 Javascript
[58:54]EG vs RNG 2019国际邀请赛小组赛 BO2 第一场 8.16
2019/08/18 DOTA
玩转python selenium鼠标键盘操作(ActionChains)
2020/04/12 Python
Python爬取qq music中的音乐url及批量下载
2017/03/23 Python
Python实现字典的遍历与排序功能示例
2017/12/23 Python
python实现SOM算法
2018/02/23 Python
python实现简单神经网络算法
2018/03/10 Python
python3+PyQt5实现柱状图
2018/04/24 Python
将python安装信息加入注册表的示例
2019/11/20 Python
python代码中怎么换行
2020/06/17 Python
2014年巴西世界杯口号
2014/06/05 职场文书
酒店爱岗敬业演讲稿
2014/09/02 职场文书
群众路线专项整治方案
2014/10/27 职场文书
2014年物业公司工作总结
2014/11/22 职场文书
入党函调证明材料
2015/06/19 职场文书
教师节随笔
2015/08/15 职场文书
小学三年级语文教学反思
2016/03/03 职场文书
2016年暑期社会实践活动总结报告
2016/04/06 职场文书
使用python绘制横竖条形图
2022/04/21 Python
利用Python实时获取steam特惠游戏数据
2022/06/25 Python