ASP.NET Ajax简单的无刷新分页

最近练习了一些AJAX无刷新分页,写得比较简单,性能不知道怎么样,求大神指点,如有更好的分页提供,欢迎交流!

发话不多说了,直接上代码!

首先从网上下了一个JS分页,感觉挺好用的

 (function($) {
     //设定页码方法，初始化
     $.fn.setPager = function(options) {
         //合并PagerDefaults和options
         var opts = $.extend({}, pagerDefaults, options);

         return this.each(function() {
             //修改,能够动态设置PageSize
             pagerDefaults.PageSize = options.PageSize;

             //先清空后添加(调用自定义的setPagerHtml方法)
             $(this).empty().append(setPagerHtml(parseInt(options.RecordCount), parseInt(options.PageIndex), options.buttonClick));

             $('.pager a').mouseover(function() { document.body.style.cursor = "pointer"; }).mouseout(function() { document.body.style.cursor = "auto"; });
         });
     };

     //设定页数及html
     //参数1:总条目数
     //参数2:当前页
     //参数3:页码按钮
     function setPagerHtml(RecordCount, PageIndex, pagerClick) {
         //调用pager样式表
         var $content = $("<div class=\"pager\"></div>");

         //起始页
         var startPageIndex = 1;

         //若没有条目数,则按 pagerDefaults.PageSize = options.PageSize;选择的条目数来算
         if (RecordCount <= 0) RecordCount = pagerDefaults.PageSize;

         //页尺寸
         var PageSize = pagerDefaults.PageSize;
         //alert(pagerDefaults.PageSize);

         //末页
         var endPageIndex = parseInt(RecordCount % parseInt(PageSize)) > 0 ? parseInt(RecordCount / parseInt(PageSize)) + 1 : RecordCount / parseInt(PageSize);

         //当前页若大于末页,则等于末页
         if (PageIndex > endPageIndex) PageIndex = endPageIndex;

         //当前页小于0,则等于起始页
         if (PageIndex <= 0) PageIndex = startPageIndex;

         //下一页
         var nextPageIndex = PageIndex + 1;

         //上一页
         var prevPageIndex = PageIndex - 1;

         //当前页等于首页
         if (PageIndex == startPageIndex) {
             //生成不能点击的首页和上一页
             $content.append($("<span>首页</span>"));
             $content.append($("<span>上一页</span>"));
         } else {
             //生成一个首页和上一页按钮
             $content.append(renderButton(RecordCount, 1, pagerClick, "首页"));
             $content.append(renderButton(RecordCount, prevPageIndex, pagerClick, "上一页"));
         }

         //这里判断是否显示页码
         if (pagerDefaults.ShowPageNumber) {
             // var html = "";
             //页码部分隐藏 只显示中间区域
             if (endPageIndex <= 5 && PageIndex <= 5) {
                 for (var i = 1; i <= endPageIndex; i++) {
                     if (i == PageIndex) {
                         //生成不可点击的页码,也可用于设置样式,加粗
                         $content.append($("<span>" + i + "</span>"));
                     } else {
                         //生成可点击的页码
                         $content.append(renderButton(RecordCount, i, pagerClick, i));
                     }

                 }

             }
             //生成< 首页 上一页 ...3 4 5 6 7 下一页 末页 >格式
             else if (endPageIndex > 5 && endPageIndex - PageIndex <= 2) {

                 $content.append($("<a>...</a>"));
                 for (var i = endPageIndex - 4; i <= endPageIndex; i++) {
                     if (i == PageIndex) {
                         $content.append($("<span>" + i + "</span>"));
                     } else {
                         $content.append(renderButton(RecordCount, i, pagerClick, i));
                     }

                 }
             }
             //生成< 首页 上一页 ... 2 3 4 5 6 ... 下一页 末页 >格式
             else if (endPageIndex > 5 && PageIndex > 3) {

                 $content.append($("<a>...</a>"));
                 for (var i = PageIndex - 2; i <= PageIndex + 2; i++) {
                     if (i == PageIndex) {
                         $content.append($("<span>" + i + "</span>"));
                     } else {
                         $content.append(renderButton(RecordCount, i, pagerClick, i));
                     }

                 }
                 $content.append($("<a>...</a>"));

             }
             //生成< 首页 上一页 1 2 3 4 5 ... 下一页 末页 >格式
             else if (endPageIndex > 5 && PageIndex <= 3) {

                 for (var i = 1; i <= 5; i++) {
                     if (i == PageIndex) {
                         $content.append($("<span>" + i + "</span>"));
                     } else {
                         $content.append(renderButton(RecordCount, i, pagerClick, i));
                     }

                 }
                 $content.append($("<a>...</a>"));
             }
         }
         //当前页等于末页
         if (PageIndex == endPageIndex) {
             //生成不能点击的下一页和末页
             $content.append($("<span>下一页</span>"));
             $content.append($("<span>末页</span>"));
         } else {
             //生成一个下一页和末页按钮
             $content.append(renderButton(RecordCount, nextPageIndex, pagerClick, "下一页"));
             $content.append(renderButton(RecordCount, endPageIndex, pagerClick, "末页"));
         }
         //返回生成的分页
         return $content;
     }

     //生成页码
     //参数1:总条目数
     //参数2:指定页
     //参数3:页码按钮
     //参数4:指定页文本
     function renderButton(recordCount, goPageIndex, EventHander, text) {
         var $goto = $("<a title=\"第" + goPageIndex + "页\">" + text + "</a>\"");
         $goto.click(function() {

             EventHander(recordCount, goPageIndex, pagerDefaults.PageSize);
         });
         return $goto;
     }

     //pagerDefaults变量
     var pagerDefaults = {
         //
         DefaultPageCount: 1,

         //当前页
         DefaultPageIndex: 1,

         //总条目数
         PageSize: 20,

         //是否显示页码
         ShowPageNumber: true
     };
 })(jQuery);

JS

Theatrelist1.aspx前台页面代码,注意AJAX请求不能想自身后台(Theatrelist1.aspx.cs)发送请求,这样是获取不到的!所以只能发送给一般处理程序(ajaxPage.ashx)

     <script src="js/jquery-1.7.1.min.js" type="text/javascript"></script>

     <script src="js/JqueryPage.js" type="text/javascript"></script>

     <script type="text/javascript">
         $(document).ready(function() {
         //初始化
         GetData(1, 1);
         });

         function InitPager(RecordCount, PageIndex, PageSize, Data) {
             $("#Pager").setPager({ RecordCount: RecordCount, PageIndex: PageIndex, PageSize: PageSize, buttonClick: PageClick });
         }

         //页码按钮
         //参数1:总条目数
         //参数2:当前页
         //参数3:页尺寸
         PageClick = function(RecordCount, PageIndex, PageSize) {
             GetData(PageSize, PageIndex);
         };

         //ajax请求响应
         //参数1:页尺寸
         //参数2:当前页
         function GetData(PageSize, PageIndex) {
             $.ajax({
                 url: 'ajaxPage.ashx',
                 Type: "post",
                 contentType: "application/json",
                 data: 'PageSize=' + PageSize + '&PageIndex=' + PageIndex,
                 success: function(data, status) {
                     $("#list").empty();
                     var i = 0;
                     for (i = 0; i < data.length-1; i++) {
                         var li = $("<li><a href=Theatrecontent.aspx?id=" + data[i].ID + ">" + data[i].Title + "</a><span>" + data[i].Time + "</span></li>");
                         $("#list").append(li);
                     }
                     $("#Pager").setPager({ RecordCount: data[i].Count, PageIndex: PageIndex, PageSize: PageSize, buttonClick: PageClick });
                 }
             });
         }

     </script>

 <!--截取主要的部分而已-->
         <div class="o_l_list">
             <p class="o_p_h">
                 剧院之窗..............................................................................</p>
             <ul id="list">

             </ul>
             <p id="Pager" align="center">

             </p>
         </div>

HTML

简单的CSS样式

 .pager span
 {
     position:relative;
     margin-right:5px;
     color:Gray;
     text-align:center;
     line-height:50px;
 }

 .pager a
 {
     position:relative;
     margin-right:5px;
     text-align:center;
     line-height:50px;
 }

CSS

ajaxPage.ashx页面代码

 <%@ WebHandler Language="C#" Class="ajaxPage" %>

 using System;
 using System.Web;
 using System.Data;
 using System.Data.SqlClient;
 using System.Configuration;
 using System.Web.Script.Serialization;
 using System.Collections.Generic;

 public class ajaxPage : IHttpHandler {

     public void ProcessRequest (HttpContext context) {
         context.Response.ContentType = "application/json";
         BindData_Newslist(context);
     }

     public bool IsReusable {
         get {
             return false;
         }
     }

     #region 绑定
     /// <summary>
     /// 剧院之窗列表
     /// </summary>
     private void BindData_Newslist(HttpContext context)
     {
         //页尺寸
         int pageSize = Convert.ToInt32(context.Request["PageSize"]);
         //当前页
         int pageIndex = Convert.ToInt32(context.Request["PageIndex"]);

         //总条目数
         string Count = "";

         //链接数据库
         string conString = ConfigurationSettings.AppSettings["DBConnStr"];
         SqlConnection con = new SqlConnection(conString);

         //打开数据库
         con.Open();

         //page是存储过程
         SqlCommand cmd = new SqlCommand("page", con);
         cmd.CommandType = CommandType.StoredProcedure;
         cmd.Parameters.Add("@pageSize", pageSize);
         cmd.Parameters.Add("@pageIndex", pageIndex);
         //SqlParameter sqlcount = new SqlParameter("@count", SqlDbType.Int);
         //sqlcount.Direction = ParameterDirection.Output;
         //cmd.Parameters.Add(sqlcount);
         cmd.Parameters.Add("@count", );
         //声明为输出参数
         cmd.Parameters["@count"].Direction = ParameterDirection.Output;        

         SqlDataAdapter adpt = new SqlDataAdapter(cmd as SqlCommand);
         DataSet ds = new DataSet();
         adpt.Fill(ds);
         List<Table> list = new List<Table>();
         DataTable dt = ds.Tables[];
         Count = cmd.Parameters["@count"].Value.ToString();
         //Count = sqlcount.Value.ToString();
         int i = ;
         for (i = ; i < dt.Rows.Count; i++)
         {
             list.Add(new Table()
             {
                 ID = dt.Rows[i]["id"].ToString(),
                 Title = dt.Rows[i]["title"].ToString(),
                 Time = dt.Rows[i]["Time"].ToString()
             });
         }
         list.Add(new Table() { Count = Count });

         //序列化输出
         JavaScriptSerializer jss = new JavaScriptSerializer();
         context.Response.Write(jss.Serialize(list));
         context.Response.End();
     }

     public class Table
     {
         public string ID { get; set; }
         public string Title { get; set; }
         public string Time { get; set; }
         public string Count { get; set; }
     }

     #endregion

 }

C#

实现简单分页的存储过程

 USE [Jopera]
 GO
 /****** Object:  StoredProcedure [dbo].[page]    Script Date: 08/31/2013 10:09:21 ******/
 SET ANSI_NULLS ON
 GO
 SET QUOTED_IDENTIFIER ON
 GO
 ALTER proc [dbo].[page]
 --页尺寸
 @pageSize int,

 --当前页
 @pageIndex int,

 --总条目数
 @count int output
 AS
 set @count=(select count(*) from Theatre where State=1)
 select id,title,[Time]
 from   (select id,title,[Time],
        ROW_NUMBER() over(order by Time DESC) as num
        from Theatre
        where State=1) T
 where (T.num>@pageSize*(@pageIndex-1)) and (T.num<=@pageSize*@pageIndex)

SQL

最终效果页面