当前位置： 移动技术网 > IT编程>网页制作>CSS > 一个doT分页的demo（代码实例）

一个doT分页的demo（代码实例）

2018年03月28日  | 移动技术网IT编程  | 我要评论

除了jQuery外，需要导入3个js，

<script type="text/javascript" src="js/doT.min.js">script>
<script type="text/javascript" src="js/jquery.pagination.js">script>
<script type="text/javascript" src="js/my.page.js">script>
直接上my.page.js代码：
var Page = (function(obj) {
    var pageInfo={
        pageSize:10,
        currentPage:1,
        totalPage:0,
        totalNumber:0
    },param={},arry=[],url="",TPL="",el="",pageEl="";

    obj.init = function(el,tplEl,pageEl,url){
        this.TPL =  doT.template(tplEl.text());
        this.el = el;
        this.pageEl = pageEl;
        this.url = url;
    }
    obj.setQueryParam = function(param){
        this.param = param;
    }
    obj.render = function(){

        var _this = this;
        var data = {
            arry:_this.arry,
            pageInfo:_this.pageInfo

        }
        _this.el.empty().html(_this.TPL(data));

        $("#resultNum").text(_this.pageInfo.totalNumber);

        if(_this.pageInfo.totalNumber!=0){
            $("#page").pagination({
                totalData: _this.pageInfo.totalNumber,
                showData: _this.pageInfo.pageSize,
                current:_this.pageInfo.currentPage,
                mode: 'fixed',
                callback: function (api) {
                    _this.param['queryKey:pageIndex'] = api.getCurrent();
                    _this.getData();
                }
            });
            $("#page").append($('10条20条30条'))

            $("#pageSizeSelect").val(_this.pageInfo.pageSize);
            $("#page").show();
        }else{
            $("#page").hide();
        }
    }
    obj.pageSizeChange = function(size){
        this.param['queryKey:pageIndex'] = 1;
        this.param['queryKey:pageSize'] = size;

        this.getData();
    }
    obj.getData = function(){
        var _this = this;
        $.ajax({
            type : "POST",
            dataType : "xml",
            data:_this.param,
            url :_this.url,
            success : function(data) {
                var errCode = _getXmlNodeValue(data,"context>error-code");
                if( errCode != '000000' ){
                    var errDesc = _getXmlNodeValue(data,"context>error-desc");
                    alert( '处理错误[' + errCode + '] ==> ' + errDesc );
                    return;
                }
                var listStr = _getXmlNodeValue(data,"context>result>list");
                var pageInfoStr = _getXmlNodeValue(data,"context>result>pageInfo");

                _this.pageInfo = JSON.parse(pageInfoStr);
                _this.arry = JSON.parse(listStr);

                _this.render();


            },
            error : function(data) {
                alert(data);
            }
        });
    }


    return obj;
})(window.Page || {});

需要加上自己的默认分页查询：

/*配置分页*/
    Page.init($("#resultContent"),$("#tpl"),$("#page"),"/action.ajax");


    /*默认查询*/
    var PARAM_FILTER = {};
    PARAM_FILTER['queryKey:pageIndex'] = 1;
    PARAM_FILTER['queryKey:pageSize'] = 10;
    Page.setQueryParam(PARAM_FILTER);
    Page.getData();

加上Pagination：

public class Pagination {

    /** 每页显示条数 */
    private Integer pageSize = 10;

    /** 当前页 */
    private Integer currentPage = 1;

    /** 总页数 */
    private Integer totalPage = 1;

    /** 查询到的总数据量 */
    private Long totalNumber = 0L;

    public Pagination() {
    }

    public Pagination(Integer pageIndex,Integer pageSize,Long totalNumber) {
        this.pageSize = pageSize;
        this.currentPage = pageIndex;
        this.totalNumber = totalNumber;
        int pisor = (int) (this.totalNumber / this.pageSize);
        int remainder = (int) (this.totalNumber % this.pageSize);
        this.totalPage = remainder == 0 ? pisor == 0 ? 1 : pisor : pisor + 1;
    }

    public Integer getPageSize() {
        return pageSize;
    }

    public void setPageSize(Integer pageSize) {
        this.pageSize = pageSize;
    }

    public Integer getCurrentPage() {
        return currentPage;
    }

    public void setCurrentPage(Integer currentPage) {
        this.currentPage = currentPage;
    }

    public Integer getTotalPage() {
        return totalPage;
    }

    public void setTotalPage(Integer totalPage) {
        this.totalPage = totalPage;
    }

    public Long getTotalNumber() {
        return totalNumber;
    }

    public void setTotalNumber(Long totalNumber) {
        this.totalNumber = totalNumber;
    }
}

您可能感兴趣的文章:

如对本文有疑问， 点击进行留言回复！！

相关文章:

验证码：
最近更新的文章
大家感兴趣的文章
移动技术网