Angular 7+boostrap 分页

 

Angular 7+boostrap 分页

参数定义

 taskLists: any;//initData

 taskPageList: any; // paginationData

 pageNo = 1; // first page

  preShow = false;

  nextShow = false;

  pageSize = 12; // every page count

  curPage = 1; //currentPage

  pageCount: any ;

 代码:

ngOnInit(){

 this.pageCount = [1];//这个是为了进这个页面的时候默认有1页

}

 getPageList() {//主要的分页代码,页码一共10个

    if (this.taskLists.length >= 1) {

      if (this.taskLists.length % this.pageSize === 0) {

        this.pageNo = Math.floor(this.taskLists.length / this.pageSize);

      } else {

        this.pageNo = Math.floor(this.taskLists.length / this.pageSize) + 1;

      }

      if (this.pageNo < this.curPage) {

        this.curPage = this.curPage - 1;

      }

      if (this.pageNo === 1 || this.curPage === this.pageNo) {

        this.preShow = this.curPage !== 1;

        this.nextShow = false;

      } else {

        this.preShow = this.curPage !== 1;

        this.nextShow = true;

      }

    } else {

      this.taskLists.length = 0;

      this.pageNo = 1;

      this.curPage = 1;

    }

    // console.log(this.pageNo);

    this.taskPageList = this.taskLists.slice((this.curPage - 1) * this.pageSize, (this.curPage) * this.pageSize);

 

    let begin; // first page

    let end;  // last page

 

    begin = this.curPage - 5;

    if (begin < 1) {

      begin = 1;

    }

    end = begin + 9;

    if (end > this.pageNo) {

      end = this.pageNo;

    }

 

    begin = end - 9;

    if (begin < 1) {

      begin = 1;

    }

    this.pageCount = [];

    for (var i = begin; i <= end; i++) {

    this.pageCount.push(i);

    }

  }

  // Previous page

   showPrePage() {

    this.curPage--;

    if (this.curPage >= 1) {

      this.getPageList();

    } else {

      this.curPage = 1;

    }

  }

 // next page

  showNextPage() {

    this.curPage++;

    if (this.curPage <= this.pageNo) {

      this.getPageList();

    } else {

      this.curPage = this.pageNo;

    }

  }

 onChangePage(value: any) { //点击页码跳到对应页

      this.curPage = value;

      this.getPageList();

  }

最终效果就是这样的不过我是显示10个页码。

Angular 7+boostrap 分页

上一篇:Mybatis的PageHelper分页插件的PageInfo的属性参数,成员变量的解释,以及页面模板


下一篇:权限之分页