Vue分页实例

继上一篇vue前后端交互后，数据渲染到前端表格后需要分页显示，参考网上资料结合项目整理一下，做个笔记。

1.定义一个自定义组件：vue_page.js

// 定义一个全局的对象，用于存放分页对象属性
var pageModel = {
    pageLength: 10,
    currentPage:1,
    totalPage: -1,
    totalItems:-1,
}
$(function () {
    Vue.component('pagination', {
        data:function(){
            return {
                selectObj : ["first", "previous", "next", "last"],
                pageModel
            }
        },
        props: ['input'],
        template: "<div><label style='float: left;font-weight: normal;'>当前页数 <font color='red'>{{pageModel.currentPage}}</font>/<font style='margin-right:20px' color='red'>{{pageModel.totalPage}} </font> 每页显示"
        +"<select v-model='pageModel.pageLength' v-on:change='pageLengthChange(pageModel.pageLength)'><option>10</option><option>20</option><option>50</option><option>100</option></select>&nbsp;&nbsp;总数:<font color='red'>{{pageModel.totalItems}}</font ></label>"
        +"<ul style='margin: 0;float: right;' class='pagination'>"
        +"<label><div class='input-group'><input v-model='input' style='margin-left:30px;margin-right:5px;width: 80px;' type='text' class='form-control' placeholder='选择页数'><span class='input-group-btn'>" +
        "<button v-on:click='jumpToPage' title='跳转到指定页' class='btn btn-primary' type='button'>跳转</button></span></div></label>"
        +"<li v-on:click='pageClick(selectObj[0])'><a href='#'>首页</a></li>"
        +"<li v-on:click='pageClick(selectObj[1])'><a href='#'>上一页</a></li>"
        +"<li v-on:click='pageClick(selectObj[2])'><a href='#'>下一页</a></li>"
        +"<li v-on:click='pageClick(selectObj[3])'><a href='#'>尾页</a></li></ul></div>",
        methods:{
            pageClick:function(obj){
                switch(obj){
                    case "first":
                        pageModel.currentPage = 1;
                        break;
                    case "previous":
                        if(pageModel.currentPage > 1){
                            pageModel.currentPage --;
                        }
                        break;
                    case "next":
                        if(pageModel.currentPage < pageModel.totalPage){
                            pageModel.currentPage ++;
                        }
                        break;
                    case "last":
                        pageModel.currentPage = pageModel.totalPage;
                        break;
                };
                this.$emit("reload");
            },
            jumpToPage:function(){
                var val = parseInt(this.input);
                if(val > 0 && val <=pageModel.totalPage){
                    pageModel.currentPage = val;
                }else{
                    alert("输入页数不正确");
                }
                this.$emit("reload");
            },
            pageLengthChange:function(i){
                pageModel.pageLength = i;
                pageModel.currentPage = 1;
                this.$emit("reload");
            }
        }
    })
})

1. 在自己的业务js方法里

       $(function(){
               var vm = new Vue( {
                   el: '#app',
                   data: {
                       searchArg : {},
                       exceptionList : [],
                       totalItems: '',
                       exptId : '',
                       exceptionexam: [],
                       message : 'test'
                   },
                   created: function () {
                       this.init(pageModel.pageLength);
                   },
                   methods: {
                       search : function(){
                           this.init(pageModel.pageLength);
                       },
                       init : function (pageLength) {
                           // `this` 指向 vm 实例
                           debugger;
                           console.log('a is: ' + pageModel.currentPage);
                           this.searchArg.length = pageLength + '';
                           this.searchArg.start = (pageModel.currentPage - 1) * 10;
                           // POST请求
                           this.$http.post(
                               BasePath + "/PriceException/search.do",
                               // 请求体重发送的数据
                               this.searchArg,{emulateJSON:true}).then(function (resp) {
                               // 请求成功回调
                               this.totalItems = resp.data.data.count;
                               this.exceptionList = resp.data.data.posts;
                               var lengthAll = this.totalItems;
                               var lengthPage = parseInt(lengthAll/pageLength)+1;
                               pageModel.totalPage = lengthPage;
                               pageModel.totalItems = lengthAll;
            }, function () {
                   // 请求失败回调
               });
           }
       }
   
   } );
   

Html部分

   在table表格最后一行使用：
   <div class="row" id="app">
   <table>
     <tr >
        <span style="white-space:pre">  </span><td colspan="9">
        <pagination v-on:reload="search"></pagination>
        <span style="white-space:pre">  </span></td>
      </tr>
    </table>
    </div>

效果如下：