最近项目中用到ajax分页
在网上找到一个非常好用的分页插件jquery-pagination-ajax，以下是链接
http://www.cnblogs.com/linzheng/archive/2010/11/07/1871069.html
但是无奈，不太适合项目。看了jquery-pagination，大体明白了其原理，所以，自己写你一个很简单的
分页功能，算是完成任务，如图
个人认为ajax分页和普通的分页，核心原理是大致相同的。
我是用了一个隐藏域来存储当前页面的索引。
贴一下主要的前台代码吧 ，有点乱
<body> <form id="form1" runat="server"> <input type="hidden" id="hdPageCount_1" value="<%=pageCount %>">" /><!--总页数--> <input type="hidden" id="hdCurrentPageCount_1" value="1" /><!--当前页数--> <div id="Main-right-marriage"> <div class="next" style="top: 155px; left: 221px;"> <a href="javascript:void(0)" id="btn_prev"><img src="image/prev.png" /></a> </div> <div class="photo_wall-top"> <div class="left"> <span class="show_big_img"></span></div> <div class="right"> </div><!-- to right--> </div><!-- to photo_wall-top--> <div class="next" style="top:155px; right: 8px;"> <a href="javascript:void(0)" id="btn_next"><img src="image/next.png" /></a> </div> </div> </form> </body>
JS部分的代码
<script type="text/javascript"> $(function () { /*鼠标悬浮效果*/ $(".box a img").mouseover(function () { var $div = $(this).parent().parent().parent().parent().find(".left"); var $bigImg = $div.find(".bigImg"); $bigImg.attr("src", $(this).attr("src")); }); //ajax 无效果 bug修改 $(".box a img").live("mouseover", function () { var $div = $(this).parent().parent().parent().parent().find(".left"); var $bigImg = $div.find(".bigImg"); $bigImg.attr("src", $(this).attr("src")); }); ajax.ProductList(("#btn_next"), 1, 4); //第一次请求初始化 // 分頁效果 var pageSize = 4; //每页显示条数初始化，修改显示条数，修改这里即可 var pageCount_QH = parseInt($("#hdPageCount_1").val()); $("#btn_next").click(function () { var currentPageIndex = parseInt($("#hdCurrentPageCount_1").val()); if (currentPageIndex * pageSize > pageCount_QH) { return false; } else { $("#hdCurrentPageCount_1").val(currentPageIndex + 1); ajax.ProductList(this, $("#hdCurrentPageCount_1").val(), pageSize, 1); } }); $("#btn_prev").click(function () { var currentPageIndex = $("#hdCurrentPageCount_1").val(); if (currentPageIndex > 1) { ajax.ProductList(this, currentPageIndex - 1, pageSize, 1); $("#hdCurrentPageCount_1").val(currentPageIndex - 1); } else { return false; } }); }); </script>
Ashx后台代码：
/// <summary> /// 获取产品 /// </summary> public void GetProduct() { HttpContext context = HttpContext.Current; int pageIndex = Convert.ToInt32(context.Request.Form["_pageIndex"]);//页面索引 int pageSize = Convert.ToInt32(context.Request.Form["_pageSize"]);//显示条数 int count = 0; List<PagerTestModels.Product> list = new PagerTestBLL.ProductManager().GetAllProduct(pageSize, pageIndex, "", out count); if (list.Count == 0) return; StringBuilder sbFirst = new StringBuilder();//获取第一个大图 StringBuilder sbAll = new StringBuilder();//获取是个小图 foreach (var item in list) { if (sbFirst.Length == 0) { sbFirst.AppendFormat("<a href="#" class="bigImg_link" ><img class="bigImg" src="{0}" height="260" width="260" /><br/><span class="title bigImg_title"></span></a>", item.Thumb); } sbAll.AppendFormat("<div class="box"><a href="{2}" ref="#"><img src="{0}" height="124" width="124" alt="{1}" /></a></div>", item.Thumb, item.Title, item.PID); } Dictionary<string, string> dic = new Dictionary<string, string>(); dic.Add("oneproduct", sbFirst.ToString()); dic.Add("allproduct", sbAll.ToString()); string str = GetJson(dic); HttpContext.Current.Response.ContentType = "plain/text"; HttpContext.Current.Response.Write(str); HttpContext.Current.Response.Flush(); HttpContext.Current.Response.End(); } /// <summary> /// 字典转化为Json /// </summary> /// <param name="dic"></param> /// <returns></returns> private string GetJson(Dictionary<string, string> dic) { StringBuilder sb = new StringBuilder(); sb.Append("{"); foreach (KeyValuePair<string, string> item in dic) { //反義引號 sb.AppendFormat(""{0}":"{1}",", item.Key, item.Value.Replace(""", "\"")); } //刪除最尾一個逗號 string valRtn = Regex.Replace(sb.ToString(), @",$", "}");//替换最后的，号为}号 return valRtn; }