尽管市场上已有各种各样的分页控件，但是针对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="#" 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="#" 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="#" 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,"none");
dojo.style(this.btnNext,"none"); }
else if (this._currentPageIndex == 1 && this._totalPages == 0) {
dojo.style(this.btnFirst,"none"); }
else if (this._currentPageIndex == 1 && this._totalPages == 1) {
dojo.style(this.btnFirst,"none");
this.noResultInfo.innerHTML = "";
dojo.style(this.btnPrev,"none"); }
else if (this._currentPageIndex == 1 && this._totalPages <= 10 && this._totalPages > 0) {
// 首页选中
dojo.style(this.btnFirst,"block");
var startPageNo = 1;
var endPageNo = value.totalPages;
this.createCurrentPageNo(startPageNo,endPageNo);
} else if (this._currentPageIndex == 1 && this._totalPages > 10) {
// 首页选中
dojo.style(this.btnFirst,"block");
var startPageNo = 1;
var endPageNo = 10;
this.createCurrentPageNo(startPageNo,endPageNo);
} else if (this._currentPageIndex == this._totalPages && this._totalPages > 10) {
// 尾页选中
dojo.style(this.btnFirst,"block");
this.noResultInfo.innerHTML = "";
dojo.style(this.btnPrev,"block");
dojo.style(this.btnNext,"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,"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,"block");
dojo.style(this.btnPrev,"block");
dojo.style(this.btnNext,"block");
},
上面代码的主要原理是，在后端返回给前端数据之后，前端根据当前页索引，总页数计算需要显示首页、上一页、尾页以及页码等。在进行页面显示之前，需要先清除原来的页码，以免影响新页码的展示。在createCurrentPageNo中，var dijit = new com.CrossITWorld.widget.dm.searchuse.pagination.dijit.PageNumber(pageNum);只是动态创建一个页码（1,2,3...），这样我们就可以根据自己的喜欢的样式创建页码，而且如果将页码数字更改为第X页，也比较容易，具有良好的扩展性。
接下来，就看一下这个分页的效果吧。当前页是11页，可以向前，向后翻页，也可以回到首页。页面展示清晰、简单、明了，易用。尽管现在实现了分页的功能，却并没有通用性，如果将其封装为一个组件，再加上几组自定义的样式，这个东西就很完美了。
版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 dio@foxmail.com 举报，一经查实，本站将立刻删除。