Popular blog tags
<!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>.