好资源导航 » 文章资讯 » vue2.0与bootstrap3实现列表分页效果

vue2.0与bootstrap3实现列表分页效果

2023-09-20 09:12:06 58

本文实例为大家分享了Android九宫格图片展示的具体代码，供大家参考，具体内容如下

直接引入vue的js文件进行页面渲染分页，不是vuex的哦，以下源码可以直接运行哟^_^





使用vue2.0与bootstrap3进行简单列表分页









#
名称
操作



0"v-for="iteminlistData">
{{item.id}}
{{item.name}}

编辑
删除








共{{pageData.total}}条，当前显示第

{{pageData.itemStart}}
{{pageData.itemStart}}-{{pageData.itemEnd}}
条

首页

首页上一页

上一页 5&&pageData.curPage>3"class="nextdisabled"> ...

{{pageItem}} 5&&pageData.curPage ...

下一页末页

末页 5"class="nextdisabled">

functiongetData($page,$pageSize){//获取数据，可使用各种语言替换^_^ var$data=[]; for(var$i=($page-1)*$pageSize+1;$i<=$page*$pageSize;$i++){ $data.push({ id:$i, name:'name'+$i }); } var$returnData={'data':$data,'total':103}; return$returnData; } varvm=newVue({ el:'#table', data:{ listData:[], page:1,//当前页码 pageSize:10,//每页条数 total:0,//总数 pageData:{ curPage:1, pageSize:10, total:0, totalPage:0, pageIndex:[], itemStart:0, itemEnd:0 } }, methods:{ listItems:function(){//列出需要的数据 varreturnData=getData(this.page,this.pageSize); this.listData=returnData.data; this.total=returnData['total']; this.setPageList(this.total,this.page,this.pageSize); }, editItem:function($id){//编辑操作在这儿哟 alert('编辑第'+$id+'条数据！'); }, deleteItem:function($id){//这里可以删除数据 alert('删除第'+$id+'条数据！'); }, setPageList:function(total,page,pageSize){ total=parseInt(total); varcurPage=parseInt(page); pageSize=parseInt(pageSize); vartotalPage=Math.ceil(total/pageSize); varitemStart=(curPage-1)*pageSize+1; if(curPage==totalPage){ itemEnd=total; }else{ itemEnd=curPage*pageSize; } varpageIndex=[]; if(curPage>=1&&curPage<=totalPage){ if(totalPage<5){//5页以内 for(var$i=1;$i<=totalPage;$i++){ pageIndex.push($i); } }else{//大于5页 if(curPage==1){ pageIndex=[curPage,curPage+1,curPage+2,curPage+3,curPage+4]; }elseif(curPage==2){ pageIndex=[curPage-1,curPage,curPage+1,curPage+2,curPage+3]; }elseif(curPage==totalPage-1){ pageIndex=[curPage-3,curPage-2,curPage-1,curPage,totalPage]; }elseif(curPage==totalPage){ pageIndex=[curPage-4,curPage-3,curPage-2,curPage-1,curPage]; }else{ pageIndex=[curPage-2,curPage-1,curPage,curPage+1,curPage+2]; } } } this.pageData.curPage=curPage; this.pageData.pageSize=pageSize; this.pageData.total=total; this.pageData.totalPage=totalPage; this.pageData.pageIndex=pageIndex; this.pageData.itemStart=itemStart; this.pageData.itemEnd=itemEnd; }, changeCurPage:function(page,pageSize){//换页 this.page=page; this.pageSize=pageSize; this.listItems(); }, goPage:function(pageSize,totalPage){//跳转页 varpageIndex=this.$refs.goPage.value; if(pageIndex<=0){ pageIndex=1; this.$refs.goPage.value=1; }elseif(pageIndex>=totalPage){ pageIndex=totalPage; this.$refs.goPage.value=totalPage; } this.changeCurPage(pageIndex,pageSize); } } }); window.onload=function(){ console.log('HelloWorld!'); vm.listItems(); };

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持毛票票。

返回顶部
514930285
czq8825@qq.com

vue2.0与bootstrap3实现列表分页效果

热门推荐

随机推荐