Angular 7+boostrap 分页

 

参数定义

 taskLists: any；//initData

 taskPageList: any; // paginationData

 pageNo = 1; // first page

  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;

      }

    } else {

      this.taskLists.length = 0;

      this.pageNo = 1;

      this.curPage = 1;

    }

    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();

  }

最终效果就是bootstrap 官网分页的那种效果



后台分页

pageSum:any;//后台计算总页数

getPageList(val: any) { //每次点击的页码

    this.curPage = val;

    let begin; // first page

    let end;  // last page

    begin = this.curPage - 5;

    if (begin < 1) {

      begin = 1;

    }

    end = begin + 9;

    if (end > this.pageSum) {

      end = this.pageSum;

    }



    begin = end - 9;

    if (begin < 1) {

      begin = 1;

    }

    this.pageCount = [];

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

      this.pageCount.push(i);

    }

  }

   // Previous page

 async  showPrePage() {

    this.curPage--;

    if (this.curPage >= 1) {

      this.getPageList(this.curPage);

      await this.getTaskLists(this.curPage);

    } else {

      this.curPage = 1;

    }

  }

 // next page

 async showNextPage() {

    this.curPage++;

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

      this.getPageList(this.curPage);

      await this.getTaskLists(this.curPage);

     }  else {

       this.curPage = this.pageSum;

    }

  }

 async onChangePage(value: any) {

      this.curPage = value;

      this.getPageList(value);

      await this.getTaskLists(value);

  }

  isActivePage(val: any) {

    return val === this.curPage;

  }

pageSum= (data.Count + 12 - 1) / 12;//我项目的每页条数都是固定的12，不需要用户去自己设置每页显示多少的

  return listDatas.Skip(12 * (number - 1)).Take(12).ToList();// listData 是存储过程拿到的数据集，不想改存储过程了，就用Linq对这个做数据集做操作了， number就是前台传到后台的页码

自测没问题，还要看测试部门的反馈