利用ajax完成无刷新分页的功能
利用ajax完成无刷新分页的功能 aspx+ashx 动软三层 分页存储过程
首先写出分页最好用一下存储过程
--存储过程 create proc usp_GetPagedPhotos @pageIndex int, @pageSize int, @pageCount int output as declare @n int select @n=COUNT(*) from Photos set @pageCount = CEILING(@n*1.0/@pageSize) --ceiling 天花板 把浮点型以小数点分割左边整数加一取整 2.1→3 @n*1.0转换成浮点型除以一个整数就可以是一个浮点型数了 select * from (select *,ROW_NUMBER() over(order by ptime desc) as num from Photos) as t where num between (@pageIndex-1)*@pageSize + 1 and @pageIndex*@pageSize order by PTime desc
--这样就可以通过输入第几页，一页有多少条数据可以得出要显示的数据以及返回一共有多少页
DAL层（调用动软代码生成器的dbsqlhelper执行存储过程）
public DataSet GetPagedData(int pageIndex, int pageSize, out int pageCount)
{
SqlParameter[] param = {
new SqlParameter("@pageIndex",SqlDbType.Int),
new SqlParameter("@pageSize",SqlDbType.Int),
new SqlParameter("@pageCount",SqlDbType.Int)
};
//设置输入参数
param[0].Value = pageIndex;
param[1].Value = pageSize;
//设置输出参数
param[2].Direction = ParameterDirection.Output;
DataSet ds = Maticsoft.DBUtility.DbHelperSQL.RunProcedure("usp_GetPagedPhotos", param, "photos");
//执行完存储过程，获取输出参数的值
pageCount = Convert.ToInt32(param[2].Value);
return ds;
}
BLL 层（ 转成泛型集合，调用动软生成的 datatable to list方法）
public List<Photos> GetPagedData(int pageIndex, int pageSize, out int pageCount)
{
DataSet ds = dal.GetPagedData(pageIndex, pageSize, out pageCount);
return DataTableToList(ds.Tables[0]);
}
个人比较喜欢先写ashx页面 ，想：ajax用json数据比较好 而且c#里有专门处理list to json的一个良好的机制方法 Serialize （内部原理就是object to string,序列化）
PhotosBLL bll = new PhotosBLL();
//准备传过来的参数
int index=int.Parse(context.Request.QueryString["index"]);
int pagesize=int.Parse(context.Request.QueryString["page"]);
//准备输出的总页数
int count;
List<Photos> list = bll.GetPagedData(index, pagesize, out count);
JavaScriptSerializer jss = new JavaScriptSerializer();
//将泛型集合转换成json对象
string json = jss.Serialize(list);
//[{"key":value,"key":value},{"key":value,"key":value}]
//此时的json对象里没有总页数，所以要把总页数拼接到json对象中进行传递,拼接的时候要注意json对象的格式
json = json.Replace("]",",{\"count\":"+count+"}]");
//[{"key":value,"key":value},{"key":value,"key":value},{"count":4}]
context.Response.Write(json);
现在开始写jquery ajax
html结构
<div id="left"> <img src="../images/1.gif" /></div> <div id="right"> <div id="p"> </div> <br /> <div id="page"> <ul> <li><a href="#" id="firstpage">首页</a></li> <li><a href="#" id="beforepage">上一页</a></li> <li><a href="#" id="nextpage">下一页</a></li> <li id="pagelist"><a href="#">1</a><a href="#">2</a><a href="#">3</a></li> <li>当前页： <span id="pages"></span> </li> <li><a href="#" id="lastpage">尾页</a></li> </ul> </div> </div> <div class="coverholder"> <input type="text" /> <input type="button" id="btn1" value="cancel" /> </div>
重量级人物来了jquery ajax
第一次加载页面，写成方法，传入index（第几页） page(一页几条数据)
function loadps(index, page) { //$.getJSON ,$.get ,$.post 是对$.ajax 的一个封装 这里传过来的是json数据源 用$.getJSON 最好 $.getJSON("GetPagedAjax.ashx?" + Math.random(), { "index": index, "page": page }, function (json) { //获取页数，为全局变量赋值 pagesize = json[json.length - 1].count; //动态生成表格 var $tb = $("<table id='tbPhotos'></table>"); $("#p").append($tb); var $th = $("<tr><th>序号</th><th>标题</th><th>图片</th><th>点击次数</th><th>支持</th><th>反对</th><th>时间</th><th>操作</th></tr>"); $tb.append($th); //过滤掉最后一个非数据源 json.length - 1 for (var i = 0; i < json.length - 1; i++) { var $tr = $("<tr></tr>"); $tb.append($tr); //第一个td var $td = $("<td>" + (i + 1) + "</td>"); $tr.append($td); // $td = $("<td><a href='04-PhotoDetails.aspx?pid=" + json[i].PId + "'>" + json[i].PTitle + "</a></td>"); $tr.append($td); // $td = $("<td><img src='../images/" + json[i].PUrl + "' width='150px'/></td>"); $tr.append($td); // $td = $("<td>" + json[i].PClicks + "</td>"); $tr.append($td); $td = $("<td><a pid='" + json[i].PId + "' href='#'><img src='gif/85.gif' /><span>" + json[i].PUp + "</span></a></td>"); $tr.append($td); $td = $("<td><a pid='" + json[i].PId + "' href='#'><img src='gif/86.gif' /><span>" + json[i].PDown + "</span></a></td>"); $tr.append($td); //注意此时的时间转换，这里我写了一个方法(ChangeDateFormat(time))在外面，下面会写出来 $td = $("<td>" + ChangeDateFormat(json[i].PTime) + "</td>"); $tr.append($td); // $td = $("<td>编辑 删除</td>"); $tr.append($td); //显示当前页面 $("#pages").text(index + "/" + pagesize); } }); }
补充方法（小问题，小麻烦）ChangeDateFormat(time)
//转换正确的时间格式 function ChangeDateFormat(cellval) { var date = new Date(parseInt(cellval.replace("/Date(", "").replace(")/", ""), 10)); var month = date.getMonth() + 1 < 10 ? "0" + (date.getMonth() + 1) : date.getMonth() + 1; var currentDate = date.getDate() < 10 ? "0" + date.getDate() : date.getDate(); return date.getFullYear() + "-" + month + "-" + currentDate; }
动态生成表格的拼接过程很无聊……
在页面加载的时候加载该方法
总的代码结构如下：
<script type="text/javascript">
//定义三个全局变量 index page pagesize, 并赋初值，注意:尽量少使用全局变量，全局变量的作用域在整个JS文件里。
//特别是在引用其它外部JS的时候，如果外部JS里有申明了这个变量了，就会出现冲突。本次为了方便理解才使用的。jquery里一般是使用匿名方法所以就没有考虑。
//定义全局变量是为了点击下一页的时候可以记录当前的index
//index 第几页， page 每页几条 pagesize 一共有几页。
var index = 1;
var page = 4;
//首次加载页面
loadps();
//页面总数 ,首次加载的时候就为 pagesize 赋值了
var pagesize = 0;
function loadps()｛……｝
$(function ()｛……｝); //写上一页，下一页等点击事件
</script>
现在写相关事件
$(function () { //首页 $('#firstpage').click(function () { if (index != 1) { index = 1; loadps(); } return false; }); //尾页 $('#lastpage').click(function () { if (index != pagesize) { index = pagesize; loadps(); } return false; }); //上一页 $("#beforepage").click(function () { if (index != 1) { index = index - 1; loadps(); } return false; }); //下一页 $("#nextpage").click(function () { if (index < pagesize) { index = index + 1; loadps(); } return false; }); })
总结：感觉上面原来ajax就这点东西，不过就是拿数据，拼接表格，显示。重点就只有 $.getJSON 方法的使用、处理JSON数据和用jquery拼接表格 不过小细节也应该注意。
jquery 里的ajax方法，它把js里的创建xmlhttprequest对象的过程大大的简化了。
最重要的最简单的是利用json数据，json简化对字符串的处理，它是以对象的方式进行传递的，而C#也对它作以迎合，我们何简而不为呢？
