【Angular】table假分页

【table的基本组成】

要先实现表格的假分页，首先要知道table的基本成分：<thead>头、<tbody>身体、<tfood>脚

<table>
    <thead>    <!-- 头 -->
        <tr>
            <th></th>
        </tr>
    </thead>

    <tbody>    <!-- 身体 -->
        <tr>
            <td></td>
        </tr>
    </tbody>
    <tfood>    <!-- 脚 -->
        <tr>
            <td></td>
        </tr>
    </tfood>
</table>

【table假分页】

//user.ts
export class User {
    id: number;
    FirstName: string;
    LastName: string;
    UserName: string;  
  }

//datatable.component.html <!-- table布局 --> <table class="table table-striped table-bordered table-hover table-condensed"> <thead> <tr class="active" > <th>#</th> <th>First Name</th> <th>Last Name</th> <th>User Name</th> <th>操作</th> </tr> </thead> <tbody *ngFor="let user of users,let i=index" > <tr class="success" *ngIf="i>=(page-1)*pageSize && i<page*pageSize "> <td >{{user.id}}</td> <td>{{user.FirstName}}</td> <td>{{user.LastName}}</td> <td>{{user.UserName}}</td> <td><a href="">编辑</a></td> </tr> </tbody> </table> <!-- 分页 --> <nav aria-label="Page navigation"> <ul class="pagination"> <li><a style="cursor:pointer" (click)="topPage()">首页</a></li> <li><a style="cursor:pointer" (click)="previousPage()">上一页</a></li> <li><a><input #inPage (keyup.enter)="changePage(inPage.value)" (blur)="changePage(inPage.value)" value={{page}} /></a></li> <li><a style="cursor:pointer" (click)="nextPage()">下一页</a></li> <li><a style="cursor:pointer" (click)="endPage()">尾页</a></li> </ul> </nav> </div>

【注释】

• let i=indexi：代表tbody循环的次数，index在谁的标签里，就代表循环该标签的次数
• *ngFor为什么写在中（写在中数据显示不出来），结合以前的编程调试经验看，我认为：只有走完该条语句时，此句的代码才起作用，此时还没进行循环，即i还没有值，如何判断i，此问题还有待研究。。。
• <input #inPage (keyup.enter)="changePage(inPage.value)" (blur)="changePage(inPage.value)" value={{page}} />
  
  • #inPage：代表所在标签，相当于给该标签起了个别名,以后用到inPage在此就代表<input/>;
  • （blur）:失去焦点触发的事件
  • (keyup.enter)：回车时触发的事件

//datatable.component.ts
import { User} from './user';

const Users:User[]=[
  { id: 1,FirstName: 'wang',LastName:'shuang',UserName:'1' },{ id: 2,FirstName: 'li',LastName:'hua',UserName:'2' },{ id: 3,FirstName: 'zhao',LastName:'nan',UserName:'3'},{ id: 4,FirstName: 'niu',LastName:'qian',UserName:'4' },{ id: 5,FirstName: 'yan',LastName:'wen',UserName:'5' },{ id: 6,FirstName: 'liu',UserName:'6' },{ id: 7,FirstName: 'bai',LastName:'jing',UserName:'7' },{ id: 8,FirstName: 'an',UserName:'8'},{ id: 9,FirstName: 'wei',LastName:'yuan',UserName:'9' },{ id: 10,FirstName: 'kou',LastName:'ru',UserName:'10' },];
@Component({
  selector: 'app-datatable',templateUrl: './datatable.component.html',styleUrls: ['./datatable.component.css']
})

export class DatatableComponent implements OnInit {

  constructor() { }

  ngOnInit() {
  }

  users = Users;

    total:number=this.users.length ;       //总记录数
    pageSize:number=5;  //页的大小，初始值为5
    page:number=1;       //页号，初始为1
    totalPages:number=this.total/this.pageSize; //总页数

    @Input() arr: string[] = new Array();  //保存字段名

    //上一页
    previousPage(){
        this.page--;
        this.changePage(this.page);  
    }

    // 下一页
    nextPage(){
      this.page++;
      this.changePage(this.page);
     }


    // 首页
    topPage(){
      this.page=1;
    }
    // 尾页
    endPage(){
      this.page=this.totalPages;  
    }

    // 改变页号，更新表格所在页数的数据
    changePage(page:number):void{
      if(page>0 && page<this.totalPages){ //正常之间的
        this.page=page;
      } else if(page <= 0){ //页号小于首页
        this.page=1;
      } else { //页号大于尾页号
        page=this.totalPages;
        this.page=this.totalPages;
      }
    }
}

【注释】

• 之所以在改变页数数，table数据自动刷新到指定页书：是因为page等变量是全局变量，所以page改变时，table自动刷新
• 每次page的值改变时都会走一遍*ngFor循环，*ngIf判断该条记录在该页吗？比如当page=2时，i=1，此时i不在 5~9之间；此次循环结束进入下一次循环，i=2.。。。一次判断，当i=5时，i在5~9之间，第5条记录将显示出来
• 当页数页数改变时，要判断是否超出了总的页数，即changePage()的实现的功能
• 起到假分页的主要知识点就是：
  
  • *ngFor循环：遍历每条数据（索引，记录记录数）
  • **ngIf 判断：限制显示的记录数，即限制哪几条数据才能显示到该页
    最后效果图：

【总结】

知识在于积累与探索，虽然现在看起来这个功能实现起来也不是多么难，但是对于一个小白来说，此过程还是有点坎坷的，加油！

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!