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

一、概述

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

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

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

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

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

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

二、效果预览

三、ajax分页的使用方式

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

后台代码:

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);
				}
			}

页面代码:

<%@ 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所需样式

 .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 用于显示导航控件.