项目中经常会用到分页的功能类似的项目做过无数个了,今个把自己常用的分页代码分享一下。
首先说说服务端处理的代码:
下面代码中重点是分页的sql语句的写法,其中的参数@n是当前的页码,总的来说本服务端主要向前台输出了2个值,接收了一个参数(当前页码),输出的是总的页数和当前页码下的数据。
sql = "select t.* from (select *,ROW_NUMBER() over(order by id asc) rownum from eazy_yiliaofuwu where typeid='"+id+"')t where t.rownum>=(@n-1)*10+1 and t.rownum<=@n*10";
DataTable dt = DbHelperSQL.Query(sql, new SqlParameter("@n", pagenum)).Tables[0];
namespace EazyCMS.Web.tools { /// <summary> /// getyaopinfuwu 的摘要说明 /// </summary> public class getyaopinfuwu : IHttpHandler { private string sql = string.Empty; private int total = 0; public void ProcessRequest(HttpContext context) { context.Response.ContentType = "text/plain"; string id = context.Request["id"]; int pagenum = Convert.ToInt32(context.Request["pagenum"]); sql = "select t.* from (select *,ROW_NUMBER() over(order by id asc) rownum from eazy_yiliaofuwu where typeid='"+id+"')t where t.rownum>=(@n-1)*10+1 and t.rownum<=@n*10"; DataTable dt = DbHelperSQL.Query(sql, new SqlParameter("@n", pagenum)).Tables[0]; //这里得到的根据条件查询得到的数据总的条数 total = Convert.ToInt32(DbHelperSQL.GetSingle("select COUNT(*) from eazy_yiliaofuwu where typeid=" + id)); Medicalitems medicalitems = new Medicalitems(); medicalitems.medicalitem = new Medicalitem[dt.Rows.Count]; medicalitems.PageCount = (int)Math.Ceiling(total / 10.0);//总的页码0.1→1 , 0.95→1, 1.01→2,1.0→1 for (int i = 0; i < dt.Rows.Count; i++) { medicalitems.medicalitem[i] = new Medicalitem() { MedicalCode=dt.Rows[i]["ylcode"].ToString(), MedicalContent=dt.Rows[i]["itemcontent"].ToString(), MedicalName=dt.Rows[i]["itemname"].ToString(), MedicalPrice=dt.Rows[i]["price"].ToString(), MedicalUnit=dt.Rows[i]["danwei"].ToString() }; } context.Response.Write(new JavaScriptSerializer().Serialize(medicalitems)); } public bool IsReusable { get { return false; } } } class Medicalitems { public Medicalitem[] medicalitem { get; set; } public int PageCount { get; set; } } class Medicalitem { public string MedicalCode { get; set; } public string MedicalName { get; set; } public string MedicalContent { get; set; } public string MedicalUnit { get; set; } public string MedicalPrice { get; set; } } }
再来说说前端代码:
<script type="text/javascript"> var id; function getdata(v) { $("#pageGro").removeAttr("style"); id=v; ShowPage(1); } function ShowPage(pagenum){ $.post("../../tools/getyaopinfuwu.ashx", { "id": id,"pagenum":pagenum }, function (data) { //根据总页数判断,如果小于5页,则显示所有页数,如果大于5页,则显示5页。根据当前点击的页数生成 var pageCount = parseInt(data.PageCount);//模拟后台总页数 //生成分页按钮 if(pageCount>5){ page_icon(1,5,0); }else{ page_icon(1,pageCount,0); } //点击分页按钮触发 $("#pageGro li").live("click",function(){ //alert(id); if(pageCount > 5){ var pageNum = parseInt($(this).html());//获取当前页数 pageGroup(pageNum,pageCount); }else{ $(this).addClass("on"); $(this).siblings("li").removeClass("on"); var pageNum = parseInt($(this).html());//获取当前页数 ShowPage2(pageNum); } }); //点击上一页触发 $("#pageGro .pageUp").click(function(){ if(pageCount > 5){ var pageNum = parseInt($("#pageGro li.on").html());//获取当前页 pageUp(pageNum,pageCount); }else{ var index = $("#pageGro ul li.on").index();//获取当前页 if(index > 0){ $("#pageGro li").removeClass("on");//清除所有选中 $("#pageGro ul li").eq(index-1).addClass("on");//选中上一页 var pageNum = parseInt($("#pageGro li.on").html());//获取当前页 ShowPage2(pageNum); } } }); //点击下一页触发 $("#pageGro .pageDown").click(function(){ if(pageCount > 5){ var pageNum = parseInt($("#pageGro li.on").html());//获取当前页 pageDown(pageNum,pageCount); }else{ var index = $("#pageGro ul li.on").index();//获取当前页 if(index+1 < pageCount){ $("#pageGro li").removeClass("on");//清除所有选中 $("#pageGro ul li").eq(index+1).addClass("on");//选中上一页 var pageNum = parseInt($("#pageGro li.on").html());//获取当前页 ShowPage2(pageNum); } } }); //页码 var TotalPageNum=data.PageCount; $("#myui").empty();//首先清空当前容器下面的所有内容 var table=data.medicalitem;//这里得到一个数据对象的数组 for (var i = 0; i < table.length; i++) { var item=table[i]; $("<a ><li class=''> <div class='clrfix'><div class='honor_x'> <div class='time'>"+item.MedicalCode+"</div> </div> <div class='honor_n'>"+item.MedicalName+"</div><div class='honor_p'>"+item.MedicalContent+"</div> <div class='honor_n'>"+item.MedicalUnit+"</div> <div class='honor_c'>"+item.MedicalPrice+" </div> </div></li> </a> ").appendTo("#myui"); } },"json"); } function ShowPage2(pagenum){ $.post("../../tools/getyaopinfuwu.ashx", { "id": id,"pagenum":pagenum }, function (data) { $("#myui").empty(); var table=data.medicalitem; for (var i = 0; i < table.length; i++) { var item=table[i]; $("<a ><li class=''> <div class='clrfix'><div class='honor_x'> <div class='time'>"+item.MedicalCode+"</div> </div> <div class='honor_n'>"+item.MedicalName+"</div><div class='honor_p'>"+item.MedicalContent+"</div> <div class='honor_n'>"+item.MedicalUnit+"</div> <div class='honor_c'>"+item.MedicalPrice+" </div> </div></li> </a> ").appendTo("#myui"); } },"json"); } </script>