接下来,看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, "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页,也比较容易,具有良好的扩展性。