最近练习了一些AJAX无刷新分页,写得比较简单,性能不知道怎么样,求大神指点,如有更好的分页提供,欢迎交流!
发话不多说了,直接上代码!
首先从网上下了一个JS分页,感觉挺好用的
1 (function($) { 2 //设定页码方法，初始化 3 $.fn.setPager = function(options) { 4 //合并PagerDefaults和options 5 var opts = $.extend({}, pagerDefaults, options); 6 7 return this.each(function() { 8 //修改,能够动态设置PageSize 9 pagerDefaults.PageSize = options.PageSize; 10 11 //先清空后添加(调用自定义的setPagerHtml方法) 12 $(this).empty().append(setPagerHtml(parseInt(options.RecordCount), parseInt(options.PageIndex), options.buttonClick)); 13 14 $('.pager a').mouseover(function() { document.body.style.cursor = "pointer"; }).mouseout(function() { document.body.style.cursor = "auto"; }); 15 }); 16 }; 17 18 //设定页数及html 19 //参数1:总条目数 20 //参数2:当前页 21 //参数3:页码按钮 22 function setPagerHtml(RecordCount, PageIndex, pagerClick) { 23 //调用pager样式表 24 var $content = $("<div class=\"pager\"></div>"); 25 26 //起始页 27 var startPageIndex = 1; 28 29 //若没有条目数,则按 pagerDefaults.PageSize = options.PageSize;选择的条目数来算 30 if (RecordCount <= 0) RecordCount = pagerDefaults.PageSize; 31 32 //页尺寸 33 var PageSize = pagerDefaults.PageSize; 34 //alert(pagerDefaults.PageSize); 35 36 //末页 37 var endPageIndex = parseInt(RecordCount % parseInt(PageSize)) > 0 ? parseInt(RecordCount / parseInt(PageSize)) + 1 : RecordCount / parseInt(PageSize); 38 39 //当前页若大于末页,则等于末页 40 if (PageIndex > endPageIndex) PageIndex = endPageIndex; 41 42 //当前页小于0,则等于起始页 43 if (PageIndex <= 0) PageIndex = startPageIndex; 44 45 //下一页 46 var nextPageIndex = PageIndex + 1; 47 48 //上一页 49 var prevPageIndex = PageIndex - 1; 50 51 //当前页等于首页 52 if (PageIndex == startPageIndex) { 53 //生成不能点击的首页和上一页 54 $content.append($("<span>首页</span>")); 55 $content.append($("<span>上一页</span>")); 56 } else { 57 //生成一个首页和上一页按钮 58 $content.append(renderButton(RecordCount, 1, pagerClick, "首页")); 59 $content.append(renderButton(RecordCount, prevPageIndex, pagerClick, "上一页")); 60 } 61 62 //这里判断是否显示页码 63 if (pagerDefaults.ShowPageNumber) { 64 // var html = ""; 65 //页码部分隐藏 只显示中间区域 66 if (endPageIndex <= 5 && PageIndex <= 5) { 67 for (var i = 1; i <= endPageIndex; i++) { 68 if (i == PageIndex) { 69 //生成不可点击的页码,也可用于设置样式,加粗 70 $content.append($("<span>" + i + "</span>")); 71 } else { 72 //生成可点击的页码 73 $content.append(renderButton(RecordCount, i, pagerClick, i)); 74 } 75 76 } 77 78 } 79 //生成< 首页 上一页 ...3 4 5 6 7 下一页 末页 >格式 80 else if (endPageIndex > 5 && endPageIndex - PageIndex <= 2) { 81 82 $content.append($("<a>...</a>")); 83 for (var i = endPageIndex - 4; i <= endPageIndex; i++) { 84 if (i == PageIndex) { 85 $content.append($("<span>" + i + "</span>")); 86 } else { 87 $content.append(renderButton(RecordCount, i, pagerClick, i)); 88 } 89 90 } 91 } 92 //生成< 首页 上一页 ... 2 3 4 5 6 ... 下一页 末页 >格式 93 else if (endPageIndex > 5 && PageIndex > 3) { 94 95 $content.append($("<a>...</a>")); 96 for (var i = PageIndex - 2; i <= PageIndex + 2; i++) { 97 if (i == PageIndex) { 98 $content.append($("<span>" + i + "</span>")); 99 } else {100 $content.append(renderButton(RecordCount, i, pagerClick, i));101 }102 103 }104 $content.append($("<a>...</a>"));105 106 }107 //生成< 首页 上一页 1 2 3 4 5 ... 下一页 末页 >格式108 else if (endPageIndex > 5 && PageIndex <= 3) {109 110 for (var i = 1; i <= 5; i++) {111 if (i == PageIndex) {112 $content.append($("<span>" + i + "</span>"));113 } else {114 $content.append(renderButton(RecordCount, i, pagerClick, i));115 }116 117 }118 $content.append($("<a>...</a>"));119 }120 }121 //当前页等于末页122 if (PageIndex == endPageIndex) {123 //生成不能点击的下一页和末页124 $content.append($("<span>下一页</span>"));125 $content.append($("<span>末页</span>"));126 } else {127 //生成一个下一页和末页按钮128 $content.append(renderButton(RecordCount, nextPageIndex, pagerClick, "下一页"));129 $content.append(renderButton(RecordCount, endPageIndex, pagerClick, "末页"));130 }131 //返回生成的分页132 return $content;133 }134 135 //生成页码136 //参数1:总条目数137 //参数2:指定页138 //参数3:页码按钮139 //参数4:指定页文本140 function renderButton(recordCount, goPageIndex, EventHander, text) {141 var $goto = $("<a title=\"第" + goPageIndex + "页\">" + text + "</a>\"");142 $goto.click(function() {143 144 EventHander(recordCount, goPageIndex, pagerDefaults.PageSize);145 });146 return $goto;147 }148 149 //pagerDefaults变量150 var pagerDefaults = {151 //152 DefaultPageCount: 1,153 154 //当前页155 DefaultPageIndex: 1,156 157 //总条目数158 PageSize: 20,159 160 //是否显示页码161 ShowPageNumber: true 162 };163 })(jQuery);
Theatrelist1.aspx前台页面代码,注意AJAX请求不能想自身后台(Theatrelist1.aspx.cs)发送请求,这样是获取不到的!所以只能发送给一般处理程序(ajaxPage.ashx)
1 <script src="js/jquery-1.7.1.min.js" type="text/javascript"></script> 2 3 <script src="js/JqueryPage.js" type="text/javascript"></script> 4 5 <script type="text/javascript"> 6 $(document).ready(function() { 7 //初始化 8 GetData(1, 1); 9 });10 11 function InitPager(RecordCount, PageIndex, PageSize, Data) {12 $("#Pager").setPager({ RecordCount: RecordCount, PageIndex: PageIndex, PageSize: PageSize, buttonClick: PageClick });13 }14 15 //页码按钮16 //参数1:总条目数17 //参数2:当前页18 //参数3:页尺寸19 PageClick = function(RecordCount, PageIndex, PageSize) {20 GetData(PageSize, PageIndex);21 };22 23 //ajax请求响应24 //参数1:页尺寸25 //参数2:当前页26 function GetData(PageSize, PageIndex) {27 $.ajax({28 url: 'ajaxPage.ashx',29 Type: "post",30 contentType: "application/json",31 data: 'PageSize=' + PageSize + '&PageIndex=' + PageIndex,32 success: function(data, status) {33 $("#list").empty();34 var i = 0;35 for (i = 0; i < data.length-1; i++) {36 var li = $("<li><a href=Theatrecontent.aspx?id=" + data[i].ID + ">" + data[i].Title + "</a><span>" + data[i].Time + "</span></li>");37 $("#list").append(li);38 }39 $("#Pager").setPager({ RecordCount: data[i].Count, PageIndex: PageIndex, PageSize: PageSize, buttonClick: PageClick });40 }41 });42 }43 44 </script>45 46 47 48 49 <!--截取主要的部分而已-->50 <div class="o_l_list">51 <p class="o_p_h">52 剧院之窗..............................................................................</p>53 <ul id="list">54 55 </ul>56 <p id="Pager" align="center">57 58 </p>59 </div>
简单的CSS样式
1 .pager span 2 { 3 position:relative; 4 margin-right:5px; 5 color:Gray; 6 text-align:center; 7 line-height:50px; 8 } 9 10 .pager a11 {12 position:relative;13 margin-right:5px;14 text-align:center;15 line-height:50px;16 }
ajaxPage.ashx页面代码
1 <%@ WebHandler Language="C#" Class="ajaxPage" %> 2 3 using System; 4 using System.Web; 5 using System.Data; 6 using System.Data.SqlClient; 7 using System.Configuration; 8 using System.Web.Script.Serialization; 9 using System.Collections.Generic;10 11 public class ajaxPage : IHttpHandler {12 13 public void ProcessRequest (HttpContext context) {14 context.Response.ContentType = "application/json";15 BindData_Newslist(context);16 }17 18 public bool IsReusable {19 get {20 return false;21 }22 }23 24 #region 绑定25 /// <summary>26 /// 剧院之窗列表27 /// </summary>28 private void BindData_Newslist(HttpContext context)29 {30 //页尺寸31 int pageSize = Convert.ToInt32(context.Request["PageSize"]);32 //当前页33 int pageIndex = Convert.ToInt32(context.Request["PageIndex"]);34 35 //总条目数36 string Count = "";37 38 //链接数据库39 string conString = ConfigurationSettings.AppSettings["DBConnStr"];40 SqlConnection con = new SqlConnection(conString);41 42 //打开数据库43 con.Open();44 45 //page是存储过程46 SqlCommand cmd = new SqlCommand("page", con);47 cmd.CommandType = CommandType.StoredProcedure;48 cmd.Parameters.Add("@pageSize", pageSize);49 cmd.Parameters.Add("@pageIndex", pageIndex);50 //SqlParameter sqlcount = new SqlParameter("@count", SqlDbType.Int);51 //sqlcount.Direction = ParameterDirection.Output;52 //cmd.Parameters.Add(sqlcount);53 cmd.Parameters.Add("@count", 0);54 //声明为输出参数55 cmd.Parameters["@count"].Direction = ParameterDirection.Output; 56 57 58 SqlDataAdapter adpt = new SqlDataAdapter(cmd as SqlCommand);59 DataSet ds = new DataSet();60 adpt.Fill(ds);61 List<Table> list = new List<Table>();62 DataTable dt = ds.Tables[0];63 Count = cmd.Parameters["@count"].Value.ToString();64 //Count = sqlcount.Value.ToString();65 int i = 0;66 for (i = 0; i < dt.Rows.Count; i++)67 {68 list.Add(new Table()69 {70 ID = dt.Rows[i]["id"].ToString(),71 Title = dt.Rows[i]["title"].ToString(),72 Time = dt.Rows[i]["Time"].ToString()73 });74 }75 list.Add(new Table() { Count = Count });76 77 //序列化输出78 JavaScriptSerializer jss = new JavaScriptSerializer();79 context.Response.Write(jss.Serialize(list));80 context.Response.End();81 }82 83 public class Table84 {85 public string ID { get; set; }86 public string Title { get; set; }87 public string Time { get; set; }88 public string Count { get; set; }89 }90 91 #endregion92 93 }
实现简单分页的存储过程
1 USE [Jopera] 2 GO 3 /****** Object: StoredProcedure [dbo].[page] Script Date: 08/31/2013 10:09:21 ******/ 4 SET ANSI_NULLS ON 5 GO 6 SET QUOTED_IDENTIFIER ON 7 GO 8 ALTER proc [dbo].[page] 9 --页尺寸10 @pageSize int,11 12 --当前页13 @pageIndex int,14 15 --总条目数16 @count int output17 AS18 set @count=(select count(*) from Theatre where State=1)19 select id,title,[Time]20 from (select id,title,[Time],21 ROW_NUMBER() over(order by Time DESC) as num22 from Theatre23 where State=1) T24 where (T.num>@pageSize*(@pageIndex-1)) and (T.num<=@pageSize*@pageIndex)
联系客服
