您的位置:首页 > Web前端 > JQuery

jquery+json处理分页的一个简单例子。

2010-11-17 09:05 756 查看
jquery+json处理分页的一个简单例子。

处理类:

C# code
#region GetJsonData
/// <summary>
/// 得到JSON数据
/// </summary>
/// <param name="ds">dataset</param>
/// <param name="KeyFileds">查找的字段,例: id,name,content</param>
/// <returns></returns>
public static string GetJsonData(DataSet ds,string KeyFileds)
{
StringBuilder html = new StringBuilder();
string[] AList;
AList = KeyFileds.Split(',');
html.Append("[");
for (int i = 0; i < ds.Tables[0].Rows.Count; i++)
{
html.Append("{");
int j = 0;
foreach (string str in AList)
{
html.Append("_"+ j++ +":/"" + ds.Tables[0].Rows[i][str].ToString() + "/",");
}
html.Remove(html.Length - 1, 1);
html.Append("},");
}
html.Remove(html.Length - 1, 1);
html.Append("]");
return html.ToString();
}
#endregion

#region 分页样式 1 2 3 4 5 6 7 8 ...
/// <summary>
/// 分页样式 1 2 3 4 5 6 7 8 ...
/// </summary>
/// <param name="Count"></param>
/// <returns></returns>
public static string GetPager(JsonModel JM)
{
StringBuilder html = new StringBuilder();
html.Append("<div class='page_span'>");
html.Append("<a href='javascript:Content(1)'>首页</a>");
//计算总页数
if (JM.Count % JM.PageIndexCount == 0)
JM.PageCount = JM.Count / JM.PageIndexCount;
else
JM.PageCount = JM.Count / JM.PageIndexCount + 1;

//计算开始页-结束页
if (JM.CurrentPageIndex <= JM.PageCount)
{
if (JM.CurrentPageIndex / JM.ExtPage >= 1 && JM.CurrentPageIndex <= JM.PageCount)
{
int extPage = JM.CurrentPageIndex / JM.ExtPage;
JM.StartPage = extPage * JM.ExtPage - 1;
JM.EndPage = JM.StartPage + JM.ExtPage+1;
}
else
{
JM.EndPage = JM.StartPage + JM.ExtPage+1;
}
}
if (JM.EndPage > JM.PageCount)
JM.EndPage = JM.PageCount;
if (JM.StartPage < 1)
JM.StartPage = 1;
for (int i = JM.StartPage; i <= JM.EndPage; i++)
{
if (i == JM.CurrentPageIndex)
{
html.Append("<a href='javascript:Content(" + i + ")'>");
html.Append("<font color=red >" + i + "</font>");
html.Append("</a>");
}
else
{

html.Append("<a href='javascript:Content(" + i + ")'>");
html.Append(i);
html.Append("</a>");
}

}
html.Append("<a href='javascript:Content(" + JM.PageCount + ")'>末页</a>");
html.Append("</div>");
return html.ToString();
}
#endregion

#region 分页样式 上一页 下一页
/// <summary>
///
/// </summary>
/// <param name="JM">JM.CurrentPageIndex 当前页,JM.PageCount总页</param>
/// <returns></returns>
public static string GetSmiplePager(JsonModel JM)
{
StringBuilder html = new StringBuilder();

//计算总页数
if (JM.Count % JM.PageIndexCount == 0)
JM.PageCount = JM.Count / JM.PageIndexCount;
else
JM.PageCount = JM.Count / JM.PageIndexCount + 1;

html.Append("<div class='page_span'>");
html.Append("<a href='javascript:Content(1)'>首页</a>");
if (JM.CurrentPageIndex > 1)
{
html.Append("<a href='javascript:Content(" + (JM.CurrentPageIndex - 1) + ")'>上一页</a>");
}
if (JM.CurrentPageIndex < JM.PageCount)
{
html.Append("<a href='javascript:Content(" + (JM.CurrentPageIndex + 1) + ")'>下一页</a>");
}
html.Append("<a href='javascript:Content(" + JM.PageCount + ")'>末页</a>");

//搜索框
html.Append(" <input id='t_page' style='width:30px;border:1px solid #acacac' class='btn' /> <input type='button' value='GO' onclick='if($(/"#t_page/").val()==/"/")alert(/"请输入页码/"); else if($(/"#t_page/").val()>" + JM.PageCount + "||$(/"#t_page/").val()==0){alert(/"请输入正确的页码!/")}else{Content($(/"#t_page/").val())}'>");
html.Append("</div>");
return html.ToString();
}
#endregion


ashx

C# code
/// <summary>
///
/// </summary>
/// <param name="CurrentPageIndex"></param>
public void GetContent(int CurrentPageIndex)
{
DataSet ds = SqlHelper.ReturnDataSet("select * from stores", 5, CurrentPageIndex, null);
HttpContext.Current.Response.Write(JSON.GetJsonData(ds, "stor_id,stor_name"));
}
/// <summary>
/// 分页样式 1 2 3 4 5 6 7 8 ...
/// </summary>
public void GetPager(int CurrentPageIndex)
{
JsonModel jm = new JsonModel();
jm.StartPage = 1;
jm.EndPage = 1;
jm.PageIndexCount = 10;
jm.ExtPage = 10;
jm.Count= int.Parse(SqlHelper.ExecuteScalar("select count(*) from stores").ToString());
jm.CurrentPageIndex = CurrentPageIndex;
HttpContext.Current.Response.Write(JSON.GetPager(jm));

}
///<summary>
///分页样式 首页 上一页 下一页 尾页 [ ]搜索
///</summary>
public void GetSmiplePager(int CurrentPageIndex)
{
JsonModel jm = new JsonModel();
jm.PageIndexCount = 10;
jm.CurrentPageIndex = CurrentPageIndex;
jm.Count = int.Parse(SqlHelper.ExecuteScalar("select count(*) from stores").ToString());
HttpContext.Current.Response.Write(JSON.GetSmiplePager(jm));

}


页面:

HTML code
<form id="form1" runat="server">

<script type="text/javascript" language="javascript">
var PageIndex=1;
//页码
getPage(PageIndex);
function getPage(page)
{
$.ajax({
type:"GET",
url:"handler2.ashx?page="+page+"&t=2",
cache:false,
success:function(msg)
{
$("#pageindex").html(page);
$("#count").html(msg);
}
})
}

Content(PageIndex);//第一次显示内容

//内容
function Content(page)
{
//$("#content").html("loadding...");
//$("#content").ajaxSend(function(){$(this).html("Loadding...");});
if($("#pageindex").html()==page)
return;//防止重复点击同一页

$("#pageindex").html(page); //页码

$.ajax({
type:"GET",
url:"handler2.ashx?Page="+page+"&t=0",
cache:false,
dataType:"json",
success:function(msg){
$("#content").html("");
$.each(msg,function(i){
$("#content").append("<li class='li'>");
$("#content").append(msg[i]._0);
$("#content").append("、"+msg[i]._1);
$("#content").append("</li>");
});
if(page!=1)
$("#content").hide();
}
})
getPage(page);
$("#content").ajaxStop(function(){$(this).fadeIn(500); }); //结束ajax
}

</script>
<div>
<ul id="content"></ul>
</div>
<br />
当前页:<span id="pageindex"></span>
<br />
<span id="count"></span>
</form>
内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签: