jquery+json处理分页的一个简单例子。
2010-11-17 09:05
756 查看
jquery+json处理分页的一个简单例子。
处理类:
C# code
ashx
C# code
页面:
HTML code
处理类:
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>
相关文章推荐
- 本文简单讲诉jQuery处理json与ajax返回的Json的一个例子
- jQuery 和 json 简单例子(注意callback函数的处理!!) (servlet返回json,jquery更新,java json)
- 一个简单的 jquery.pager 分页的例子
- jQuery 和 json 简单例子(注意callback函数的处理!!) (servlet返回json,jquery更新,java json)
- 利用JQuery写一个简单的异步分页插件
- 企业开发中js,Jquery,Ajax和json格式的一个例子
- 一个简单的jQuery插件ajaxfileupload实现ajax上传文件例子
- 一个简单的json例子
- php+jquery+ajax+json的一个最简单实例
- 利用JQuery写一个简单的异步分页插件
- 利用JQuery写一个简单的分页插件
- 一个简单的jquery选择器例子
- 一个超简单的jQuery回调函数例子(分享)
- JQuery在一个简单的表单验证的例子
- 一个简单的jQuery插件ajaxfileupload实现ajax上传文件例子
- Python操作json数据的一个简单例子
- 一个非常简单的jQuery分页插件
- jquery autocomplete 与struts2 json插件结合简单例子
- 一个简单的json的例子----mui
- 一个简单的jQuery分页跳转插件