angular实现假分页

前言

这次有幸可以学习假数据分页显示，虽然是自己死皮赖脸的蹭的！但是也是因为自己积极主动！不管别人怎么看！你要知道你是干什么吃的！没人教就自己去学！不会就死皮赖脸的去问！没有什么不好意思！

---

技术点

学会了就分享！不能藏着掖着！否则早晚把自己害了！就这么简单，总就用到一下几点内容，其实非常的简单！只是自己想象的太复杂了！制作表格也是这么做的！所以表格制作很简单！

• *ngFor
• *ngIf
• 插值绑定
• keyup
• blur
• 逻辑

---

技术点代码实现

ngFor代码实现：首先从ngFor的作用是实现循环绑定，因为我们ts中有很多的数据所以我们让他循环进行插值，会很方便，let title of tabletitle，其中let表示tabletitle的别名，let i=index，index代表我们循环了多少次并且赋值给了i ，ps（ngFor只能写在tbody或者tr中，不可以写在td中，因为他是循环绑定，如果你用td无法实现循环绑定）

 <tbody *ngFor="let title of tabletitle;let i=index">
     <tr  class="success"  *ngIf="i>=(page-1)*pageSize && i<page*pageSize">
      <td><input type="checkbox">  {{title.wang}}</td>
      <td>{{title.xue}}</td> 
      <td>{{title.fen}}</td>
      <td><a>{{title.mei}}</a></td>  
      </tr>
  </tbody>
</table>

---

ngIf：ngif你可以看做是我们在学习Cs的时候用的if判断一样，如果if判断里的内容满足条件则继续执行，如果不满足条件则不执行，已知i是来自于index中的。我们判断i是否在0-5之间，如果满足则执行，否则不执行

*ngIf="i>=(page-1)*pageSize && i<page*pageSize">

---

插值绑定代码实现：插值绑定以前我写过博客，大家可以看我的连接：http://blog.youkuaiyun.com/dtttyc/article/details/78513171

 <td>{{title.fen}}</td>

---

keyup与可以blur的区别。在这次我们去到了想文本框中输入数据则触发事件，然后获得文本框中的数据，如果是js我们可以使用document.getelement获取文本框中的值，通过keyup和blur可以触发事件，对于typescript来说是一样的。解释： in代表的是可以认为是id，keyup事件表示为换车触发事件，blur表示失去焦点触发事件

 <li><a class="active"><input #in class="custom-input"  (keyup.enter)="changePage(in.value)"   (blur)="changePage(in.value)" value={{page}} /></a></li>

---

逻辑：看逻辑那就看看我的ts代码吧。
1.需要用到当前页数，总共页数，总共多少条数据，一页可以有多少数据
2 .通过插值绑定赋值
3.点击前一个减1，点击后一个+1
4.加限制条件

import { Component, OnInit } from '@angular/core';
import { dataModule } from './datamodule';

//假数据内容
const yue: dataModule[] = [
  { wang: "xue1", xue: "wang1", fen: "fen1",mei:"mei2"},
  { wang: "xue2", xue: "wang2", fen: "fen2" ,mei:"mei2"},
  { wang: "xue3", xue: "wang3", fen: "fen3" ,mei:"mei2" },
  { wang: "xue4", xue: "wang4", fen: "fen4" ,mei:"mei2"},
  { wang: "xue5", xue: "wang5", fen: "fen5" ,mei:"mei2"},
  { wang: "xue6", xue: "wang6", fen: "fen7" ,mei:"mei2"},
  { wang: "xue7", xue: "wang7", fen: "fen8" ,mei:"mei2"},
  { wang: "xue8", xue: "wang8", fen: "fen9" ,mei:"mei2"},
  { wang: "xue9", xue: "wang9", fen: "fen10" ,mei:"mei2"},
  { wang: "xue10", xue: "wang10", fen: "fen11" ,mei:"mei2"}
];

@Component({
  selector: 'app-judy',
  templateUrl: './judy.component.html',
  styleUrls: ['./judy.component.css']
})

export class JudyComponent {
  //把假数据付给变量，与html产生插值绑定
  tabletitle = yue;
  page: number=1; //第几页
  pageSize:number=5; //页的大小 

  total:number=yue.length//总数量
  totalpages=this.total / this.pageSize;///总共有几页

  //点击前一个
  first() {
    if(this.page>1){
      //page减1让
      this.page--
    }
  }
  //点击后一个
  second() {
      //判断是否小于最大页数
    if(this.page<this.totalpages){
      this.page++
    }  
  }
  //文本框输入页数触发事件
  changePage(page:number){
    //是否在0至最大页数之间
    if(page>0 && page <this.totalpages){
      //输入的数付给page
      this.page=page;
      //浮点数向上取整
      this.totalpages=Math.ceil(this.total/this.pageSize)
    }else if(page < 0){
      //小于则返回到第一页
      page=1;
      this.page=1;
   }else{
     //大于则调到最后一页
     page=this.totalpages;
     this.page=this.totalpages
   }   
  }
}

---

效果图

---

总结

分页查询很简单，只要把原理搞清楚之后，你就会感觉超级的简单，积极主动很重要！！