我用Dojo做了個自定義分頁

    　盡管市場上已有各種各樣的分頁控件，但是針對Dojo的分頁，還沒有如此一個獨立的dijit。借着項目開發的機會，順手做了個分頁。這個分頁與普通搜尋引擎（百度、Google）的分頁還不太一樣，它有上一頁，下一頁，沒有尾頁，卻有首頁。之是以這樣做，一是項目需要，二是在滿足使用者需求的前提下，提高系統的性能。     　現在，我們就一起解密Dojo分頁的實作機制吧。。。     　首先，我們從頁面展示來分析資料，分頁上有：上一頁、下一頁、首頁、與頁碼序号。在這些頁面資料中，上一頁、下一頁與首頁是靜态的資料，它隻和目前頁是否為第一頁和最後一頁有空，我們可以根據目前頁是否為首頁或者尾頁，進行首頁與尾頁的展示或隐藏。而頁面上的頁碼則需要根據目前頁的索引與總頁數來展示，為了頁面的美觀，我們選擇隻顯示目前頁的前五條與後五條。在Dojo下面，我們是如何生成頁碼，并且生成分頁呢？   　

    　接下來，看Dojo分頁的頁面展示代碼，這些代碼顯示了頁面的結構。

<div class="ecm ecmUnifySearchPagination" data-dojo-attach-point="ecmUnifySearchPagination"> 
    <div style="display: inline-block;text-align: center;" >
        <div class="pgPrevious" style="display: inline-block">
            <a href="#" target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  data-dojo-attach-point="btnPrev" 
                data-dojo-props='iconClass: "ecmIconPrevious", showLabel: true'
                data-dojo-attach-event="onclick: _onPrevButtonClick">${resourceBundle.previous}</a>
        </div>
        <div class="pgFirst" style="display: inline-block;">
            <a href="#" target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  data-dojo-attach-point="btnFirst" 
                data-dojo-attach-event="onclick: _onFirstClick">1</a>
        </div>
        <div class="pageNumber" style="display: inline-block">
            <span data-dojo-attach-point="pageNumber"></span>
        </div>
        <div class="pgNext" style="display: inline-block">
            <a href="#" target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  data-dojo-attach-point="btnNext" 
                data-dojo-props='iconClass: "ecmIconNext", showLabel: true'
                data-dojo-attach-event="onclick: _onNextButtonClick">${resourceBundle.next}</a>
        </div>
    </div>    
</div>

           

　　單單這些HTML代碼，我們看不出分頁具體是如何做的，接下來看背景是如何通過JS控制界面分頁資料的展示的。

setButtonStatus : function(value) { 
        this.destroyOldPager();
        if (value) {
            dojo.style(this.ecmUnifySearchPagination, "visibility", "visible");
            this._currentPageIndex = value.currentPageIndex;
            this._totalPages = value.totalPages;
            this._totalNum = value.totalNum;
            if (this._totalNum == 0) {                
                dojo.style(this.btnFirst, "display", "none");
                dojo.style(this.btnPrev, "display", "none");
                dojo.style(this.btnNext, "display", "none");            } 
            else if (this._currentPageIndex == 1 && this._totalPages == 0) {
                dojo.style(this.btnFirst, "display", "none");
                dojo.style(this.btnPrev, "display", "none");
                dojo.style(this.btnNext, "display", "none");            } 
            else if (this._currentPageIndex == 1 && this._totalPages == 1) {
                dojo.style(this.btnFirst, "display", "none");
                this.noResultInfo.innerHTML = "";
                dojo.style(this.btnPrev, "display", "none");
                dojo.style(this.btnNext, "display", "none");            } 
            else if (this._currentPageIndex == 1 && this._totalPages <= 10 && this._totalPages > 0) {
                // 首頁選中
                dojo.style(this.btnFirst, "display", "none");
                this.noResultInfo.innerHTML = "";
                dojo.style(this.btnPrev, "display", "none");
                dojo.style(this.btnNext, "display", "block");
                var startPageNo = 1;
                var endPageNo = value.totalPages;
                this.createCurrentPageNo(startPageNo, endPageNo);
            } else if (this._currentPageIndex == 1 && this._totalPages > 10) {
                // 首頁選中
                dojo.style(this.btnFirst, "display", "none");
                this.noResultInfo.innerHTML = "";
                dojo.style(this.btnPrev, "display", "none");
                dojo.style(this.btnNext, "display", "block");
                var startPageNo = 1;
                var endPageNo = 10;
                this.createCurrentPageNo(startPageNo, endPageNo);
            } else if (this._currentPageIndex == this._totalPages && this._totalPages > 10) {
                // 尾頁選中
                dojo.style(this.btnFirst, "display", "block");
                this.noResultInfo.innerHTML = "";
                dojo.style(this.btnPrev, "display", "block");
                dojo.style(this.btnNext, "display", "none");
                var startPageNo = this._totalPages - 9;
                var endPageNo = value.totalPages;
                this.createCurrentPageNo(startPageNo, endPageNo);
            } else if (this._currentPageIndex <= 5 && this._totalPages >= 10) {
                this._showNavgination();
                var startPageNo = 2;
                var endPageNo = 10;
                this.createCurrentPageNo(startPageNo, endPageNo);
            } else if (this._totalPages <= 10 && this._currentPageIndex != this._totalPages && this._totalPages > 0) {
                this.noResultInfo.innerHTML = "";
                this._showNavgination();
                var startPageNo = 1;
                var endPageNo = this._totalPages;
                this.createCurrentPageNo(startPageNo, endPageNo);
            } else if (this._totalPages <= 10 && this._currentPageIndex == this._totalPages) {
                dojo.style(this.btnPrev, "display", "block");
                dojo.style(this.btnNext, "display", "none");
                var startPageNo = 1;
                var endPageNo = this._totalPages;
                this.createCurrentPageNo(startPageNo, endPageNo);
            } else if (this._currentPageIndex > 5 && this._totalPages - this._currentPageIndex >= 4) {
                this._showNavgination();
                var startPageNo = this._currentPageIndex - 4;
                var endPageNo = this._currentPageIndex + 4;
                this.createCurrentPageNo(startPageNo, endPageNo);            } 
            else if (this._totalPages > 10 && this._totalPages - this._currentPageIndex < 4) {
                this._showNavgination();
                var startPageNo = this._totalPages - 9;
                var endPageNo = this._totalPages;
                this.createCurrentPageNo(startPageNo, endPageNo);
            }
        }
    },

    destroyOldPager : function() { 
        var childrenNum = this.pageNumber.children.length;
        for ( var i = childrenNum; i > 0; i--) {
            dojo.destroy(this.pageNumber.children[i - 1]);
        }
    },

    createCurrentPageNo : function(startPage, endPage) {
        for ( var i = startPage; i <= endPage; i++) {
            var pageNum = {
                pageNo : i
            };
            var dijit = new com.CrossITWorld.widget.dm.searchuse.pagination.dijit.PageNumber(pageNum);
            dijit.loadPageNumber(pageNum);
            if (this._currentPageIndex == i) {
                dijit.addCurrentPageStyle();
            }
            dojo.connect(dijit, "onShowCurrentPage", this, this._onShowCurrentPage);
            this.pageNumber.appendChild(dijit.domNode);
        }
    },

    _showNavgination : function() {
        dojo.style(this.btnFirst, "display", "block");
        dojo.style(this.btnPrev, "display", "block");
        dojo.style(this.btnNext, "display", "block");
    },

           

　　上面代碼的主要原理是，在後端傳回給前端資料之後，前端根據目前頁索引，總頁數計算需要顯示首頁、上一頁、尾頁以及頁碼等。在進行頁面顯示之前，需要先清除原來的頁碼，以免影響新頁碼的展示。在createCurrentPageNo中，var dijit = new com.CrossITWorld.widget.dm.searchuse.pagination.dijit.PageNumber(pageNum);隻是動态建立一個頁碼（1,2,3...），這樣我們就可以根據自己的喜歡的樣式建立頁碼，而且如果将頁碼數字更改為第X頁，也比較容易，具有良好的擴充性。

   　 接下來，就看一下這個分頁的效果吧。目前頁是11頁，可以向前，向後翻頁，也可以回到首頁。頁面展示清晰、簡單、明了，易用。盡管現在實作了分頁的功能，卻并沒有通用性，如果将其封裝為一個元件，再加上幾組自定義的樣式，這個東西就很完美了。