Backbone 自制分页组件

Posted 2020-10-26 carey一步

文件有：pagination.js 分页逻辑  paginationModel 分页数据模型  pagination.html  html模版

pagination.js 相关代码

define(function (require, exports, modules) {
    ‘use strict‘;


    var tpl = require(‘text!./pagination.html‘);

    var view = Backbone.View.extend({

        template: _.template(tpl),
        events:{
           ‘click li,.page-btn‘:‘changePageTrigger‘,
            ‘blur .unify-page-size input‘:‘changePageSize‘,
            ‘click .unify-page-goto button‘:‘gotoPageNum‘,
            ‘keypress .unify-page-size input‘:‘keySizeChange‘,
            ‘keypress .unify-page-goto input‘:‘keyNumChange‘
        },
        initialize: function () {

            _.bindAll(this,‘changePageTrigger‘,‘changePageSize‘,‘gotoPageNum‘,‘keySizeChange‘,‘keyNumChange‘);
            this.listenTo(this.model, ‘change‘, this.render);
        },
        render: function () {
            // 初始化viewer 并渲染
            this.$el.html(this.template(this.model.toJSON()));

            return this;
        },
        changePageTrigger:function(e){  

            e.preventDefault();
            var self = $(e.currentTarget);
            var pageNum = ‘‘;
            if(self.hasClass(‘disabled‘)) return false;

            if(self.hasClass(‘page-num‘)){
                pageNum = self.text();
            }else if(self.hasClass(‘previous‘)){

                pageNum = this.model.get(‘pageNum‘)-1;

            }else if(self.hasClass(‘next‘)){
                pageNum = this.model.get(‘pageNum‘) + 1;
            }

            this.gotoPageNum(Number(pageNum));

        },
        keySizeChange:function(event){
            if(event.keyCode == "13")
            {
                this.changePageSize(event);
            }
        },
        keyNumChange:function(event){
            if(event.keyCode == "13")
            {
                this.gotoPageNum();
            }
        },
        changePageSize:function(event){  //更改页面页数大小

            var self = $(event.currentTarget);
            if(self.val() > 1000000000){
                unifyComponent.unifyWarn("每页条数不能超过10亿");
                return false;
            }

            if(self.val()!="" && (!/^[0-9]*$/.test(self.val()))){ // 验证数字
                unifyComponent.unifyWarn("每页条数必须是整数");
                return false;
            }
            if(self.val() == 0){
                unifyComponent.unifyWarn("每页条数不能为0");
                return false;
            }
            if(this.model.get(‘pageSize‘) != self.val()){
                var pageCount = Math.ceil(this.model.get(‘totalCount‘) / self.val());

                var json =  _.extend({},this.model.toJSON(),{pageCount:pageCount,pageSize:self.val()});
                this.model.setBeforeHandle(json,true);
                this.trigger(‘page‘, this.model.toJSON());  // 触发函数
            }
        },

        gotoPageNum:function(pageNum){ //更改页面当前页

            var page = _.isNumber(pageNum) ? pageNum : parseInt(this.$el.find(‘.unify-page-goto input‘).val());
            if(page > 1000000000){
                unifyComponent.unifyWarn("输入页数不能超过10亿");
                return false;
            }


            if(page!="" && (!/^[0-9]*$/.test(page))){ // 验证数字
                unifyComponent.unifyWarn("页数必须是整数");
                return false;
            }

            if(!page || page > this.model.get(‘pageCount‘)){
                unifyComponent.unifyWarn(‘输入错误超过总页数或者没输入‘);
                return false;
            }
            var json = _.extend({},this.model.toJSON(),{pageNum:page});
            this.model.setBeforeHandle(json); 

            this.trigger(‘page‘, this.model.toJSON()); // 触发函数

        }

    });

    return view;

});

　　paginationModel 对应代码

　　

/**
 * Created by carey on 16/6/28.
 */

define(function (require, exports, modules) {
    ‘use strict‘;


    var Model = Backbone.Model.extend({

        defaults:{

            first:false,//第一页
            last:true, //最后一页
            prev:false,//上一页
            next:true,//下一页
            hasPrevMore:false,  //是否有上一页
            hasNextMore:false, //是否有下一页
            visiblePages:5,// 展示页数宽带
            startPage:1,
            pageNum:1,
            pageSize:10,
            totalCount:0,
            pageCount:-1
        },
        getRequestPage:function(flag){

            var page = {};

            if(flag){
                this.set({pageNum:1,startPage:1},{silent:false});
            }

            page.pageNum = this.get(‘pageNum‘);
            page.pageSize = this.get(‘pageSize‘);
            // page.pageCount = this.get(‘pageCount‘);
            return {page:page};
        },
        setBeforeHandle:function(json){


            if( (json.pageNum == this.get(‘pageNum‘) && json.pageSize == this.get(‘pageSize‘) && json.pageCount == this.get(‘pageCount‘) && json.totalCount == this.get(‘totalCount‘))){

                return false;
            }


            json.prev = !(json.pageNum == 1);
            json.next = !(json.pageNum == json.pageCount);

            if(json.visiblePages >= json.pageCount || json.pageCount < 5){
                json.visiblePages = json.pageCount;
                json.hasPrevMore = false;
                json.hasNextMore = false;

                this.set(json);

                return false;
            }else{
                json.visiblePages = 5;
            }



            if((json.pageNum + json.visiblePages) >= json.pageCount) {

                json.startPage = json.pageCount - json.visiblePages+1;
            }

            var lastNum = json.visiblePages + json.startPage - 1;


            if(lastNum <= json.pageNum && lastNum != json.pageCount){
                json.startPage =  json.pageNum + 1;
                lastNum++;
            }

            json.hasNextMore = lastNum < json.pageCount;

            if(json.startPage >= json.pageNum && json.startPage != 1){

                json.startPage = json.pageNum == 1 ? json.pageNum : json.pageNum - 1;
            }


            json.hasPrevMore = json.startPage > 1;


            this.set(json);

        }

    });

    return Model;

});

　　pagination.html 对应代码

<%if(pageCount > 1 || totalCount > 10){%>

<div class="unify-page">
    <div class="unify-page-inner">
        <div class="unify-page-num">
            <ul>
                <li class="previous <%=prev ? ‘‘ : ‘disabled‘%>"><a>上一页</a></li>

                <%for(var i = startPage; i < visiblePages + startPage; i++){%>
                <%if(i == pageNum){%>
                <li class="page-num num active"><a href=""><%=i%></a></li>
                <%}else{%>
                <li class="page-num num"><a  href=""><%=i%></a></li>
                <%}%>
                <%}%>
                <li class="next <%=next ? ‘‘ : ‘disabled‘%>" ><a class="">下一页</a></li>
            </ul>
        </div>
        <div class="unify-page-goto">
            <input type="text" value="<%=pageNum%>" /><button>GO</button>
        </div>
        <div class="unify-page-info">
            共<%=pageCount%>页  <%if(totalCount==10001){%>共10000+条<%}else{%>共<%=totalCount%>条<%}%>
        </div>
        <div class="unify-page-size">
            每页显示 <input type="text" value="<%=pageSize%>"/> 条
        </div>
    </div>
</div>

<%}%>