前端分页控制

css部分
.wrapper {
  color: white;
  height: 100%;
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.content_head {
  width: 95%;
  height: 10%;
  display: flex;
  align-items: center;
}
.content_head_height{
  height: 60%;
  width: 100%;
  display: flex;
  flex-direction: row;
  border-radius:8px;
  background: #707070;
  align-items: center;
  justify-content:space-around ;
}

.content_body{
  width: 95%;
  height: 70%;
}
.content_body_div{
  width: 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{
  width: 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 {
  width: 0;
  height: 0;
  border-top: .2rem solid transparent;
  border-bottom: .2rem solid transparent;
  border-left: .2rem solid #D8D8D8;
}

.btn {
  background-color: #D8D8D8;
  border: none;
  width: 4em;
  height: 1.6em;
  line-height: 1em;
  border-radius: 0.05rem;
}

.triangle {
  width: 0;
  height: 0;
  border-top: 0.2rem solid transparent;
  border-bottom: 0.2rem solid transparent;
  border-left: 0.2rem solid #D8D8D8;
}

.left-triangle {
  width: 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;
  width: 1em;
  height: 1em;
}

.unread td:nth-child(1) span.unread-wrap::before {
  content: '';
  display: inline-block;
  height: 0.2rem;
  width: 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="width:12%;"> {{'instruction_time_lbl'|translate}}</div>
              <div style="width:8%;"> {{'crane_lbl'|translate}}</div>
              <div style="width:20%;"> {{'qc_sequence_lbl'|translate}}</div>
              <div style="width:8%;"> {{'job_seq_lbl'|translate}}</div>
              <div style="width:16%;"> {{'container_no_info_lbl'|translate}}</div>
              <div style="width:10%;"> {{'type_lbl'|translate}}</div>
              <div style="width:11%;">{{'vessel_pos_lbl'|translate}}</div> -->
            
                  <div style="width:12%;">Instruction Time</div>
                  <div style="width:8%;" class="align_center"> Crane ID</div>
                  <div style="width:20%;" class="align_center">QC Sequence</div>
                  <div style="width:8%;" class="align_center">Job Seq.</div>
                  <div style="width:16%;" class="align_center"> Container No.</div>
                  <div style="width:10%;" class="align_center"> Type</div>
                  <div style="width: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="width:10%;">{{rowData.time}}</div>
                <div class="align_center" style="width:8%;" >{{rowData.craneId}}</div>
                <div class="align_center" style="width:20%" >{{rowData.qcSequence}}</div>
                <div class="align_center" style="width:8%" >{{rowData.jobSeq}}</div>
                <div class="align_center" style="width:16%" >{{rowData.containerNo}}</div>
                <div class="align_center" style="width:10%" >{{rowData.type}}</div>
                <div  style="width: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;
}

 

}
posted @ 2020-09-23 16:45  玄空2  阅读(83)  评论(0)  编辑  收藏  举报