您的位置: 首页  >  文章  >  Vue.js结合bootstrap实现的分页控件

Vue.js结合bootstrap实现的分页控件

分类: 文章 • 2024-10-15 13:23:52

原文地址：http://blog.****.net/qiuhaotc/article/details/53031884

使用 vue.js 结合 bootstrap 开发的分页控件

效果如下

Vue.js结合bootstrap实现的分页控件

Vue.js结合bootstrap实现的分页控件

Vue.js结合bootstrap实现的分页控件

实现代码

[html] view plain copy
 print?
  1. <!DOCTYPE html>  
  2. <html>  
  3. <head>  
  4.     <meta charset="utf-8" />  
  5.     <meta name="viewport" content="width=device-width, initial-scale=1.0" />  
  6.     <title> Vue-PagerTest</title>  
  7.     <link rel="stylesheet" href="../lib/bootstrap/dist/css/bootstrap.css" />  
  8. </head>  
  9. <body>  
  10.     <div class="container body-content">  
  11.         <div id="test" class="form-group">  
  12.             <div class="form-group">  
  13.                 <div class="page-header">  
  14.                     数据  
  15.                 </div>  
  16.                 <table class="table table-bordered table-responsive table-striped">  
  17.                     <tr>  
  18.                         <th>姓名</th>  
  19.                         <th>年龄</th>  
  20.                         <th>删除信息</th>  
  21.                     </tr>  
  22.                     <tr v-for="item in arrayData">  
  23.                         <td class="text-center">{{item.name}}</td>  
  24.                         <td>{{item.age}}</td>  
  25.                         <td><a href="javascript:void(0)" v-on:click="deleteItem($index,item.age)">del</a></td>  
  26.                     </tr>  
  27.                 </table>  
  28.                 <div class="page-header">分页</div>  
  29.                 <div class="pager" id="pager">  
  30.                     <span class="form-inline">  
  31.                         <select class="form-control" v-model="pagesize" v-on:change="showPage(pageCurrent,$event,true)" number>  
  32.                             <option value="10">10</option>  
  33.                             <option value="20">20</option>  
  34.                             <option value="30">30</option>  
  35.                             <option value="40">40</option>  
  36.                         </select>  
  37.                     </span>  
  38.                     <template v-for="item in pageCount+1">  
  39.                         <span v-if="item==1" class="btn btn-default" v-on:click="showPage(1,$event)">  
  40.                             首页  
  41.                         </span>  
  42.                         <span v-if="item==1" class="btn btn-default" v-on:click="showPage(pageCurrent-1,$event)">  
  43.                             上一页  
  44.                         </span>  
  45.                         <span v-if="item==1" class="btn btn-default" v-on:click="showPage(item,$event)">  
  46.                             {{item}}  
  47.                         </span>  
  48.                         <span v-if="item==1&&item<showPagesStart-1" class="btn btn-default disabled">  
  49.                             ...  
  50.                         </span>  
  51.                         <span v-if="item>1&&item<=pageCount-1&&item>=showPagesStart&&item<=showPageEnd&&item<=pageCount" class="btn btn-default" v-on:click="showPage(item,$event)">  
  52.                             {{item}}  
  53.                         </span>  
  54.                         <span v-if="item==pageCount&&item>showPageEnd+1" class="btn btn-default disabled">  
  55.                             ...  
  56.                         </span>  
  57.                         <span v-if="item==pageCount" class="btn btn-default" v-on:click="showPage(item,$event)">  
  58.                             {{item}}  
  59.                         </span>  
  60.                         <span v-if="item==pageCount" class="btn btn-default" v-on:click="showPage(pageCurrent+1,$event)">  
  61.                             下一页  
  62.                         </span>  
  63.                         <span v-if="item==pageCount" class="btn btn-default" v-on:click="showPage(pageCount,$event)">  
  64.                             尾页  
  65.                         </span>  
  66.                     </template>  
  67.                     <span class="form-inline">  
  68.                         <input class="pageIndex form-control" style="width:60px;text-align:center" type="text" v-model="pageCurrent | onlyNumeric" v-on:keyup.enter="showPage(pageCurrent,$event,true)" />  
  69.                     </span>  
  70.                     <span>{{pageCurrent}}/{{pageCount}}</span>  
  71.                 </div>  
  72.             </div>  
  73.         </div>  
  74.         <hr />  
  75.         <footer>  
  76.             <p>&copy; 2016 - 笑问苍天丶</p>  
  77.         </footer>  
  78.     </div>  
  79.   
  80.   
  81.     <script src="../lib/jquery/dist/jquery.js"></script>  
  82.     <script src="../lib/bootstrap/dist/js/bootstrap.js"></script>  
  83.     <script src="../lib/jquery/dist/jquery.js"></script>  
  84.     <script src="../lib/vue.js"></script>  
  85.     <script>  
  86.         //只能输入正整数过滤器  
  87.         Vue.filter('onlyNumeric', {  
  88.             // model -> view  
  89.             // 在更新 `<input>` 元素之前格式化值  
  90.             read: function (val) {  
  91.                 return val;  
  92.             },  
  93.             // view -> model  
  94.             // 在写回数据之前格式化值  
  95.             write: function (val, oldVal) {  
  96.                 var number = +val.replace(/[^\d]/g, '')  
  97.                 return isNaN(number) ? 1 : parseFloat(number.toFixed(2))  
  98.             }  
  99.         })  
  100.   
  101.         //数组删除某项功能  
  102.         Array.prototype.remove = function (dx) {  
  103.             if (isNaN(dx) || dx > this.length) { return false; }  
  104.             for (var i = 0, n = 0; i < this.length; i++) {  
  105.                 if (this[i] != this[dx]) {  
  106.                     this[n++] = this[i]  
  107.                 }  
  108.             }  
  109.             this.length -= 1  
  110.         }  
  111.   
  112.         var vue = new Vue({  
  113.             el: "#test",  
  114.             data: {  
  115.                 //总项目数  
  116.                 totalCount: 200,  
  117.                 //分页数  
  118.                 pageCount: 20,  
  119.                 //当前页面  
  120.                 pageCurrent: 1,  
  121.                 //分页大小  
  122.                 pagesize: 10,  
  123.                 //显示分页按钮数  
  124.                 showPages: 11,  
  125.                 //开始显示的分页按钮  
  126.                 showPagesStart: 1,  
  127.                 //结束显示的分页按钮  
  128.                 showPageEnd: 100,  
  129.                 //分页数据  
  130.                 arrayData: []  
  131.             },  
  132.             methods: {  
  133.                 //分页方法  
  134.                 showPage: function (pageIndex, $event, forceRefresh) {  
  135.   
  136.                     if (pageIndex > 0) {  
  137.   
  138.   
  139.                         if (pageIndex > this.pageCount) {  
  140.                             pageIndex = this.pageCount;  
  141.                         }  
  142.   
  143.                         //判断数据是否需要更新  
  144.                         var currentPageCount = Math.ceil(this.totalCount / this.pagesize);  
  145.                         if (currentPageCount != this.pageCount) {  
  146.                             pageIndex = 1;  
  147.                             this.pageCount = currentPageCount;  
  148.                         }  
  149.                         else if (this.pageCurrent == pageIndex && currentPageCount == this.pageCount && typeof (forceRefresh) == "undefined") {  
  150.                             console.log("not refresh");  
  151.                             return;  
  152.                         }  
  153.   
  154.                         //处理分页点中样式  
  155.                         var buttons = $("#pager").find("span");  
  156.                         for (var i = 0; i < buttons.length; i++) {  
  157.                             if (buttons.eq(i).html() != pageIndex) {  
  158.                                 buttons.eq(i).removeClass("active");  
  159.                             }  
  160.                             else {  
  161.                                 buttons.eq(i).addClass("active");  
  162.                             }  
  163.                         }  
  164.   
  165.                         //测试数据 随机生成的  
  166.                         var newPageInfo = [];  
  167.                         for (var i = 0; i < this.pagesize; i++) {  
  168.                             newPageInfo[newPageInfo.length] = {  
  169.                                 name: "test" + (i + (pageIndex - 1) * 20),  
  170.                                 age: (i + (pageIndex - 1) * 20)  
  171.                             };  
  172.                         }  
  173.                         this.pageCurrent = pageIndex;  
  174.                         this.arrayData = newPageInfo;  
  175.   
  176.                         //计算分页按钮数据  
  177.                         if (this.pageCount > this.showPages) {  
  178.                             if (pageIndex <= (this.showPages - 1) / 2) {  
  179.                                 this.showPagesStart = 1;  
  180.                                 this.showPageEnd = this.showPages - 1;  
  181.                                 console.log("showPage1")  
  182.                             }  
  183.                             else if (pageIndex >= this.pageCount - (this.showPages - 3) / 2) {  
  184.                                 this.showPagesStart = this.pageCount - this.showPages + 2;  
  185.                                 this.showPageEnd = this.pageCount;  
  186.                                 console.log("showPage2")  
  187.                             }  
  188.                             else {  
  189.                                 console.log("showPage3")  
  190.                                 this.showPagesStart = pageIndex - (this.showPages - 3) / 2;  
  191.                                 this.showPageEnd = pageIndex + (this.showPages - 3) / 2;  
  192.                             }  
  193.                         }  
  194.                         console.log("showPagesStart:" + this.showPagesStart + ",showPageEnd:" + this.showPageEnd + ",pageIndex:" + pageIndex);  
  195.                     }  
  196.   
  197.                 }  
  198.                 , deleteItem: function (index, age) {  
  199.                     if (confirm('确定要删除吗')) {  
  200.                         //console.log(index, age);  
  201.   
  202.                         var newArray = [];  
  203.                         for (var i = 0; i < this.arrayData.length; i++) {  
  204.                             if (i != index) {  
  205.                                 newArray[newArray.length] = this.arrayData[i];  
  206.                             }  
  207.                         }  
  208.                         this.arrayData = newArray;  
  209.                     }  
  210.                 }  
  211.             }  
  212.         });  
  213.         vue.$watch("arrayData", function (value) {  
  214.             //console.log("==============arrayData begin==============");  
  215.             //console.log(value==vue.arrayData);  
  216.             //console.log(vue.arrayData);  
  217.             //console.log("==============arrayData end==============");  
  218.         });  
  219.         vue.showPage(vue.pageCurrent, null, true);  
  220.     </script>  
  221. </body>  
  222. </html>  
下载地址：https://github.com/yangchunjian/page.git

相关推荐