【自然框架】js版的QuickPager分頁控件 V2.0

優點：

1、  通過更換模板可以控制各個分頁元素（比如首頁、末頁，頁號導航等）的位置和是否顯示。

2、  通過更換css可以實現各種UI風格和效果。（附帶24套css效果）

3、  Js的方式創建分頁UI，不占用服務器資源。

4、  可以通過插件的方式更換各部分js代碼。如果自帶的js代碼不能滿足您的需求，那么您自己寫的插件實現需要的效果。

5、  Ajax的方式獲取記錄集，減輕網絡負擔。

6、  多種調用方式，讓“偷懶”和靈活共存。

缺點：

1、  不支持SEO。因為用js和ajax，所以不支持搜索引擎的收錄。

2、  不支持服務器端控件，比如GridView。

 

內容介紹：

1、  模板

　　設置一個htm頁面，存放分頁用的模板，這樣只要保證及格ID不變，其他的都可以隨意編排，想怎么編排就怎么編排，限制降到最低。模板如下： 

<div id="PageTurn" class="pager" >
    <span >共<font id="P_RecordCount" style="color:Red;"></font>條記錄</span>
    <span >第<font id="P_Index" style="color:Red;"></font>/<font id="P_PageCount" style="color:Red;"></font>頁</span>
    <span >每頁<font id="P_PageSize" style="color:Red;"></font>條記錄</span>
    <span id="S_First" class="disabled" >首頁</span>
    <span id="S_Prev"  class="disabled" >上一頁</span>
    <span id="S_navi"><!--頁號導航--></span>
    <span id="S_Next"  class="disabled" >下一頁</span>
    <span id="S_Last"  class="disabled" >末頁</span>
    <input id="Txt_GO" class="cssTxt" name="Txt_GO" type="text" size="1"  /> 
    <span id="P_GO" >GO</span>
</div>

　　

2、  Css

　　用css來控制UI樣式。這樣更換css文件就可以實現更換風格。前一陣子有園友分享了24套樣式，借鑒了一下。在這里大家一起感謝園友的分享。 

div.pager {
    text-align: center; padding-bottom: 10px; background-color: #000; margin: 3px; padding-left: 3px; padding-right: 3px; color: #a0a0a0; font-size: 80%; padding-top: 10px
}
div.pager a {
    background-image: url(bar.gif); border-bottom: #909090 1px solid; border-left: #909090 1px solid; padding-bottom: 2px; padding-left: 5px; padding-right: 5px; background-position: 50% bottom; color: #c0c0c0; border-top: #909090 1px solid; margin-right: 3px; border-right: #909090 1px solid; text-decoration: none; padding-top: 2px
}
div.pager a:hover {
    background-image: url(invbar.gif); border-bottom: #f0f0f0 1px solid; border-left: #f0f0f0 1px solid; background-color: #404040; color: #ffffff; border-top: #f0f0f0 1px solid; border-right: #f0f0f0 1px solid
}
div.pager a:active {
    background-image: url(invbar.gif); border-bottom: #f0f0f0 1px solid; border-left: #f0f0f0 1px solid; background-color: #404040; color: #ffffff; border-top: #f0f0f0 1px solid; border-right: #f0f0f0 1px solid
}
div.pager span.current {
    border-bottom: #ffffff 1px solid; border-left: #ffffff 1px solid; padding-bottom: 2px; background-color: #606060; padding-left: 5px; padding-right: 5px; color: #ffffff; border-top: #ffffff 1px solid; font-weight: bold; margin-right: 3px; border-right: #ffffff 1px solid; padding-top: 2px
}
div.pager span.disabled {
    border-bottom: #606060 1px solid; border-left: #606060 1px solid; padding-bottom: 2px; padding-left: 5px; padding-right: 5px; color: #808080; border-top: #606060 1px solid; margin-right: 3px; border-right: #606060 1px solid; padding-top: 2px
}
 

 

3、  Js腳本

　　分為三個部分，默認值、主體和擴展。

　　默認值就不用多說了，要想讓分頁能夠順利跑起來需要設置很多屬性，但是過多的屬性設置就很煩了，於是就有了“默認值”。常用的屬性值作為默認屬性，這樣在調用的時候就不用重復設置一大堆的屬性了。

Nature.Page.QuickPagerDefaultInfo = { 
    recordCount: -1,        //總記錄數
    pageSize: 10,           //一頁記錄數
    pageCount: -1,          //總頁數，不用設置，根據上兩個條件自動計算
    thisPageIndex: 1,       //當前頁號
    beforePageIndex: 1,     //上一次的頁號
    //lastPageIndex: 0,     //最后一頁的頁號，自動計算

    naviCount:7,            //頁號導航的數量
    isUseRecordCount: true,   //是否使用緩存的總記錄數

    pageTurnDivIDs: "",           //放置分頁控件的div的id，可以是多個，用半角逗號分隔
    
    //分頁控件模板的路徑和文件名
    templetPath:"/aspnet_client/QuickPager/PageTurn2.htm",  
    //分頁控件css文件的路徑和文件名
    cssPath: "/aspnet_client/QuickPager/skin/default/pager.css",
     
    OnPageChange: function () { },  //翻頁的事件
    NaviCreate: function () { },    //創建頁號導航
    SetPageUI: function () { },    //設置分頁UI
    RegPagerEvent: function () { }    //注冊分頁UI的事件，不包括頁號導航的事件
    
    
};

 

　　主體，這個主體有一點MVC里的C的感覺——總體上的控制：加載模板、設置UI、創建頁號導航、注冊翻頁事件等等。他本身並不實現具體的功能，而是把這些功能組合起來。

//js版的QuickPager
Nature.Page.QuickPager = function () {
    this.pagerInfo = {};
    this.Start = function (callback) {
        //設置默認值
        setDefaultInfo(this.pagerInfo);
        var info = this.pagerInfo;

        //設置css。如果沒有設置，則不動態加載
        if (info.cssPath != undefined)
            Nature.CommonFunction.addStyle(info.cssPath);

        //加載模板
        $.get(info.templetPath, function (data) {
            //alert("加載分頁模板成功");

            //模板放到div里面
            var tmpdiv = info.pageTurnDivIDs.split(",");
            $("#" + tmpdiv[0]).html(data);

            if (info.recordCount != -1) info.SetPageUI(info); //設置分頁UI

            info.RegPagerEvent(info); //注冊事件（僅限上一頁、下一頁、首頁、末頁，不包括頁號導航）
            info.NaviCreate(info); //設置頁號導航

            //調用外部函數，提取記錄創建table
            info.OnPageChange(0, 1);

            if (callback != undefined)
                callback(); //回調

            //克隆多個分頁UI
            if (tmpdiv.length > 1) {
                window.setTimeout(function () {
                    var pageHtml = $("#" + tmpdiv[0]).clone(true);
                    for (var i = 1; i < tmpdiv.length; i++) {
                        $("#" + tmpdiv[i]).html(pageHtml);
                    }
                }, 100);
            }

        });
    };

    //設置默認值
    var setDefaultInfo = function (a) {
        var b = Nature.Page.QuickPagerDefaultInfo;
        if (a.recordCount == undefined) a.recordCount = b.recordCount;
        if (a.pageSize == undefined) a.pageSize = b.pageSize;
        if (a.pageCount == undefined) a.pageCount = b.pageCount;
        if (a.thisPageIndex == undefined) a.thisPageIndex = b.thisPageIndex;
        if (a.beforePageIndex == undefined) a.beforePageIndex = b.beforePageIndex;
        if (a.isUseRecordCount == undefined) a.isUseRecordCount = b.isUseRecordCount;
        if (a.naviCount == undefined) a.naviCount = b.naviCount;

        if (a.templetPath == undefined) a.templetPath = b.templetPath;

        if (a.NaviCreate == undefined) a.NaviCreate = Nature.Page.QuickPagerExtend.CreateNavi;
        if (a.SetPageUI == undefined) a.SetPageUI = Nature.Page.QuickPagerExtend.SetPageUI;
        if (a.RegPagerEvent == undefined) a.RegPagerEvent = Nature.Page.QuickPagerExtend.RegPagerEvent;

    };
}; 

　　

　　擴展，每一個功能都作為了一個擴展插件的形式，比如創建頁號導航。頁號導航有很多總形式，一中形式肯定不能滿足所有人的需求，那么怎么辦呢？把每種形式都羅列出來嗎？這樣整個分頁代碼就會比較臃腫。所以就想到了這種擴張的形式。在主體外面實現頁號導航的功能，在主體里調用。如果自帶的不能滿足，那么可以把自己寫一個替換掉自帶的。而總體結構不會發生變化。達到了“對擴展開放，對修改關閉”。

 

使用方法：

1、  設置“屬性”。

　　雖然屬性有很多，但是最低只需要設置兩個屬性——總記錄數和存放分頁控件的容器ID。

　　不設置總記錄數，就不知道有多少頁，頁號導航就做不出來，UI也沒法控制。而總記錄數又沒法設置默認值。

　　存放分頁控件的容器ID，簡單的說就是DIV的ID，當然也可以放在td里面，只要設置好ID就行。如果要實現上下兩個分頁UI，那么只需要把這兩個ID用半角逗號分割，設置上就行。

2、  設置事件。

　　翻頁的時候觸發的事件。Js的事件處理真的是太簡單了，就跟屬性一樣。弄個function就可以了。

　　翻頁的時候觸發OnPageChange ，傳遞過來兩個參數，一個是翻頁前的頁號(oldPageIndex)，一個是要翻到哪一頁( thisPageIndex)。

3、  開始呈現。

　　屬性和事件設置好了之后就可以呈現了。調一個函數就可以，內部會自動調用OnPageChange(0,1)來呈現第一頁的數據。如果呈現之后還要做點什么的話，可以加一個回調函數。

 window.onload = function () {

        var page = new Nature.Page.QuickPager();

        //設置相關屬性
        page.pagerInfo = {
            recordCount: 102,       //總記錄數
            //pageSize: 10,           //一頁記錄數
            pageTurnDivIDs: "divQuickPage1",         //放置分頁控件的div的id，可以是多個，用半角逗號分隔

            //翻頁的事件
            OnPageChange: function (oldPageIndex, thisPageIndex) {
                alert("翻頁前頁號：" + oldPageIndex);
                alert("翻頁后頁號：" + thisPageIndex);

                //可以自行獲取記錄，創建table
            }
        };

        //開始
        page.Start(function () {
            //內部自動調用OnPageChange(0,1)。
        });

    };

 

在線演示：

http://www.naturefw.com/test/quickpager/PageTurn01.htm  

可以更換模板，可以更換css

  

鳴謝!

　　感謝群里的兄弟們幫忙做測試，發現了幾個小bug和沒注意到的地方。

　　如果大家也挺感興趣的話，歡迎加群：82598514