Vue真假分页

分页"/>

Vue真假分页

功能需求：

        一共100条数据，我要分10页显示，每页显示10条

        一共100条数据，我要分5页显示，每页显示20条

        一共99条数据，我要分5页显示，每页显示20条

思路：

       理论上这三个参数，获取任意两个，便可知道第三个，但由于镇假分页的概念，所以在真分页中只能选择：pagenum，和pageSize，不然则是假分页啦，既然都可以，选共，这是为什么无论是真假分页最关键的两个参数：页码和每页显示多少条数据。既然是假分页：我就是要一次性拿到所有数据，然后再 分页取出。

        真假分页的本质区别只是数据存放位置不同，当然数据存放位置不同也就导致对数据库进行访问的次数不同！

 Vue假逻辑：

        1、查出所有的数据放到listdata集合中

        2、将前10条记录放入dataALL集合中默认加入分页

        3、onChange（Page）方法用来再选择page的时候显示数据

代码：

    <Table border :columns="columns7" :data="dataAll" ></Table><Page :total="page.totalCount" :page-size="page.pagesize" show-sizer   style="padding-top:20px" @on-change="onChange"></Page>

 columns7: [{type: "selection",width: 60,align: "center"},{title: "徽章名称",key: "name"},{title: "徽章介绍",key: "description"},{title: "勋章类型",key: "metaltype"},{title: "级别徽章图片",key: "imageUrl",columns: {'width':'50px'},render: (h, params) => {return h('div', [h('img', {attrs: {src: params.row.imageUrl},style: {width: '40px',height: '40px'}}),]);}},{title: "创建人",key: "creator"},{title: "操作人",key: "operator"},{title: "备注",key: "remark"},{title: "操作",key: "action",width: 150,align: "center",render: (h, params) => {return h("div", [h("Button",{props: {type: "primary",size: "small"},style: {marginRight: "5px"},on: {click: () => {this.EditModel(params.index);}}},"编辑"),h("Button",{props: {type: "error",size: "small"},on: {click: () => {this.openDeleteDialog(params.index);}}},"删除")]);}}],

  dataAll: [],//存放table中显示的数据，也就是某页的数据放在这里listdata:[],//存放查出的所有数据page:{//分页数//arrPageSize:[10,20,30,40],//分页大小pagesize:10,//总分页数pageCount:1,//当前页面//  pageCurrent:1,//总数// totalCount:20},

//查询全部model记录并显示showall(){var vm = this;var apiUrl = 'http://192.***.**.***/kernel-web/medal/findAll';axios.get(apiUrl).then(function (response) {var totoalNum=0;for(var i=0;i<response.data.length;i++){var object=eval(response.data[i]);object.index=i+1;totoalNum++;vm.listdata.push(object);//查出所有的数据放 到listdata集合中if(i<vm.page.pagesize){vm.dataAll.push(object);//初始化获取数据的过程中，将前10个默认加入分页}}vm.page.totalCount=totoalNum;}).catch(function (error) {alert(error);});       },onChange:function(page){// this.dataAll.splice(0,this.dataAll.length);for(var i = 10*(page - 1) + 1;//i用来确定从LIstdata中哪条记录开始取 取值为：1、11i<= ((this.page.totalCount>10*page)?(10*page):(this.page.totalCount));i++){//判断当前选页是否<总条数，如果符合条件则i<=当前页范围内记录，如果不符合，则说明是最后一页，显示剩余记录即可//主要是为了确定范围// console.log(" i = " + i + "，item：" + JSON.stringify(this.dataAll[i]));this.dataAll.push(this.listdata[i-1]);//把所确定范围内的记录放到dataAll中显示}},

小结：

      重点看下其中的小算法：如何确定i值的范围！，在这里是对list集合进行操作，真分页中也是如此，只不过是对数据库中表所有记录进行操作（limit相关），mybatis中的pageHelper也是假分页，内部原理与上面相通！