基于Json的Ajax无刷新分页效果实现（一）
看此文章之前请先查阅本人上一篇文章
《类似baidu google分页器效果的代码（修改于 kwklover 同学基础上）》 点击穿越门
上一篇文章中 在 kwklover 同学 的基础上做了些许修正，不过我看着仍然不完善，大侠们可以留言补充！
本篇主要是在上一篇的基础上实现AJAX无刷新分页，本人菜鸟一枚，代码难免有bug。希望高手抓出来，先感谢！
由于我今天刚好要做无刷新分页的效果。所以就直接先上图了！
如图，上部分是分页后取出来的数据。下部分是 分页器的实现（关于分页器的实现请参考 http://www.cnblogs.com/zhouzhaokun/archive/2011/08/24/2151558.html）
我们先来实现页面的分页效果，
1、新建一个 ajax 文件页面 ashx 或者 aspx， 我个人比较喜欢 aspx 。删掉页面上的所有HTML代码。只保留页面声明部分：
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Ajax_GetDataCount.aspx.cs" Inherits="GSSS.HTML.UI.Ajax.Elec_Comment.Ajax_GetDataCount" %>通过上边的代码，相信大家都能看到我新建的文件名 是 Ajax_GetDataCount.aspx .接下来我们看这个页面的 .cs 文件
首先 在 page_load 事件中，我们获取ajax传送过来的参数。我采用 jquery 的 post 方式提交参数，代码如下：
protected void Page_Load(object sender, EventArgs e) { int PageSize = 5;//写死的页面大小。可以通过传参动态实现 int PageCount = 100;//测试用的数据条数（无用） //读取 post 过来的参数值 page 和 pid,pid 是对应的产品ID，本实例为产品评论的无刷新实现 string page = DotNet.Framework.Common.QueryString.F("page"); string pid = DotNet.Framework.Common.QueryString.F("pid"); if (pid != "") { GSSS.HTML.BLL.PromotionZone.ElectronicProducts.T_ElectronicProducts_Comment bll = new GSSS.HTML.BLL.PromotionZone.ElectronicProducts.T_ElectronicProducts_Comment(); //读取pid产品的评论条数 PageCount = bll.GetPagerCount(Convert.ToInt32(pid)); } if (page == "" && pid != "") { ///创建并显示分页器 BuildPager(PageCount, 1, PageSize, Convert.ToInt32(pid)); } if (page != "" && pid != "") { BuildPager(PageCount, Convert.ToInt32(page), PageSize, Convert.ToInt32(pid)); } }
下边是 分页器的实现方法。跟上一篇文章还有所不同（我说过有bug嘛。。）在这里修正之后 还是有些小问题。。
代码如下：
/// <summary>
/// 创建并显示分页器
/// </summary>
/// <param name="totalRecords">总页数</param>
/// <param name="currentPage">当前页码</param>
/// <param name="pageSize">页面大小</param>
private void BuildPager(int totalRecords, int currentPage, int pageSize, int productID)
{
int alter = 4;
int startPage = 1;
int endPage = currentPage + alter;
int totalPages = this.CalculateTotalPages(totalRecords, pageSize);
if (currentPage > alter)
{
startPage = currentPage - alter;
}
if (endPage > totalPages)
{
endPage = totalPages;
}
///分页 页码 a 标签 新增属性 title 为了获取点击的页码
string strTemp = @"<a href='javascript:void(0)' title='{0}'>{1}</a> ";
StringBuilder sb = new StringBuilder();
if (currentPage != startPage)
{
if (currentPage > startPage)
{
sb.Append(string.Format(strTemp, 1, "首页"));
sb.Append(string.Format(strTemp, currentPage - 1, "上一页"));
}
}
for (int i = startPage; i <= endPage; i++)
{
if (currentPage == i)
{
sb.Append("<font color=red>" + i + "</font> ");
}
if (currentPage != i && currentPage > 1)
{
sb.Append(string.Format(strTemp, i, "[" + i + "]"));
}
}
if (currentPage != endPage && totalRecords != 0)
{
if (currentPage != totalPages)
sb.Append(string.Format(strTemp, currentPage + 1, "下一页"));
sb.Append(string.Format(strTemp, totalPages, "尾页"));
}
Response.Write(sb.ToString());
Response.End();
}
/**/
/// <summary>
/// 计算总页数
/// </summary>
/// <param name="totalRecords">总记录数</param>
/// <param name="pageSize">每页记录数</param>
private int CalculateTotalPages(int totalRecords, int pageSize)
{
int totalPagesAvailable;
totalPagesAvailable = totalRecords / pageSize;
//由于C#的整形除法 会把所有余数舍入为0，所以需要判断是否需要加1
if ((totalRecords % pageSize) > 0)
totalPagesAvailable++;
return totalPagesAvailable;
}
这样…ajax 请求页面就完成了。接下来我们要把这个 页面 拼出来的 页码显示在页面上。。当然这里没有用到 json，代码如下:
$.post("/Ajax/Elec_Comment/Ajax_GetDataCount.aspx", { pid: '<%=DotNet.Framework.Common.QueryString.QId("id") %>' }, function(data, status) {
$("#pager").html(data);
alert(data);
BindClick(); //给 a 标签绑定 点击事件
BindCommentList(1);//页面加载默认绑定第一页数据
});
function BindClick() {
$("#pager a").click(
function(e) {
e.preventDefault(); //禁止导向连接
var url = "/Ajax/Elec_Comment/Ajax_GetDataCount.aspx";
var pid = '<%=DotNet.Framework.Common.QueryString.QId("id") %>';
var page = $(this).attr("title");
var func = function(data) {
$("#pager").html(data);
BindCommentList(page); //根据当前页读取数据
BindClick();//这里再调用一次绑定a标签的click事件，如果不调用，页面第一次打开可以分页，以后就捕获不到这个事件了。
}
$.post(url, { pid: pid, page: page }, func);
}
);
}
到这里，只用 jquery 的ajax 方式，我们已经可以在页面上显示 分页页码了。。
有个面试，待会接着写 数据的读取。基于 json 的方式！
