【Angular】table假分页

【table的基本组成】

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

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

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

【table假分页】

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

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

【注释】

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@H_403_17@
import { User} from './user'@H_403_17@;

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

export class@H_403_17@ DatatableComponent@H_403_17@ implements@H_403_17@@H_403_17@ OnInit@H_403_17@ {@H_403_17@

  constructor() { }

  ngOnInit() {
  }

  users = Users;

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

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

    //上一页@H_403_17@
    prevIoUsPage(){
        this@H_403_17@.page--;
        this@H_403_17@.changePage(this@H_403_17@.page);  
    }

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


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

    // 改变页号，更新表格所在页数的数据@H_403_17@
    changePage(page:number):void@H_403_17@{
      if@H_403_17@(page>0@H_403_17@ && page<this@H_403_17@.totalPages){ //正常之间的@H_403_17@
        this@H_403_17@.page=page;
      } else@H_403_17@ if@H_403_17@(page <= 0@H_403_17@){ //页号小于首页@H_403_17@
        this@H_403_17@.page=1@H_403_17@;
      } else@H_403_17@ { //页号大于尾页号@H_403_17@
        page=this@H_403_17@.totalPages;
        this@H_403_17@.page=this@H_403_17@.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 判断：限制显示的记录数，即限制哪几条数据才能显示到该页
  最后效果图：

【总结】

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

【Angular】table假分页

【table的基本组成】

【table假分页】

【总结】

猜你在找的Angularjs相关文章