vue分页器

第一种：按钮式

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

            }

        },