vue angular 分别实现分页

1 vue实现分页组件

paginate组件

<template>
  <div class="pagination-wrap" v-cloak v-if="totalPage!=0">
      <ul class="pagination">
        <li :class="currentPage==1?'disabled':''"><a href="javascript:;" @click="turnToPage(1,pageInfo.pagesize)">首页</a></li>
        <li :class="currentPage==1?'disabled':''"><a @click="turnToPage(currentPage-1,pageInfo.pagesize)" href="javascript:;">上一页</a></li>
        <li><a href="javascript:;" @click="turnToPage(currentPage-2,pageInfo.pagesize)" v-text="currentPage-2" v-if="currentPage-2>0"></a></li>
        <li><a href="javascript:;" @click="turnToPage(currentPage-1,pageInfo.pagesize)" v-text="currentPage-1" v-if="currentPage-1>0"></a></li>
        <li class="active"><a href="javascript:;" @click="turnToPage(currentPage,pageInfo.pagesize)" v-text="currentPage">3</a></li>
        <li><a href="javascript:;" @click="turnToPage(currentPage+1,pageInfo.pagesize)" v-text="currentPage+1" v-if="currentPage+1<=totalPage"></a></li>
        <li><a href="javascript:;" @click="turnToPage(currentPage+2,pageInfo.pagesize)" v-text="currentPage+2" v-if="currentPage+2<=totalPage"></a></li>
        <li :class="currentPage==totalPage?'disabled':''"><a href="javascript:;" @click="turnToPage(currentPage+1,pageInfo.pagesize)" >下一页</a></li>
        <li :class="currentPage==totalPage?'disabled':''"><a href="javascript:;" @click="turnToPage(totalPage,pageInfo.pagesize)">尾页</a></li>
        <li class="curPagesize">
            <select v-model="pageInfo.pagesize">
                <option value="10">10</option>
                <option value="15">15</option>
                <option value="20">20</option>
                <option value="50">50</option>
            </select>
        </li>
       </ul>
    <small class="small nowrap"> 当前第 <span class="text-primary" v-text="currentPage"></span> 页，共有 <span class="text-primary" v-text="totalPage"></span> 页</small>
    <div class="go">
      <div :class="isPageNumberError?'input-group error':'input-group'">
        <input class="form-control" type="number" min="1" max="totalPage" v-model="goToPage"><a href="javascript:;" class="input-group-addon" @click="turnToPage(goToPage,pageInfo.pagesize)">Go</a>
      </div>
    </div>
  </div>
</template>

<script type="text/javascript">
export default {
    props: {
        //传入总条数，默认0，可以对传入的值进行自定义的验证，具体方式如下
        total: {
            type: Number,
              default: 0,
            validator(value) {
                return value >= 0
            }
        }, 
        //传入每页的条数，默认为10
        currentPagesize:{
            type: Number,
              default: 10,
            validator(value) {
                return value >= 0
            }
        },
        //传入当前页码，默认为1
        fatherCurrentPage:{
            type: Number,
              default: 1,
            validator(value) {
                return value >= 0
            }
        }
    },
    data(){
        return {
            isPageNumberError: false,
            goToPage:'',
            totalPage:'',
            childCurrentPage:this.fatherCurrentPage,
            pageInfo:{
                pagesize:this.currentPagesize,
                pageNum:this.fatherCurrentPage
            }
        }
    },
    computed:{
        // prop不应该在组件内部做改变
        // 所以我们这里设置一个内部计算属性currentPage来代替props中的myCurrentPage
        currentPage(){ 
            return this.childCurrentPage;
        },
        pagesizeCp(){
            return this.pageInfo.pagesize
        }
    },
    created:function(){
        this.totalPage = Math.ceil(this.total/this.pageInfo.pagesize);
    },
    watch:{
        pagesizeCp:function(curVal,oldVal){
            console.log("new:"+curVal+",old:"+oldVal);
            this.childCurrentPage = Math.ceil(this.childCurrentPage*oldVal/curVal);
            this.totalPage = Math.ceil(this.total/curVal);
            if(this.childCurrentPage > this.totalPage){
                this.childCurrentPage = this.totalPage;
            }
            this.turnToPage(this.pageInfo.pageNum,this.pageInfo.pagesize);
        }

    },
    methods:{
        //turnToPage为跳转到某页
        //传入参数pageNum为要跳转的页数，pagesize为每页多少条信息
        turnToPage( pageNum ,pagesize){
            var _self = this;
            var pageNum = parseInt(pageNum);
            var pagesize = parseInt(pagesize);
            //页数不合法则退出
            if (!pageNum || pageNum > _self.totalPage || pageNum < 1) {
                // console.log('页码输入有误！');
                _self.isPageNumberError = true;
                return false;        
            }else{
                _self.isPageNumberError = false;
            }
            //更新当前页
            _self.childCurrentPage = pageNum;
            //数据变化时将页码信息传回给父组件
            this.pageInfo.pageNum = pageNum;
            this.pageInfo.pagesize =pagesize;
            // 将最终获取到的页码信息传递个父组件的getInfo函数
            this.$emit('getInfo',this.pageInfo);
        }
    }
}
</script>

<style type="text/css">
.pagination-wrap{
    margin: 0 auto;
}
.pagination {
    display: inline-block;
    padding-left: 0;
    border-radius: 4px;
}
.small {
    margin: 0 10px;
    position: relative;
}
.nowrap {
    white-space: nowrap;
}
.input-group {
    position: relative;
    display: table;
    border-collapse: separate;
}
.input-group-addon {
    padding: 6px 12px;
    font-size: 14px;
    font-weight: 400;
    line-height: 1;
    color: #555;
    text-align: center;
    background-color: #eee;
    border: 1px solid #ccc;
    border-radius: 0 4px 4px 0;
}

.input-group-addon, .input-group-btn {
    width: 1%;
    white-space: nowrap;
    vertical-align: middle;
}
.input-group-addon, .input-group-btn, .input-group .form-control {
    box-sizing: border-box;
    display: table-cell;
}
.input-group .form-control:first-child, .input-group-addon:first-child, .input-group-btn:first-child>.btn, .input-group-btn:first-child>.btn-group>.btn, .input-group-btn:first-child>.dropdown-toggle, .input-group-btn:last-child>.btn:not(:last-child):not(.dropdown-toggle), .input-group-btn:last-child>.btn-group:not(:last-child)>.btn {
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
}
.input-group-addon, .input-group-btn, .input-group .form-control {
    display: table-cell;
}
.input-group .form-control {
    position: relative;
    z-index: 2;
    float: left;
    width: 100%;
    margin-bottom: 0;
}
.go .error .form-control{
    border: 1px solid #d95656;
}
.form-control {
    display: block;
    width: 100%;
    height: 34px;
    padding: 6px 12px;
    font-size: 14px;
    line-height: 1.42857143;
    color: #555;
    background-color: #fff;
    background-image: none;
    border: 1px solid #ccc;
    border-radius: 4px;
    -webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,.075);
    box-shadow: inset 0 1px 1px rgba(0,0,0,.075);
    -webkit-transition: border-color ease-in-out .15s,-webkit-box-shadow ease-in-out .15s;
    -o-transition: border-color ease-in-out .15s,box-shadow ease-in-out .15s;
    transition: border-color ease-in-out .15s,box-shadow ease-in-out .15s;
}
.text-primary {
    color: #428bca;
}
.pagination>li:first-child>a, .pagination>li:first-child>span {
    margin-left: 0;
    border-top-left-radius: 4px;
    border-bottom-left-radius: 4px;
}
.go {
    display: inline-block;
    max-width: 120px;
    top: 16px;
    position: relative;
}
.input-group-addon:last-child {
    display: table-cell;
    text-decoration: none;
    border-left: 0;
}
.pagination>.disabled>span, .pagination>.disabled>span:hover, .pagination>.disabled>span:focus, .pagination>.disabled>a, .pagination>.disabled>a:hover, .pagination>.disabled>a:focus {
    color: #777;
    cursor: not-allowed;
    background-color: #fff;
    border-color: #ddd;
}
.pagination>li:last-child>a, .pagination>li:last-child>span {
    border-top-right-radius: 4px;
    border-bottom-right-radius: 4px;
}
.pagination>.active>a, .pagination>.active>span, .pagination>.active>a:hover, .pagination>.active>span:hover, .pagination>.active>a:focus, .pagination>.active>span:focus {
    z-index: 2;
    color: #fff;
    cursor: default;
    background-color: #428bca;
    border-color: #428bca;
}
.pagination>li>a, .pagination>li>span{
    position: relative;
    float: left;
    padding: 6px 12px;
    margin-left: -1px;
    line-height: 1.42857143;
    color: #428bca;
    text-decoration: none;
    background-color: #fff;
    border: 1px solid #ddd;
}
.curPagesize{
    width:42px;
    color:blue;
    margin-left:5px;
}
.pagination>li>select{
    width:50px;
    height:33px !important;
    line-height:31px;
    padding:0 5px;
    margin-bottom:6px;
    border-color: #ddd;
    border-radius:5px;

}
.pagination>li {
    display: inline;
}
</style>

在父组件中进行引用

<template>
    <div id = "outletapp">
        <div class="data-body">
           <paginate :total='parentTotal' :currentPagesize="parentPagesize" :fatherCurrentPage="parentCurrentPage" @getInfo="getPageInfo"></paginate> 
        </div>
     </div>
</template>
<script>
//引入需要的组件
import paginate from '../components/paginate.vue'
   var vm = {
        name:'**',
        data:function(){
            return {
               parentTotal:0,
               parentCurrentPage:1,
               parentPagesize:10,
               queryParams:{
                  otherParams:'',
                  pagesize:10,
                  pageNum:1
               }
            }
        },
        watch:{
            queryParams:{
                handler:function(newVal,oldVal){
                    this.parentCallback(newVal);
                },
                deep:true
            }
        },
        methods:{
            querySearch:function(){
                console.log('search');
            },
            // 更新pageNum和pagesize重新渲染页面
            parentCallback:function(objParams){
                // 此处为获取的参数信息，包括查询信息和页码信息,可以根据这些参数信息进行请求数据
                console.log(objParams);
                // this.$http.post('url地址',objParams,{emulateJSON:true}).then(function(res){
                    var res= jsontest2;
                    this.parentTotal = parseInt(res.total);
                   },function(res){
                       var tem = JSON.parse(res.bodyText);
                       alert(tem.desc);
                   })
            },
            getPageInfo:function(obj){
                this.queryParams.pagesize = obj.pagesize;
                this.queryParams.pageNum = obj.pageNum;
                // parentCallback(this.queryParams);
            }
        },
        beforeCreate:function(){
            // 初始化请求一下数据
            var res= jsontest2;
            var tem = res;
            this.itemList = tem.rows;
            this.parentTotal = parseInt(tem.total);
        },
        created:function(){
            var _self = this;
            _self.parentCallback(_self.queryParams);
        },
        components:{
            paginate
        }
    }
 export default vm
</script>
<style> 
</style>

　　

angularjs实现分页指令

.directive('paginate', ['$http', function($http){
            return {
                scope: {
                    query: '&',
                    params: '=',
                    result: '=',
                    page: '=',
                    loading: '='
                },
                restrict: 'E',
                template: [
                    '<div style="margin-bottom: 40px;margin-left: 20px; margin-top: 20px;" ng-cloak>',
                        '<button ng-click="go(1)" class="p-btn p-btn-active margin_r10">首页</button>',
                        '<button ng-click="pre()" title="上一页" class="p-btn p-btn-active margin_r10"><<</button>',
                        '<button class="p-btn margin_r10" title="{{code}}" ng-click="go(code)" ng-class="{\'p-btn-active\': code == params.pageNum}" ng-repeat="code in codes">{{code}}</button>',
                        '<button ng-click="next()" title="下一页" class="p-btn p-btn-active margin_r10">>></button>',
                        '<input type="number" ng-model="goPage" min=1 max="{{pageCount}}" style="height: 24px;width: 50px;text-align: center;" />',
                        '<button class="p-btn p-btn-active margin_r10" title="跳转至" ng-click="go()">Go</button>',
                        '<span>共 {{pageCount}} 页， </span>',
                        '<span>共 {{result.total}} 条记录</span>',
                    '</div>'
                ].join(''),
                link: function($scope, iElm, iAttrs) {
                    $scope.codeNum = 5
                    $scope.codes = []
                    $scope.$watch('result', function() {
                        $scope.pageCount = getPageCount($scope.result.total, $scope.params.pageSize)
                        $scope.codes = getCodes($scope.pageCount, parseInt($scope.params.pageNum) ,$scope.codeNum)
                    })
                    // 计算总页数
                    function getPageCount(total, pageSize) {
                        var a = total%pageSize
                        if(a == 0) {
                            return parseInt(total/pageSize)
                        } else {
                            return parseInt(total/pageSize) + 1
                        }
                    }
                    // 计算页码显示
                    function getCodes(pageCount, index, codeNum){
                        if(pageCount <= codeNum) {
                            return getArray(1, pageCount)
                        } else {
                            if(index <= (codeNum + 1)/2) {
                                return getArray(1, codeNum)
                            }
                            if(index >= (pageCount- (codeNum - 1)/2)) {
                                return getArray(pageCount-codeNum+1, pageCount)
                            }
                            return getArray(index-(codeNum - 1)/2, index+(codeNum - 1)/2)
                        }
                    }

                    function getArray(start, end) {
                        var arr = []
                        for (var i = start; i <= end; i++) {
                            arr.push(i)
                        }
                        return arr
                    }

                    $scope.go = function(goPage) {
                        if(!goPage) {
                            if($scope.goPage)
                            goPage = $scope.goPage
                        }
                        if(goPage == $scope.params.pageNum) {
                            return
                        }
                        if(goPage == '0' || !goPage || goPage > $scope.pageCount || goPage < 0) {
                            return
                        } else {
                            $scope.page.index = goPage
                        }
                        $scope.query()
                    }
                    $scope.pre = function() {
                        if($scope.params.pageNum < 2) {
                            return 
                        } else {
                            $scope.page.index = $scope.params.pageNum -1
                        }
                        $scope.query()
                    }
                    $scope.next = function() {
                        if($scope.pageCount == 0){
                            return
                        }
                        if($scope.params.pageNum == $scope.pageCount) {
                            return 
                        } else {
                            $scope.page.index = $scope.params.pageNum + 1
                        }
                        $scope.query()
                    }
                }
            };
        }])

　　引用时将对应的改指令文件引入，在html里面写入

<paginate params="queryParams" result="queryResult" query="query()" page="paginate"></paginate>　　

　　对应的样式设置

.p-btn {
    border: none;
    cursor: pointer;
    color: #333;
    padding: 6px 14px;
    font-size: 12px;
    display: inline;
    background: #fff;
    border: solid 1px #30363e;
    height:30px;
}
.p-btn:hover {
    background-color: rgba(63, 74, 89, 0.5);
}
.p-btn-active {
    background-color: #3f4a59;
    color: #fff;
}