最近练习了一些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);JS
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>HTML
简单的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 a 11 { 12 position:relative; 13 margin-right:5px; 14 text-align:center; 15 line-height:50px; 16 }CSS
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 Table 84 { 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 #endregion 92 93 }C#
实现简单分页的存储过程
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 output 17 AS 18 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 num 22 from Theatre 23 where State=1) T 24 where (T.num>@pageSize*(@pageIndex-1)) and (T.num<=@pageSize*@pageIndex)SQL
最终效果页面
相关文章![[搜片神器]之DHT网络爬虫的C++程序初步开源](/Upload/SmallIMG/2013083111/F0B9B15B96C30FA7.jpg)
