使用vue2.0与bootstrap3进行简单列表分页
来源：互联网 发布：mac上安装android sdk 编辑：程序博客网 时间：2024/05/23 18:44
直接引入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)" 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)" 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)" 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)" 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)" 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)" 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>阅读全文
0 0
- 使用vue2.0与bootstrap3进行简单列表分页
- 通过<script>标签引入Vue2.0进行的分页
- 使用Hibernate进行简单分页
- vue2.0分页
- Vue2.0 过滤器的简单使用
- MVC使用PageList进行简单的分页
- Bootstrap3.0学习第十四轮(分页、徽章)
- Bootstrap3.0学习第十四轮(分页、徽章)
- vue2.0 使用 filters
- 简单介绍一下Vue2.0
- Vue2.0初学之分页组件
- 基于vue2.0的一个分页组件
- Bootstrap3 排版-列表
- 使用webpack与vue2.0构建前端工程（一）
- vue2.0下拉列表数据绑定
- 使用hibernate进行分页
- 使用hibernate进行分页
- 使用Laypage进行分页
- shell 如何在文件的开头插入一行
- 修改kafka源码,编译kafka 0.8.2.2,解决bug kafka.common.InvalidTopicException
- text/html与text/plain有什么区别？
- HMACSHA1 加密算法
- 梯度提升树(GBDT)原理小结
- 使用vue2.0与bootstrap3进行简单列表分页
- 关于LPC1768的IAP随笔
- 无法解析的外部符号 _WinMain?
- 深入浅谈事物
- Maven仓库被墙，抽空研究下setting.xml 配置
- Teigha 40010 保存设置Wipeout时的边界显示问题
- 利用qqbot记录QQ聊天信息
- Leetcode算法学习日志-447 Number of Boomerangs
- JS中通用的contains方法判断两个节点的关系
