zoukankan      html  css  js  c++  java

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

    最近练习了一些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

    最终效果页面
  • 相关阅读:
    MyEclipse的使用
    监控linux各主机系统时间是否一致
    Myeclipse反编译工具
    Myeclipse添加源码链接
    ORA-32004: obsolete or deprecated parameter(s) specified for RDBMS instance
    Authentication token manipulation error报错解决办法
    大数据项目
    maxcompute笔记
    kfrobotaidlog查找
    2019.02.12-2019.02.19 工作安排
  • 原文地址：https://www.cnblogs.com/zt102545/p/3292854.html
Copyright © 2011-2022 走看看