本身作過度頁功能嗎?咱們一塊兒打造本身的分頁控件

1、概述

這些日子在作一套系統,基本上告了一段落,其中包括分頁相關的功能.

主要涉及:Url分頁和Ajax 分頁.而基本上開發中所用到的就這兩種,固然有其餘的方式,咱們就不說了.

爲何會談及這兩種分頁呢,緣由以下

ajax 分頁用戶體驗好,性能更好.

Url 分頁對於搜索引擎友好.

而作的這套系統兩方面都須要,故此從新設計了分頁方案.自認目前十分靈活便捷的分頁控件.

2、效果預覽

3、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>
<%}%>

　　

　　

 

4、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 用於顯示導航控件.

 

6、直接運行的Demo

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