分页示例

1.使用JQuery插件pagination实现AJax无刷新分页

以下只列出主要代码及注释，详细请参考最后源码：

我们需要用到的文件有：jquery.js，jquery.pagination.js，pagination.css

以及用于将DataTable转换为Json的插件Newtonsoft.Json.Net20.dll，文件在包含在最下面的源文件中

分页存储过程：

?

SET  ANSI_NULLS  ON GO SET  QUOTED_IDENTIFIER  ON GO -- ============================================= -- Author:      余泳彬 -- Create date: 2011-01-15 12:59 -- Description: 分页，用到了ROW_NUMBER() -- ============================================= create  PROCEDURE  [dbo].[proc_FenYe] @tblName    varchar (255),        -- 表名 @strFields  varchar (1000) =  '*' ,  -- 需要返回的列，默认* @strOrder  varchar (255)= '' ,       -- 排序的字段名，必填 @strOrderType  varchar (10)= 'ASC' ,  -- 排序的方式,默认ASC @PageSize    int  = 10,           -- 页尺寸,默认10 @PageIndex  int  = 1,            -- 页码,默认1 @strWhere  varchar (1500) =  ''  -- 查询条件 (注意: 不要加 where) AS   declare  @strSQL    varchar (5000)   if @strWhere != '' set  @strWhere= ' where ' +@strWhere   set  @strSQL= 'SELECT * FROM (' +      'SELECT ROW_NUMBER() OVER (ORDER BY ' +@strOrder+ ' ' +@strOrderType+ ') AS pos,' +@strFields+ ' ' +      'FROM ' +@tblName+ ' ' +@strWhere+ ') AS sp WHERE pos BETWEEN ' +str((@PageIndex-1)*@PageSize+1)+ ' AND ' +str(@PageIndex*@PageSize)   exec  (@strSQL)

数据访问层主要函数：取出分页数据及计算总条数（主要看传的什么参数即可）

?

/// <summary>分页获取数据列表(所有字段+类名)</summary> /// <param name="order">排序字段</param> /// <param name="ordertype">排序类型:desc或asc</param> /// <param name="PageSize">页大小</param> /// <param name="PageIndex">页索引</param> /// <param name="strWhere">条件</param> /// <returns></returns> public  DataSet GetList( string  order,  string  ordertype,  int  PageSize,  int  PageIndex,  string  strWhere) {      Database db = DatabaseFactory.CreateDatabase();      DbCommand dbCommand = db.GetStoredProcCommand( "proc_FenYe" );      db.AddInParameter(dbCommand,  "tblName" , DbType.AnsiString,  "News" );      db.AddInParameter(dbCommand,  "strFields" , DbType.AnsiString,  "*" );      db.AddInParameter(dbCommand,  "PageSize" , DbType.Int32, PageSize);      db.AddInParameter(dbCommand,  "PageIndex" , DbType.Int32, PageIndex);      db.AddInParameter(dbCommand,  "strOrder" , DbType.String, order);      db.AddInParameter(dbCommand,  "strOrderType" , DbType.String, ordertype);      db.AddInParameter(dbCommand,  "strWhere" , DbType.AnsiString, strWhere);      return  db.ExecuteDataSet(dbCommand); }   /// <summary>计算记录数</summary> /// <param name="strWhere">条件</param> /// <returns></returns> public  int  CalcCount( string  strWhere) {      string  sql =  "select count(1) from News" ;      if  (! string .IsNullOrEmpty(strWhere))      {          sql +=  " where "  + strWhere;      }      Database db = DatabaseFactory.CreateDatabase();      DbCommand dbCommand = db.GetSqlStringCommand(sql);      return  int .Parse(db.ExecuteScalar(dbCommand).ToString()); }

下面为主要代码：

1、页面引入JS及CSS

?

< script  src = "js/jquery-1.4.2.js"  type = "text/javascript" ></ script > < script  src = "js/jquery.pagination.js"  type = "text/javascript" ></ script > < link  href = "Css/pagination.css"  rel = "stylesheet"  type = "text/css"  /> < script  src = "js/NewsAjaxPager.js"  type = "text/javascript" ></ script >

2、页面Html代码

?

<!--内容列表--!> < ul  id = "PageContain"  class = "newslist" >      <!--加载图片--!>      < li  id = "loadImg"  style = " width:100%; height:60px;text-align:center; margin-top:50px;" >< img src = "images/loading1.gif" ></ li >      <!--内容会动态输出到这里面--!> </ ul >   <!--页码，id不能改--!> < div  id = "Pagination"  class = "digg"  ></ div >

3、一般处理程序页面GetNewsList.ashx，根据条件取出分页数据及总条数

?

<%@ WebHandler Language= "C#"  Class= "GetNewsList"  %>   using  System; using  System.Web; using  System.Data;   /// <summary> /// 获取新闻列表，用于列表页AJAX分页及总条数 /// </summary> public  class  GetNewsList : IHttpHandler {        DAl.NewsDAO newsDao =  new  DAl.NewsDAO();      DAl.ProductCategoryDAO catDao =  new  DAl.ProductCategoryDAO();        public  void  ProcessRequest(HttpContext context)      {          context.Response.ContentType =  "text/plain" ;            string  action = context.Request[ "action" ];            if  (action ==  "pager" )  // 取出分页列表          {              // 排序字段              string  order = context.Request[ "order" ].ToString().Trim();              string  orderType = context.Request[ "orderType" ].ToString().Trim();              // 页大小              string  pageSizeStr = context.Request[ "pageSize" ].ToString().Trim();              int  pageSize;              int .TryParse(pageSizeStr,  out  pageSize);              if  (pageSize == 0)              {                  pageSize = 10;              }              // 页索引              string  pageIndexStr = context.Request[ "pageIndex" ].ToString().Trim();              int  pageIndex;              int .TryParse(pageIndexStr,  out  pageIndex);              if  (pageIndex == 0)              {                  pageIndex = 1;              }                // 提取数据              DataTable dt = newsDao.GetList(order, orderType, pageSize, pageIndex, StrWhere(context)).Tables[0];              // 讲DataTable转换为Json              string  jsonDate = Common.WebHelper.DataTableToJSON(dt,  "ListData" );              context.Response.Write(jsonDate);          }          else  if  (action ==  "pageCount" )   // 获取总条数          {              context.Response.Write(newsDao.CalcCount(StrWhere(context)));          }        }          /// <summary>      ///  查询条件      /// </summary>      private  string  StrWhere(HttpContext context)      {          string  strWhere =  "IsShow='1'" ;          string  Id = context.Request[ "cid" ].ToString().Trim();          if  (! string .IsNullOrEmpty(Id)&&Common.WebHelper.IsPosInt(Id))          {              catDao.GetAllChildCatId(Id,  ref  Id);              strWhere +=  "and CategoryID in ("  + Id +  ")" ;  // ref Id          }          return  strWhere;      }            public  bool  IsReusable      {          get          {              return  false ;          }      }   }

DataTable转换为Json的函数

?

/*   * 创建人：余泳彬   * 创建时间：2011-1-17 9:59:50   * 说明：网站帮助类(常用通用类)   * 版权所有：余泳彬   */ using  System; using  System.Collections.Generic; using  System.Text; using  System.Security.Cryptography; using  System.Text.RegularExpressions; using  System.Web; using  System.Web.UI; using  System.Web.UI.WebControls; using  System.Data; using  System.IO; using  Newtonsoft.Json;  // 需先添加引用   namespace  Common {      /// <summary>网站帮助类</summary>      public  class  WebHelper      {          /// <summary>将DateTable转为Json格式数据</summary>          /// <param name="dt">要转换的DataTable名称</param>          /// <param name="dtName">应该是转换后的Key如用Json.dtName得到数据</param>          /// <returns></returns>          public  static  string  DataTableToJSON(DataTable dt,  string  dtName)          {              StringBuilder sb =  new  StringBuilder();              StringWriter sw =  new  StringWriter(sb);                using  (JsonWriter jw =  new  JsonTextWriter(sw))              {                  JsonSerializer ser =  new  JsonSerializer();                  jw.WriteStartObject();                  jw.WritePropertyName(dtName);                  jw.WriteStartArray();                  foreach  (DataRow dr  in  dt.Rows)                  {                      jw.WriteStartObject();                        foreach  (DataColumn dc  in  dt.Columns)                      {                          jw.WritePropertyName(dc.ColumnName);                          ser.Serialize(jw, dr[dc].ToString());                      }                        jw.WriteEndObject();                  }                  jw.WriteEndArray();                  jw.WriteEndObject();                    sw.Close();                  jw.Close();                }                return  sb.ToString();          }        } }

4、★主要的JS代码：(Ajax取出分页数据、总条数、绑定分页控件，讲分页数据HTML输出到前台)

?

/*   * 余泳彬 2011-3-22   * 利用Jquery的jquery.pagination.js插件进行Ajax分页 */     $( function () {      // 获取Url中的类别ID参数(logcheck.js)      var  CatId = GetQueryString( "cid" );      // 计算分页总条数      var  pageCount = 0;      $.ajax({          type:  "POST" ,          cache:  false ,          async:  false ,          dataType:  "text" ,          url:  "Handler/GetNewsList.ashx" ,          data:  "action=pageCount&cid="  + CatId,          success:  function (data) {              pageCount = data;              //alert(pageCount);          }      });        // 初始化数据(显示第一页)      InitData(CatId,  "CreateDate" ,  "Desc" , 20, 0, pageCount);        //处理翻页,page_id为当前页索引(0为第一页)      function  pageselectCallback(page_id, jq) {          //alert(page_id);          InitData(CatId,  "CreateDate" ,  "Desc" , 20, page_id, pageCount);      }        // ★分页主函数(新闻类别ID，排序字段，排序类型，页大小，页索引，总条数)      function  InitData(CatId, order, ordertype, PageSize, pageindx, pageCount) {          // Ajax取出分页列表数据          $.ajax({              type:  "POST" ,              cache:  false ,              dataType:  "json" ,  // 数据格式:JSON              url:  "Handler/GetNewsList.ashx" ,              data:  "action=pager&cid="  + CatId +  "&order="  + order +  "&orderType="  + ordertype + "&pageSize="  + PageSize +  "&pageIndex="  + (pageindx + 1),              // 发送数据之前显示Loading图片，接收结束后隐藏              beforeSend:  function () { $( "#loadImg" ).show(); $( "#Pagination" ).hide() },  // 发送数据之前              complete:  function () { $( "#loadImg" ).hide(); $( "#Pagination" ).show() },  // 接收数据完毕              // Ajax成功              success:  function (json) {                  var  listDate = json.ListData;                  var  html =  "" ;                  $.each(listDate,  function (i, n) {                      html +=  "<li class=\"b\"><span class=\"title\"><a href=\"newscontent.aspx?id="  + n.Id +  "%>\" class=\"typelink\"  target=\"_blank\">"  + n.LongTitle +  "</a></span><span class=\"date\">"  + n.CreateDate +  "</span></li>" ;                  });                  // 输出HTML                  $( "#PageContain" ).html(html);              }            });  // Ajax_end              // 加入分页插件的绑定，第一个参数pageCount为总共多少条数据          $( "#Pagination" ).pagination(pageCount, {              callback: pageselectCallback,              prev_text:  '« 上一页' ,              next_text:  '下一页 »' ,              items_per_page: PageSize,      // 每页显示条数              current_page: pageindx,   // 当前页索引,这里0为第一页              num_display_entries: 6,   // 前面显示几个按钮              num_edge_entries: 2   // 后面显示几个按钮          });        }   // InitData_fun_end     });   // ready_end

实例完整源码：源码与上面所写稍有不同

jQueryPager(JQuery分页插件pagination实现Ajax分页).rar

2.jQuery动态分页

最近一直研究jquery的分页效果，刚刚弄好了一个，拿出来与大家分享。分页效果与时光网的差不多。

网址：http://www.mtime.com/movie/news/all/

先在aspx页面放置一个<div class="pageDivs"></div> ，这个是用来存放分页的。

然后建一个page.js文件，具体代码如下(js中用到的css类是自己设置的，这里就不给出了，具体的大家可以自己设置一下css样式)：

$(document).ready(function(){
var pageCount=0;//总页数，在数据处理的函数里设定

//右部按钮分页显示          
 function right(pageCount,limit,rlimit){
    var html="";
     if(parseInt(pageCount)-limit>=rlimit){
                     for(var i=parseInt(pageCount)-rlimit+1; i<=parseInt(pageCount); i++){
                     html+="<a page="+i+"  leaf='leaf'>"+i+"</a>";}
                     }
                   else{
                     for(var i=parseInt(limit)+1; i<=pageCount; i++){
                     html+="<a page="+i+"  leaf='leaf'>"+i+"</a>";}
                     }
    return html;
  } 
 //首页，尾页，上一页，下一页   
 function changeState(pageIndex,pageCount){
     var $button1=$("div.pageDivs").find("#Button1");//上一页
     var $button2=$("div.pageDivs").find("#Button2");//下一页
     var $first=$("div.pageDivs").find("#First");//首页
     var $last=$("div.pageDivs").find("#Last");//尾页
     if(parseInt(pageIndex)==1){
        $first.css("display","none");
        $button1.css("display","none");}
     else{
      $first.css("display","inline");
      $button1.css("display","inline");
      $first.attr("page",1);
      $button1.attr("page",parseInt(pageIndex)-1);}
     if(parseInt(pageIndex)==pageCount){
        $button2.css("display","none");
        $last.css("display","none");}
      else{
      $last.css("display","inline");
      $button2.css("display","inline");
      $last.attr("page",pageCount);
      $button2.attr("page",parseInt(pageIndex)+1);}
    
 }
 span动态分页  左边显示的页码个数，右边显示的页码个数,要求limit>rlimit
 function span(pageCount,pageIndex,limit,rlimit){
     var isContinue=true;//指示是否继续执行函数
     var html="<a id='First' href='#' >|<</a><a id='Button1' href='#' ><</a>";
     var change=(parseInt(pageCount)-parseInt(rlimit))/(parseInt(limit)-2);//指示分页码可以变动的次数
     if(pageCount!=0&&pageCount!=1){
         if(pageCount<=limit){
             for(var i=1; i<=pageCount; i++){
                 html+="<a page="+i+"  leaf='leaf'>"+i+"</a>"}
              }
         else{
             if(parseInt(pageIndex)<(limit-2)){
                for(var i=1; i<=limit; i++){
                   html+="<a page="+i+"  leaf='leaf'>"+i+"</a>";}
                   html+="...";
                   html+=right(pageCount,limit,rlimit);
               }
             else{
                if(parseInt(pageIndex)%(limit-2)==0){
                   if(parseInt(pageIndex)/(limit-2)<=change&&parseInt(pageIndex)-1+parseInt(limit)-1<=parseInt(pageCount)-parseInt(rlimit)){
                   for(var i=parseInt(pageIndex)-1; i<parseInt(pageIndex)-1+limit; i++){
                     html+="<a page="+i+"  leaf='leaf'>"+i+"</a>";}
                     html+="...";
                     html+=right(pageCount,limit,rlimit);
                   }
                   else{
                     for(var i=1; i<=rlimit; i++){
                       html+="<a page="+i+"  leaf='leaf'>"+i+"</a>";}
                     html+="...";
                     var rest=parseInt(pageCount)-parseInt(rlimit);
                     if(rest<limit){
                       for(var i=parseInt(rlimit)+1; i<=parseInt(pageCount); i++){
                         html+="<a page="+i+"  leaf='leaf'>"+i+"</a>";}
                     }
                     else{
                       var start=parseInt(pageCount)-parseInt(limit)+1;
                       for(var i=start; i<=pageCount; i++){
                          html+="<a page="+i+"  leaf='leaf'>"+i+"</a>";}
                      }
                    }
                  
    
                 }
                 else{
                  html=$("div.pageDivs").html();
                  $("div.pageDivs").html(html);
                  isContinue=false;
                     }
             }
                     
         }
      }
      if(isContinue){
      html+="<a id='Button2' href='#' >></a><a id='Last' href='#' >>|</a>";
      $("div.pageDivs").html(html);}
      changeState(pageIndex,pageCount);
      $("div.pageDivs").find("a[page=" + parseInt(pageIndex) + "]:visible").removeAttr("href").removeClass("disabled").addClass("current").siblings("a[page]:visible").removeClass("current").addClass("disabled").attr("href", "#");
 }  

function page(pageIndex){

/这里放你具体的数据显示，使用ajax动态加载处理数据

pageCount="通过数据处理获得的页面总数";

span(pageCount,pageIndex,7,2);//对分页效果进行调用，这里设置左边显示7个页码，右边显示2个页码。

}

//为页码绑定事件

 $("div.pageDivs").find("a:visible").live("click",function(){
           var result=$(this).attr("page");
           if((typeof $(this).attr("leaf"))!= 'undefined'){
 $(this).removeAttr("href").removeClass("disabled").addClass("current").siblings().removeClass("current").addClass("disabled").attr("href","#");}

         page(result);
           });

});

这样就行了，以上分页的算法是可以封装的，与具体的项目没关系，可以通用。

3.jQuery实现的分页功能

使用JQuery实现分页功能。

1、分页栏HTML码

[html]  view plain copy

1. <div class="g-cf g-pagerwp">  
2.     <div style="visibility:hidden" class="g-pager">  
3.     </div>  
4. </div>  

2、 CSS样式文件

[css]  view plain copy

1. .g-cf:after {clear: both;content: "";display: table;}  
2. .g-cf {zoom:1;}  
3. /*分页*/  
4. .g-pager{ text-align:center; color: #111111; font: 12px/1.5em Arial,Tahoma;  float: right;}  
5. .g-pager a,.g-pager input{ cursor:pointer; border:solid 1px #0F71BE; padding:1px 4px; color:#0F71BE; margin:0 2px; vertical-align:middle; }  
6. .g-pager a.cur,.g-pager a:hover{ background-color:#0F71BE; color:#fff}  
7. .g-pager a.no{ border-color:#A3A3A3; color:#A3A3A3; background-color:#E4F2F9}  
8. .g-pager span{ margin-right:10px; }  
9. .g-pager input{ cursor:default; width:28px; padding:1px 2px; }  
10. .g-pagerwp{ height:23px; line-height:23px;padding:5px; margin-bottom:10px; border: 1px solid #DDDDDD;}  
11. .g-pagerwp .g-btn{ vertical-align:top}  

3、JS脚本文件

3.1 引用JQuery和分页脚本

[html]  view plain copy

1. <script src="/js/common/jquery-1.6.2.js" type="text/javascript"></script>  
2. <script src="/js/jquery.PageBar.js" type="text/javascript"></script>  

3.2 编写jquery.PageBar.js脚本

[javascript]  view plain copy

1. /**************************/  
2. //JQuery分页栏  
3. /**************************/  
4. $.fn.pageBar = function(options) {  
5.     var configs = {  
6.         PageIndex: 1,  
7.         PageSize: 15,  
8.         TotalPage: 0,  
9.         RecordCount: 0,  
10.         showPageCount: 4,  
11.         onPageClick: function(pageIndex) {  
12.             return false;   //默认的翻页事件  
13.         }  
14.     }  
15.     $.extend(configs, options);  
16.     var tmp = "",  
17.     i = 0,  
18.     j = 0,  
19.     a = 0,  
20.     b = 0,  
21.     totalpage = parseInt(configs.RecordCount / configs.PageSize);  
22.     totalpage = configs.RecordCount % configs.PageSize > 0 ? totalpage + 1 : totalpage;  
23.     tmp += "<span>总记录数：" + configs.RecordCount + "</span > ";  
24.     tmp += " <span>页数：" + totalpage + "</span>";  
25.     if (configs.PageIndex > 1) {  
26.         tmp += "<a><</a>"  
27.     } else {  
28.         tmp += "<a class=\"no\"><</a>"  
29.     }  
30.     tmp += "<a>1</a>";  
31.     if (totalpage > configs.showPageCount + 1) {  
32.         if (configs.PageIndex <= configs.showPageCount) {  
33.             i = 2;  
34.             j = i + configs.showPageCount;  
35.             a = 1;  
36.         } else if (configs.PageIndex > totalpage - configs.showPageCount) {  
37.             i = totalpage - configs.showPageCount;  
38.             j = totalpage;  
39.             b = 1;  
40.         } else {  
41.             var k = parseInt((configs.showPageCount - 1) / 2);  
42.             i = configs.PageIndex - k;  
43.             j = configs.PageIndex + k + 1;  
44.             a = 1;  
45.             b = 1;  
46.             if ((configs.showPageCount - 1) % 2) {  
47.                 i -= 1  
48.             }  
49.         }  
50.     }  
51.     else {  
52.         i = 2;  
53.         j = totalpage;  
54.     }  
55.     if (b) {  
56.         tmp += "..."  
57.     }  
58.     for (; i < j; i++) {  
59.         tmp += "<a>" + i + "</a>"  
60.     }  
61.     if (a) {  
62.         tmp += " ... "  
63.     }  
64.     if (totalpage > 1) {  
65.         tmp += "<a>" + totalpage + "</a>"  
66.     }  
67.     if (configs.PageIndex < totalpage) {  
68.         tmp += "<a>></a>"  
69.     } else {  
70.         tmp += "<a class=\"no\">></a>"  
71.     }  
72.     tmp += "<input type=\"text\" /><a>Go</a>"  
73.     var pager = this.html(tmp)  
74.     var index = pager.children('input')[0]  
75.     pager.children('a').click(function() {  
76.         var cls = $(this).attr('class');  
77.         if (this.innerHTML == '<') {  
78.             if (cls != 'no') {  
79.                 configs.onPageClick(configs.PageIndex - 2)  
80.             }  
81.         } else if (this.innerHTML == '>') {  
82.             if (cls != 'no') {  
83.                 configs.onPageClick(configs.PageIndex)  
84.             }  
85.         } else if (this.innerHTML == 'Go') {  
86.             if (!isNaN(index.value)) {  
87.                 var indexvalue = parseInt(index.value);  
88.                 indexvalue = indexvalue < 1 ? 1 : indexvalue  
89.                 indexvalue = indexvalue > totalpage ? totalpage : indexvalue  
90.                 configs.onPageClick(indexvalue - 1)  
91.             }  
92.         } else {  
93.             if (cls != 'cur') {  
94.                 configs.onPageClick(parseInt(this.innerHTML) - 1)  
95.             }  
96.         }  
97.     }).each(function() {  
98.         if (configs.PageIndex == parseInt(this.innerHTML)) {  
99.             $(this).addClass('cur')  
100.         }  
101.     })  
102. }   

3.3 初始化使用

[javascript]  view plain copy

1. $(document).ready(function() {  
2.     //设置分页信息  
3.     var pageOptions = {  
4.         AllowPaging: true,  
5.         PageIndex: 1,       //设置当前页码  
6.         PageSize: 15,       //设置分页大小  
7.         RecordCount: 1092,  //设置数据总数  
8.         TotalPage: 73,      //设置总页数  
9.         showPageCount: 4,  
10.         onPageClick: function(pageIndex) {  
11.         alert("您点击了第" + parseInt(pageIndex + 1) + "页");    //自定义您的翻页事件  
12.             return false;  
13.         }  
14.     }  
15.     //初始化分页栏  
16.     $('.g-pagerwp .g-pager').css('visibility', 'visible').pageBar(pageOptions);      
17. })