自己做过分页功能吗?我们一起打造自己的分页控件

一、概述

这些日子在做一套系统,基本上告了一段落,其中包括分页相关的功能.

主要涉及:Url分页和Ajax 分页.而基本上开发中所用到的就这两种,当然有其他的方式,我们就不说了.

为什么会谈及这两种分页呢,原因如下

ajax 分页用户体验好,性能更好.

Url 分页对于搜索引擎友好.

而做的这套系统两方面都需要,故此重新设计了分页方案.自认目前十分灵活便捷的分页控件.

二、效果预览

三、ajax分页的使用方式

说明:在配置分页参数的时候,smallPageUrl 表示加载每页内容的地址.

后台代码:

?

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21

using (var db=Db.CreateDefaultDb()) {                 var mqlJoin=ScoreSet.SelectAll()                     .InnerJoin(StudentSet.Select(StudentSet.Name))                     .InnerJoin(ClassSet.Select(ClassSet.ID.AS("ClassID"),ClassSet.ClassName))                     .ON(ScoreSet.Student_ID.Equal(StudentSet.ID)                         .And(StudentSet.Class_ID.Equal(ClassSet.ID) )                        );                 if (Request["onlyGetSumDataCount"]=="1") {                     var sumCount=db.GetCount(mqlJoin);                     Response.Write(sumCount);                     Response.End();                     return;                 }else{                     int sumPageCount;                     int sumDataCount;                     var pageIndex=Request["pageIndex"];                     var pageSize=Request["pageSize"];                     this.List=db.GetPagerToDictionaryList(mqlJoin,out sumPageCount,out sumDataCount,int.Parse(pageIndex),                                                           int.Parse(pageSize),null);                 }             }

页面代码:

?

1 2 3 4 5 6 7 8 9 10 11

<%@ Page Language           = "C#" AutoEventWireup    = "false" Inherits           = "Moon.Pager.SmallPage" ValidateRequest    = "false" EnableSessionState = "false" %> <% foreach(var a in this.List){%> <p><%=a["ID"]%> <%=a["Name"]%></p> <%}%>

　　

　　

 

四、ajax 分页功能的实现

4.1所需脚本

 

var pageNav = pageNav || {};
pageNav.fn = null;
pageNav.pre = "pre";
pageNav.next = "next";
var pagesize = 20;
var _pageindex = 0;
var _pagecount = 0;
var _pagesumcount = 0;
pageNav.nav = function (a, b) {
    _pagesumcount = b;
    if (1 >= b) return this.pn = this.p = 1, this.pHtml2(1);
    b < a && (a = b); var c = "";
    1 >= a ? a = 1 : (c += this.pHtml(a - 1, b, pageNav.pre), c += this.pHtml(1, b, "1"));
    this.p = a;
    this.pn = b;
    //这里的e=10表示的是当前显示10个页码，后面的d=a-4和e=a+4表示的是点击...之后每次增加4个页码或减少4个页码
    var d = 2, e = 10 > b ? b : 10; 7 <= a && (c += "...", d = a - 4, e = a + 4, e = b < e ? b : e);
    for (; d < a; d++)
        c += this.pHtml(d, b);
    c += this.pHtml2(a);
    for (d = a + 1; d <= e; d++)
        c += this.pHtml(d, b);
    e < b && (c = c + "..." + this.pHtml(b, b));
    a < b && (c += this.pHtml(a + 1, b, pageNav.next));
    return c;
};
pageNav.pHtml = function (a, b, c) {
    return " <a href='javascript:pageNav.go(" + a + "," + b + ");' class='pageNum'>" + (c || a) + "</a> "
};
pageNav.pHtml2 = function (a) {
    
    if (a == 1 && _pagesumcount==1) {
        
        return "";
    }
    if (_pagesumcount==0) {
        return "";
    }
  
    return " <span class='cPageNum'>" + a + "</span> "
};
pageNav.go = function (a, b) {
   var content= this.nav(a, b);
       if(document.getElementsByClassName){
           all=document.getElementsByClassName('pageNav');
           
       }else{
        all=getElementsByClassName(document,'pageNav');
    }
    for(var i=0;i<all.length;i++){
        var one=all[i];
        one.innerHTML =content;
    }
    null != this.fn && this.fn(this.p, this.pn);
};

function getElementsByClassName(node,classname) {
  if (node.getElementsByClassName) { // use native implementation if available
    return node.getElementsByClassName(classname);
  } else {
    return (function getElementsByClass(searchClass,node) {
        if ( node == null )
          node = document;
        var classElements = [],
            els = node.getElementsByTagName("*"),
            elsLen = els.length,
            pattern = new RegExp("(^|\\s)"+searchClass+"(\\s|$)"), i, j;

        for (i = 0, j = 0; i < elsLen; i++) {
          if ( pattern.test(els[i].className) ) {
              classElements[j] = els[i];
              j++;
          }
        }
        return classElements;
    })(classname, node);
  }
}
 
//---------
         
function LoadNav(sum,smallPageUrl,perCount,contentDomID) {
            pageNav.pre = '前一页';
            pageNav.next = '下一页';
            pageNav.fn = function (currentPageIndex, pageSum) {
                GetPage(currentPageIndex,smallPageUrl,perCount,contentDomID); 
            };
            pageNav.go(1, sum);
    }
    
function GetPage(currentPageIndex,smallPageUrl,perCount,contentDomID) {
            $.ajax({
                url: smallPageUrl,
                async: true,
                cache: false,
                data: { pageIndex: currentPageIndex, pageSize: perCount },
                success: function (html) {
                    $('#'+contentDomID).html(html);
                }
      });
}      
function MoonPager()
{
    this.LoadPager= function(sumDataCountUrl,smallPageUrl,perCount,contentDomID) {
            $.get(sumDataCountUrl,{}, function (ret) {
                var a = 0;
                if (ret % perCount == 0) {
                    a = ret / perCount;
                } else {
                    a = Math.floor(ret / perCount) + 1;
                }
                LoadNav(a,smallPageUrl,perCount,contentDomID);
            });
     }
}        

 

 

4.2所需样式

?

1 2 3 4 5 6 7 8

.pageNav a { color:#2B4A78; text-decoration:none;margin-right:1px; }         .pageNav a:hover { color:#2B4A78;text-decoration:underline; }         .pageNav  a:focus,         .pageNav input:focus {outline-style:none; outline-width:medium; }         .pageNav .pageNum{border: 1px solid #999;padding:2px 8px;display: inline-block;}         .pageNav .cPageNum{font-weight: bold;padding:2px 5px;}         .pageNav  a:hover{text-decoration:none;background: #fff4d8; }         .pageNav {text-align:right;margin-right:5px;margin-top:5px;margin-bottom:5px;}

5.Url分页的使用方式

var pager=Moon.Orm.Util.PagerUtil.GetUrlPager("........自己浏览参数");
var UrlPagerControl=pager.UrlPagerControl;
var List=pager.Data;

前端:

List 用于数据遍历

UrlPagerControl 用于显示导航控件.

 

六、直接运行的Demo

代码:http://share.weiyun.com/89b3183df903d66f5db3b0f2a16e4b8b