码迷，mamicode.com
首页 > 其他好文 > 详细

vue angular 分别实现分页

时间：2018-04-20 11:42:10      阅读：181      评论：0      收藏：0      [点我收藏+]

标签：push   inline   pageinfo   middle   watch   display   get   page   order   

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;
}

　　

 

vue angular 分别实现分页

标签：push   inline   pageinfo   middle   watch   display   get   page   order   

原文地址：https://www.cnblogs.com/xhliang/p/8379197.html
踩
(0)
赞
(0)
   
举报
评论 一句话评论（0）
登录后才能评论！
分享档案
更多>
2021年07月29日 (22)
2021年07月28日 (40)
2021年07月27日 (32)
2021年07月26日 (79)
2021年07月23日 (29)
2021年07月22日 (30)
2021年07月21日 (42)
2021年07月20日 (16)
2021年07月19日 (90)
2021年07月16日 (35)
周排行
mamicode.com排行更多图片
更多
友情链接
兰亭集智   国之画   百度统计   站长统计   阿里云   chrome插件   新版天听网
关于我们 - 联系我们 - 留言反馈
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码！