vue分页器

来源：互联网发布：windows xp自带壁纸编辑：程序博客网时间：2024/06/11 03:45

第一种：按钮式

html

<div class="page" v-show="pageshow">
     <div class="p">
        <button class="from" @click=startPage()>首页</button>
        <button @click=prvePage() :class="readonly1==1?'forbid':''">&lt;</button>
        <button :class="page==c+1?'current':''" v-for="c in page_count" @click="changePage(c)">{{c+1}}</button>
         <button @click=nextPage() :class="readonly2==1?'forbid':''">&gt;</button>
         <button class="from" @click=endPage()>末页</button>
      </div>
 </div>

vue

 data:{
        page_count:1,//总页数默认为1
        page:1, //当前页码
        start_page:0, //从第几个开始加载数据
        readonly1:1, //上一页
        readonly2:0,//下一页
  },
methods:{
//根据类型加载设计师
        changeRate:function(d){
            console.log(d.rate_id);
            vm_designer.searchName="";//清空搜索字段
            vm_designer.nav2=d.rate_id+1;
            vm_designer.rateId=d.rate_id;
            var urls='';
            var datas={};
            if(d.rate_id==0){
                urls="../m_designer/findAllDesigner.do";
                datas={start_page:0,count_page:12};
            }else{
                urls="../m_designer/findAllDesignerOfOneDesignerRate.do";
                datas={rate_id:d.rate_id,start_page:0,count_page:12};
            }

             $.ajax({
                    url:urls,
                    data:datas,
                    type:'post',
                    success:function(data){
                        console.log(data);
                        if(data.status=="SUCCESS"){
                            vm_designer.pageshow=1;
                            vm_designer.designerList=data.data.designerArray;
                            var pages=data.data.rows;
                            vm_designer.page_count=Math.ceil(pages/12);
                            if(vm_designer.page_count==1){ //初始化页数只有一页的时候
                                vm_designer.readonly1=1;
                                vm_designer.readonly2=1;
                            }
                        }else{
                            vm_designer.pageshow=0;
                            vm_designer.msg="很抱歉，暂无该类型设计师!";
                            vm_designer.designerList="";

                        }   
                    }
                });
        },
        //分页加载
        changePage:function(c){
            vm_designer.page=c+1;
            if(vm_designer.page==1){
                vm_designer.readonly1=1;
                if(vm_designer.page_count>1){ //若页数大于1
                    vm_designer.readonly2=0;
                }

            }else if(vm_designer.page==vm_designer.page_count){
                vm_designer.readonly2=1;
                vm_designer.readonly1=0;
            }else{
                vm_designer.readonly1=0;
                vm_designer.readonly2=0;
            }
            vm_designer.start_page=c*12;
            if(vm_designer.rateId==99){
                urls="../designer/searchByName.do";
                datas={name:vm_designer.searchName,start_page:vm_designer.start_page,count_page:12};
            }else{
                if(vm_designer.rateId==0){
                    urls="../m_designer/findAllDesigner.do";
                    datas={start_page:vm_designer.start_page,count_page:12};
                }else{
                    urls="../m_designer/findAllDesignerOfOneDesignerRate.do";
                    datas={rate_id:vm_designer.rateId,start_page:vm_designer.start_page,count_page:12};
                }
            }


             $.ajax({
                    url:urls,
                    data:datas,
                    type:'post',
                    success:function(data){
                        console.log(data);
                        if(data.status=="SUCCESS"){               
                            vm_designer.designerList=data.data.designerArray;
                        }else{

                        }   
                    }
                });
        },
        //首页
        startPage:function(){
            vm_designer.changePage(0);
        },
        //末页
        endPage:function(){
            vm_designer.changePage(vm_designer.page_count-1);
        },
        //上一页
        prvePage:function(){
            if(vm_designer.readonly1==1){

            }else{
                vm_designer.changePage(vm_designer.page-2);   
            }
        },
        //下一页
        nextPage:function(){
            if(vm_designer.readonly2==1){
            }else{
                vm_designer.changePage(vm_designer.page);   
            }

        },

1 0