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

时间：2021-05-26

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

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

<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title>使用vue2.0与bootstrap3进行简单列表分页</title> <link href="http://v3.bootcss.com/dist/css/bootstrap.min.css" rel="stylesheet"> <script type="text/javascript" src="https://cn.vuejs.org/js/vue.js"></script> </head> <body> <div class="bs-example" id="table"> <table class="table table-striped"> <thead> <tr> <th>#</th> <th>名称</th> <th>操作</th> </tr> </thead> <tbody> <tr v-if="listData.length>0" v-for="item in listData"> <th scope="row">{{item.id}}</th> <td>{{item.name}}</td> <td> <button v-on:click="editItem(item.id)" class="btn btn-default" >编辑</button> <button v-on:click="deleteItem(item.id)" class="btn btn-default" >删除</button> </td> </tr> <tr> <td colspan=3> <div id="pagelist"> <div class="row"> <div class="col-sm-6" style="line-height: 80px"> <div class="dataTables_info" id="sample-table-2_info"> 共{{pageData.total}}条，当前显示第 <span v-if="pageData.pageSize==1 || pageData.total == 0 || pageData.total == 1"> {{pageData.itemStart}}</span> <span v-else>{{pageData.itemStart}}-{{pageData.itemEnd}}</span> 条 </div> </div> <div class="col-sm-6"> <div class="dataTables_paginate paging_bootstrap"> <ul class="pagination"> <li v-if="pageData.curPage == 1 || pageData.total == 0 || pageData.total == 1" class="prev disabled"> <a>首页</a> </li> <li v-else class="prev"> <a href="javascript:void(0)" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" v-on:click="changeCurPage(1,pageData.pageSize);"> 首页 </a> </li> <li v-if="pageData.curPage == 1 || pageData.total == 0 || pageData.total == 1" class="prev disabled"> <a>上一页</a> </li> <li v-else class="prev"> <a href="javascript:void(0)" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" v-on:click="changeCurPage(pageData.curPage-1,pageData.pageSize);"> 上一页</i> </a> </li> <li v-if="pageData.totalPage > 5 && pageData.curPage > 3" class="next disabled"> <a>...</a> </li> <template v-for="pageItem in pageData.pageIndex"> <li v-if="pageData.curPage == pageItem" class="active"> <a>{{pageItem}}</a> </li> <li v-else> <a href="javascript:void(0)" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" v-on:click="changeCurPage(pageItem,pageData.pageSize);"> {{pageItem}} </a> </li> </template> <li v-if="pageData.totalPage > 5 && pageData.curPage < pageData.totalPage-2" class="next disabled"> <a>...</a> </li> <li v-if="pageData.curPage == pageData.totalPage || pageData.total == 0 || pageData.total == 1" class="next disabled"> <a>下一页</i></a> </li> <li v-else class="next"> <a href="javascript:void(0)" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" v-on:click="changeCurPage(pageData.curPage+1,pageData.pageSize);"> 下一页</i> </a> </li> <li v-if="pageData.curPage == pageData.totalPage || pageData.total == 0 || pageData.total == 1" class="next disabled"> <a>末页</a> </li> <li v-else class="next"> <a href="javascript:void(0)" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" v-on:click="changeCurPage(pageData.totalPage,pageData.pageSize);"> 末页 </a> </li> <template v-if="pageData.totalPage > 5" class="next disabled"> <li> <input value="" ref="goPage" class="input-mini" type="text" style="height: 32px;width:40px;margin:auto 5px auto 20px;line-height: 24px;"> <label><a href="javascript:void(0)" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" v-on:click="goPage(pageData.pageSize,pageData.totalPage)">Go</a></label> </li> </template> </ul> </div> </div> </div> </div> </td> <tr> </tbody> </table> </div> <script type="text/javascript"> function getData($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; } var vm = new Vue({ 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 () {//列出需要的数据 var returnData =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); var curPage = parseInt(page); pageSize = parseInt(pageSize); var totalPage = Math.ceil(total / pageSize); var itemStart = (curPage - 1) * pageSize + 1; if (curPage == totalPage) { itemEnd = total; } else { itemEnd = curPage * pageSize; } var pageIndex = []; 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]; } else if (curPage == 2) { pageIndex = [curPage - 1, curPage, curPage + 1, curPage + 2, curPage + 3]; } else if (curPage == totalPage - 1) { pageIndex = [curPage - 3, curPage - 2, curPage - 1, curPage, totalPage]; } else if (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) {//跳转页 var pageIndex = this.$refs.goPage.value; if (pageIndex <= 0) { pageIndex = 1; this.$refs.goPage.value = 1; } else if (pageIndex >= totalPage) { pageIndex = totalPage; this.$refs.goPage.value = totalPage; } this.changeCurPage(pageIndex, pageSize); } } }); window.onload = function(){ console.log('Hello World!'); vm.listItems(); }; </script> </body></html>

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

声明：本页内容来源网络，仅供用户参考；我单位不保证亦不表示资料全面及准确无误，也不保证亦不表示这些资料为最新信息，如因任何原因，本网内容或者用户因倚赖本网内容造成任何损失或损害，我单位将不会负任何法律责任。如涉及版权问题，请提交至online#300.cn邮箱联系删除。

相关文章