前端分页控制

css部分

.wrapper {

  color: white;

  height: 100%;

   100%;

  display: flex;

  flex-direction: column;

  align-items: center;

}

.content_head {

   95%;

  height: 10%;

  display: flex;

  align-items: center;

}

.content_head_height{

  height: 60%;

   100%;

  display: flex;

  flex-direction: row;

  border-radius:8px;

  background: #707070;

  align-items: center;

  justify-content:space-around ;

}

.content_body{

   95%;

  height: 70%;

}

.content_body_div{

   100%;

  height: 23%;

  display: flex;

  flex-direction: row;

  align-items: center;

  justify-content:space-around ;

  border: 1px solid white;

  margin-bottom: 1%;

}

.div_checked{

  background-color: #171B16 !important;

  border: 2px solid #33ff00 !important;

}

.vessel_font {

  font-family: Barlow;

  font-style: normal;

  font-weight: normal;

  font-size: 0.2rem;

  line-height: 0.2rem;

  color: #FFFFFF;

}

.align_center{

  text-align: center;

}

.content_foot{

   95%;

  height: 10%;

  display: flex;

  justify-content: space-between;

}

.page-info {

  font-size: 0.18rem;

  display: flex;

  flex-direction: column;

  justify-content: center;

  color: #B4B4B4;

  position: absolute;

  top: 30%;

  left: 0;

}

.triangle {

   0;

  height: 0;

  border-top: .2rem solid transparent;

  border-bottom: .2rem solid transparent;

  border-left: .2rem solid #D8D8D8;

}

.btn {

  background-color: #D8D8D8;

  border: none;

   4em;

  height: 1.6em;

  line-height: 1em;

  border-radius: 0.05rem;

}

.triangle {

   0;

  height: 0;

  border-top: 0.2rem solid transparent;

  border-bottom: 0.2rem solid transparent;

  border-left: 0.2rem solid #D8D8D8;

}

.left-triangle {

   0;

  height: 0;

  border-top: 0.2rem solid transparent;

  border-bottom: 0.2rem solid transparent;

  border-left: 0;

  border-right: 0.2rem solid #D8D8D8;

}

.page-button-wrap {

  display: flex;

  flex-direction: row;

  justify-content: center;

  font-size: 0.24rem;

  align-items: center;

  top: 50%;

  right: .1rem;

}

.back-wrap,

.font-wrap {

  display: flex;

  flex-direction: row;

}

.back-wrap {

  margin-right: 1em;

}

.firstPage {

  display: flex;

  flex-direction: row;

  justify-content: center;

  margin-right: 1em;

}

.lastPage {

  display: flex;

  flex-direction: row;

  justify-content: center;

  margin-left: 1em;

}

.page-info {

  font-size: 0.18rem;

  display: flex;

  flex-direction: column;

  justify-content: center;

  color: #B4B4B4;

  position: absolute;

  top: 30%;

  left: 0;

}

.span{

  display: inline-block;

  ;

}

.unread-wrap {

  display: inline-block;

   1em;

  height: 1em;

}

.unread td:nth-child(1) span.unread-wrap::before {

  content: '';

  display: inline-block;

  height: 0.2rem;

   0.2rem;

  border-radius: 50%;

  background-color: #6FFF84;

}

.page-btn {

  cursor: pointer;

}

 

html部分

<div class="wrapper">

        <div class="content_head vessel_font">

              <div class="content_head_height">

              <!-- <div style="12%;"> {{'instruction_time_lbl'|translate}}</div>

              <div style="8%;"> {{'crane_lbl'|translate}}</div>

              <div style="20%;"> {{'qc_sequence_lbl'|translate}}</div>

              <div style="8%;"> {{'job_seq_lbl'|translate}}</div>

              <div style="16%;"> {{'container_no_info_lbl'|translate}}</div>

              <div style="10%;"> {{'type_lbl'|translate}}</div>

              <div style="11%;">{{'vessel_pos_lbl'|translate}}</div> -->

            

                  <div style="12%;">Instruction Time</div>

                  <div style="8%;" class="align_center"> Crane ID</div>

                  <div style="20%;" class="align_center">QC Sequence</div>

                  <div style="8%;" class="align_center">Job Seq.</div>

                  <div style="16%;" class="align_center"> Container No.</div>

                  <div style="10%;" class="align_center"> Type</div>

                  <div style="11%;">Vessel Pos.</div>

            </div>

        </div>

        <div class="content_body">

          <div *ngFor="let rowData of vesselDisplay;let key=index" [ngClass]="{'div_checked': flag==key,'content_body_div':true,'vessel_font':true}" (click)="divSelected(key,rowData)">

                <div  style="10%;">{{rowData.time}}</div>

                <div class="align_center" style="8%;" >{{rowData.craneId}}</div>

                <div class="align_center" style="20%" >{{rowData.qcSequence}}</div>

                <div class="align_center" style="8%" >{{rowData.jobSeq}}</div>

                <div class="align_center" style="16%" >{{rowData.containerNo}}</div>

                <div class="align_center" style="10%" >{{rowData.type}}</div>

                <div  style="11%">{{rowData.vesselPos}}</div>

          </div>

      </div>

      <div class="content_foot">

            <div style="display: flex;flex-direction: column;justify-content: space-between;">

                <div style="font-size: 0.2rem;">

                    <span>No. of records:</span>

                    <span>{{vesselData.length}}</span>

                </div>

                <div style="font-size: 0.2rem;">

                    <span>Page:</span>

                    <span><span>{{currentPage}}</span> / <span> {{pageCount}}</span> </span>

                </div>

            </div>

            <div class="page-button-wrap">

                <div class="back-wrap" *ngIf="showBackBtn">

                    <div class="firstPage page-btn" (click)="first();">

                        <div class="left-triangle"></div>

                        <div class="left-triangle"></div>

                    </div>

                    <div class="left-triangle page-btn" (click)="previous();"></div>

                </div>

                <div class="font-wrap" *ngIf="showAfterBtn">

                    <div class="triangle page-btn" (click)="next();"></div>

                    <div class="lastPage page-btn" (click)="last();">

                        <div class="triangle"></div>

                        <div class="triangle"></div>

                    </div>

                </div>

            </div>

      </div>

  </div>

  

ts部分

 

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

@Component({

  selector: 'app-search-info',

  templateUrl: './search-info.component.html',

  styleUrls: ['./search-info.component.css']

})

export class SearchInfoComponent implements OnInit {

  public flag:string;

  constructor() { }

  public vesselData:Array<any>=[{time:'08/09/2018 14:34:21',craneId:'QC3',qcSequence:'VS/AGA/QC3/1/55/UD',jobSeq:38,containerNo:"EXLD 000079-D",type:"Discharge",vesselPos:'55H-01-05'},

  {time:'08/09/2018 14:34:21',craneId:'QC3',qcSequence:'VS/AGA/QC3/1/55/UD',jobSeq:38,containerNo:"EXLD 000079-D",type:"Discharge",vesselPos:'55H-01-06'},

  {time:'08/09/2018 14:34:21',craneId:'QC3',qcSequence:'VS/AGA/QC3/1/55/UD',jobSeq:38,containerNo:"EXLD 000079-D",type:"Discharge",vesselPos:'55H-01-07'},

  {time:'08/09/2018 14:34:21',craneId:'QC3',qcSequence:'VS/AGA/QC3/1/55/UD',jobSeq:38,containerNo:"EXLD 000079-D",type:"Discharge",vesselPos:'55H-01-08'},

  {time:'08/09/2018 14:34:21',craneId:'QC3',qcSequence:'VS/AGA/QC3/1/55/UD',jobSeq:38,containerNo:"EXLD 000079-D",type:"Discharge",vesselPos:'55H-01-09'},

  {time:'08/09/2018 14:34:21',craneId:'QC3',qcSequence:'VS/AGA/QC3/1/55/UD',jobSeq:38,containerNo:"EXLD 000079-D",type:"Discharge",vesselPos:'55H-01-10'},

  {time:'08/09/2018 14:34:21',craneId:'QC3',qcSequence:'VS/AGA/QC3/1/55/UD',jobSeq:38,containerNo:"EXLD 000079-D",type:"Discharge",vesselPos:'55H-01-11'},

  {time:'08/09/2018 14:34:21',craneId:'QC3',qcSequence:'VS/AGA/QC3/1/55/UD',jobSeq:38,containerNo:"EXLD 000079-D",type:"Discharge",vesselPos:'55H-01-12'},

  {time:'08/09/2018 14:34:21',craneId:'QC3',qcSequence:'VS/AGA/QC3/1/55/UD',jobSeq:38,containerNo:"EXLD 000079-D",type:"Discharge",vesselPos:'55H-01-13'},

  {time:'08/09/2018 14:34:21',craneId:'QC3',qcSequence:'VS/AGA/QC3/1/55/UD',jobSeq:38,containerNo:"EXLD 000079-D",type:"Discharge",vesselPos:'55H-01-14'},

  {time:'08/09/2018 14:34:21',craneId:'QC3',qcSequence:'VS/AGA/QC3/1/55/UD',jobSeq:38,containerNo:"EXLD 000079-D",type:"Discharge",vesselPos:'55H-01-15'},

  {time:'08/09/2018 14:34:21',craneId:'QC3',qcSequence:'VS/AGA/QC3/1/55/UD',jobSeq:38,containerNo:"EXLD 000079-D",type:"Discharge",vesselPos:'55H-01-16'},

  {time:'08/09/2018 14:34:21',craneId:'QC3',qcSequence:'VS/AGA/QC3/1/55/UD',jobSeq:38,containerNo:"EXLD 000079-D",type:"Discharge",vesselPos:'55H-01-17'},

  {time:'08/09/2018 14:34:21',craneId:'QC3',qcSequence:'VS/AGA/QC3/1/55/UD',jobSeq:38,containerNo:"EXLD 000079-D",type:"Discharge",vesselPos:'55H-01-18'},

  {time:'08/09/2018 14:34:21',craneId:'QC3',qcSequence:'VS/AGA/QC3/1/55/UD',jobSeq:38,containerNo:"EXLD 000079-D",type:"Discharge",vesselPos:'55H-01-19'}];

  public showLength: number = 4;

  public pageCount: number = 1;

  public currentPage: number =1;

  public vesselDisplay:any;

  public showBackBtn:boolean;

  public showAfterBtn:boolean;

  public selectedData:any;

 

ngOnInit() {

}

ngAfterContentChecked(): void {

  let start = this.showLength * (this.currentPage - 1);

  let end = this.showLength * this.currentPage;

  this.vesselDisplay = this.vesselData.slice(start, end);

  this.pageCount = this.vesselData.length>0?Math.ceil(this.vesselData.length / this.showLength):1;

  if (this.currentPage === 1) {

    this.showBackBtn = false;

  }

  if (this.currentPage === this.pageCount) {

    this.showAfterBtn = false;

  }

  if (this.currentPage < this.pageCount) {

    this.showAfterBtn = true;

  }

  if (this.currentPage > 1) {

    this.showBackBtn = true;

  }

}

next() {

  if (this.currentPage < this.pageCount) {

    this.currentPage++;

  }

}

last() {

  this.currentPage = this.pageCount;

}

first() {

  this.currentPage = 1;

}

previous() {

  if (this.currentPage > 1) {

    this.currentPage--;

  }

}

divSelected(key:string,rowData:any){

 this.flag=key;

 this.selectedData=rowData;

}

}