我用Dojo做了个自定义分页

前端之家收集整理的这篇文章主要介绍了我用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="#" 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页,可以向前,向后翻页,也可以回到首页页面展示清晰、简单、明了,易用。尽管现在实现了分页功能,却并没有通用性,如果将其封装为一个组件,再加上几组自定义的样式,这个东西就很完美了。
原文链接:https://www.f2er.com/dojo/291580.html

猜你在找的Dojo相关文章