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( " }, 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 " ,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 >