vue制作分页效果

来源：互联网发布：mac 局域网ip 编辑：程序博客网时间：2024/06/11 03:09

首先js效果：

<script src="....js/vue.js"></script> <script src="..../js/vue-resource.min.js"></script> <script type="text/javascript">     var pagitation=new Vue({         el:'#app',         data: {             // 省略的符号             sign:'...',             // 省略号位置             signIndex:3,             // 总页数             totalPageCount: 8,             // 当前页             currentPage:1,             // 显示在页面的数组列表             pagingList:[],             lists:[]         },         watch: {             totalPageCount:function(val) {                 var that = this                 if (!val || val == '') return;                 that.currentPage = 1;                 that.init()             },             currentPage:function(val) {                 var that = this                 that.init()             }         },         methods: {             //获取订单数据             getorder:function(){                 this.$http.post("请求数据的URL",{                     page:this.currentPage //传递请求页面                 }, {                     headers: {                         "X-Requested-With": "XMLHttpRequest"                     },                     emulateJSON: true                 }).then(function(res){                     json=JSON.parse(res.body);                     this.lists=json.data.lists;           //获取数据                     this.totalPageCount=json.data.maxPage;//获取总页数                 })             },             // 初始化数据             fetchData:function() {                 var that = this                 that.pagingList = [];                 var tmp = null;                 if ((that.totalPageCount) > 6) {                     if (((that.totalPageCount-1) == (that.totalPageCount - that.currentPage)) && (that.totalPageCount - that.currentPage) > 5) {                         for (var i=1;i<7;i++) {                             if (i < that.signIndex) {                                 tmp = {key:i, value:i }                             } else if (i== that.signIndex) {                                 tmp = {key:that.sign, value:0 }                             } else if (i == (that.signIndex + 1) ) {                                 tmp = {key:that.totalPageCount - 1, value:that.totalPageCount - 1 }                             } else {                                 tmp = {key:that.totalPageCount, value:that.totalPageCount }                             }                             that.pagingList.push(tmp)                         }                     } else if (((that.totalPageCount - that.currentPage) <= that.signIndex)){                         var starNum = that.totalPageCount - 5;                         for (var i=starNum;i<starNum+6;i++) {                             tmp = {key:i, value:i }                             that.pagingList.push(tmp)                         }                     } else {                         var starNum = that.currentPage - 1;                         for (var i=1;i<7;i++) {                             if (i < that.signIndex) {                                 tmp = {key:(starNum - 1) + i, value:(starNum - 1) + i }                             } else if (i== that.signIndex) {                                 tmp = {key:that.sign, value:0 }                             } else if (i == (that.signIndex + 1) ) {                                 tmp = {key:that.totalPageCount - 1, value:that.totalPageCount - 1 }                             } else {                                 tmp = {key:that.totalPageCount, value:that.totalPageCount }                             }                             that.pagingList.push(tmp)                         }                     }                 } else {                     for (var i =0; i <that.totalPageCount; i++) {                         tmp = {key:i+1, value:i+1 }                         that.pagingList.push(tmp)                     }                 }             },             // 跳转到某页码             next:function(num) {                 var that = this                 if (num <= 1) that.currentPage = 1;                 else if (num >= that.totalPageCount) that.currentPage = that.totalPageCount;                 else that.currentPage = num;                 //location.href="/asm/order?page"+that.currentPage;             },             init:function() {                 var that = this                 that.fetchData();                 that.getorder();             }         },         mounted:function() {             var that = this             that.init()         }     }); </script>

html部分

<div id="app" >                                  <table>                                                          <tbody>                              <tr v-for="(item,index) in orders">                                 <td style="border:1px solid #f1f2f7">{{item.orderNo}}</td>                             <td style="border:1px solid #eeeff2">                                     <p>{{item.createTime}}</p>                                 </td>                                 <td style="border:1px solid #eeeff2">                                     <p>{{item.channel}}</p>                                 </td>                                 <td style="border:1px solid #eeeff2">                                     <p style="color:#5368fb">{{item.amount}}</p>                                 </td>                                 <td style="border:1px solid #eeeff2" v-if="item.status==0">                                     <p  value="未支付" disabled>未支付</p>                                     <button  value="再次支付">再次支付</button>                                 </td>                                 <td style="border:1px solid #eeeff2" v-else>                                     <p value="已支付" disabled>已支付</p>                                 </td>                             </tr>                              <td colspan="5" v-if="orders.length<=0" style="background-color: #ffffff;">暂无订单</td>                             <!--此处是实时信息数据表-->                             </tbody>                         </table>             <!-- 表格 -->             <div class="aso-pg-rank__pagination" id="aso-pg-rank__pagination" v-cloak>                 <div>共{{currentPage}}/{{totalPageCount}}页</div>                 <ul class="aso-pagination" first-text="第一页" last-text="最后一页" max-size="50" next-text="下一页" previous-text="上一页">                     <li class="pagination-first  ">                         <a v-if="currentPage == 1" >第一页</a>                         <a v-else href="javascript:;" @click="next(1)">第一页</a>                     </li>                     <li class="pagination-prev" v-if="currentPage>1"><a href="javascript:;" @click="next(currentPage-1)">下一页</a></li>                     <li v-for="item in pagingList" class="pagination-page">                         <a v-if="currentPage==item.key || sign ==item.key" class="activeye">{{item.key}}</a>                         <a v-else href="javascript:;" @click="next(item.value)">{{item.key}}</a>                     </li>                     <li class="pagination-next" v-if="currentPage<totalPageCount"><a href="javascript:;" @click="next(currentPage+1)">下一页</a></li>                     <li class="pagination-last">                         <a v-if="totalPageCount == currentPage">尾页</a>                         <a v-else href="javascript:;" @click="next(totalPageCount)">尾页</a>                     </li>                 </ul>             </div>     </div>

样式自己加喽，另外getlists是获取后台请求数据，如果不需要则可以删去直接在data中给分页赋值

阅读全文

1 0