create database company

让我们在本地SQL Server上创建一个数据库。我希望您已经在计算机上安装了SQL Server 2017（也可以使用SQL Server 2008、2012或2016）。

CREATE TABLE [dbo].[CompanyDetails](  [CompanyId] [int] IDENTITY(1,1) NOT NULL,  [CompanyName] [nvarchar](100) NULL,  [City] [nvarchar](50) NULL,  [State] [nvarchar](50) NULL,  [Owner] [nvarchar](50) NULL,  [PublishYear] [int] NULL,  CONSTRAINT [PK_CompanyDetails] PRIMARY KEY CLUSTERED   
(  [CompanyId] ASC  
)WITH (PAD_INDEX = OFF, STATISTICS_NORECOMPUTE = OFF, _IGNORE_DUP_KEY = OFF, ALLOW_ROW_LOCKS = ON, ALLOW_PAGE_LOCKS = ON) ON [PRIMARY]  
) ON [PRIMARY]  
GO

现在，让我们添加存储过程。

Create Proc [dbo].[Usp_GetAllCompanies]  @PageNo INT ,  @PageSize INT ,  @SortOrder VARCHAR(200)  
As  
Begin  Select * From   (Select ROW_NUMBER() Over (  Order by CompanyName ) AS 'RowNum', *  from   [CompanyDetails]  )t  where t.RowNum Between ((@PageNo-1)*@PageSize +1) AND (@PageNo*@pageSize)  End

GetAllCompaniesCount

Create Proc [dbo].[Usp_getAllCompaniesCount]  
As  Begin  select count(CompanyId) from   [CompanyDetails]  
End

Web API

using System.Collections.Generic;  
using System.Data.Entity.Core.Objects;  
using System.Linq;  
using System.Web.Http;  
using Pagination.Models;  
namespace Pagination.Controllers  
{  public class PaginationController : ApiController  {  CompanyEntities2 db = new CompanyEntities2();  [HttpGet]  public object getAllCompanies(int pageNo, int pageSize, string sortOrder)  {  var oMyString = new ObjectParameter("totalCount", typeof(int));  var companyDetails = db.Usp_GetAllCompanies(pageNo, pageSize, sortOrder).ToList();  return companyDetails;  }  [HttpGet]  public object getAllCompaniesCount()  {  var companyDetailsCount = db.Usp_getAllCompaniesCount().SingleOrDefault();         return companyDetailsCount;  }  }  
}

前端

ng new pagination

步骤2

npm install bootstrap --save  

现在打开styles.css文件并添加Bootstrap文件引用。要在styles.css文件中添加引用，请添加以下行：

@import '~bootstrap/dist/css/bootstrap.min.css'; 

步骤3

ng g c pagination 

步骤4

ng generate service pagination  

步骤5

<div class="row">    <div class="col-12 col-md-12">    <div class="card">    <div class="card-header">    Companies 1-{{pageSize}} (Total:{{totalCompaniesCount}})    </div>    <div class="card-body position-relative">    <div class="table-responsive cnstr-record companie-tbl">    <table class="table table-bordered heading-hvr">    <thead>    <tr>    <th style="cursor: pointer;" [ngClass]="order =='CompanyNumber'? 'active':''"    (click)="setOrder('CompanyNumber')" width="80">Company Name.</th>    <th style="cursor: pointer;" [ngClass]="order =='CompanyType'? 'active':''"    (click)="setOrder('CompanyType')" width="75">City</th>    <th [ngClass]="order =='CompanyName'? 'active':''" style="cursor: pointer;"    (click)="setOrder('CompanyName')">State    </th>    <th [ngClass]="order =='OrgNo'? 'active':''" style="cursor: pointer;" (click)="setOrder('OrgNo')"    width="75">Owner    </th>    <th [ngClass]="order =='Street'? 'active':''" style="cursor: pointer; width:250px"    (click)="setOrder('Street')">Publish Year</th>    </tr>    </thead>    <tbody>    <tr *ngFor="let item of companies">    <td>{{item.CompanyName}}</td>    <td>{{item.City}}</td>    <td>{{item.State}}</td>    <td>{{item.Owner}}</td>    <td>{{item.PublishYear}}</td>    </tr>    </tbody>    </table>      </div>    <!-- Code by pagination -->    <div class="container mw-100">    <div class="row">    <div class="col-md-3"> </div>    <div *ngIf="companies !=0" class="col-md-6">    <ul class="pagination justify-content-center">    <li *ngFor="let page of pageField;let i=index" class="page-item">    <a (click)="showCompaniesByPageNumber(page,i)" [ngClass]="pageNumber[i] ? 'pageColor':'page-link'"    style=" margin-right: 5px;;margin-top: 5px">{{page}}    </li>    </ul>    <div style="text-align: center;">    Page {{currentPage}} of Total page {{paginationService.exactPageList}}    </div>    </div>    </div>    </div>    </div>    </div>    </div>    
</div>

步骤6

import { Component, OnInit } from '@angular/core';  
import { ApiService } from './api.service';  
import { PaginationService } from './pagination.service';  @Component({  selector: 'app-pagination',  templateUrl: './pagination.component.html',  styleUrls: ['./pagination.component.css']  
})  
export class PaginationComponent implements OnInit {  companies = [];  pageNo: any = 1;  pageNumber: boolean[] = [];  sortOrder: any = 'CompanyName';  //Pagination Variables  pageField = [];  exactPageList: any;  paginationData: number;  companiesPerPage: any = 5;  totalCompanies: any;  totalCompaniesCount: any;  constructor(public service: ApiService, public paginationService: PaginationService) { }  ngOnInit() {  this.pageNumber[0] = true;  this.paginationService.temppage = 0;  this.getAllCompanies();  }  getAllCompanies() {  this.service.getAllCompanies(this.pageNo, this.companiesPerPage, this.sortOrder).subscribe((data: any) => {  this.companies = data;  this.getAllCompaniesCount();  })  }  //Method For Pagination  totalNoOfPages() {  this.paginationData = Number(this.totalCompaniesCount / this.companiesPerPage);  let tempPageData = this.paginationData.toFixed();  if (Number(tempPageData) < this.paginationData) {  this.exactPageList = Number(tempPageData) + 1;  this.paginationService.exactPageList = this.exactPageList;  } else {  this.exactPageList = Number(tempPageData);  this.paginationService.exactPageList = this.exactPageList  }  this.paginationService.pageOnLoad();  this.pageField = this.paginationService.pageField;  }  showCompaniesByPageNumber(page, i) {  this.companies = [];  this.pageNumber = [];  this.pageNumber[i] = true;  this.pageNo = page;  this.getAllCompanies();  }  getAllCompaniesCount() {  this.service.getAllCompaniesCount().subscribe((res: any) => {  this.totalCompaniesCount = res;  this.totalNoOfPages();  })  }   
}

步骤7

@charset "utf-8";     
/* CSS Document */    
@media all{    *{padding:0px;margin:0px;}    
div{vertical-align:top;}    
img{max-width:100%;}    
html {-webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale;}    
body{overflow:auto!important; width:100%!important;}    
html, body{background-color:#e4e5e6;}    
html {position:relative; min-height:100%;}    .card{border-radius:4px;}    
.card-header:first-child {border-radius:4px 4px 0px 0px;}    /*Typekit*/    
html, body{font-family:'Roboto', sans-serif; font-weight:400; font-size:13px;}    
body{padding-top:52px;}    p{font-family:'Roboto', sans-serif; color:#303030; font-weight:400; margin-bottom:1rem;}    
input, textarea, select{font-family:'Roboto', sans-serif;}    h1,h2,h3,h4,h5,h6{font-family:'Roboto', sans-serif; font-weight:700;}    
h1{font-size:20px; color:#000000; margin-bottom:10px;}    
h2{font-size:30px;}    
h3{font-size:24px;}    
h4{font-size:18px;}    
h5{font-size:14px;}    
h6{font-size:12px;}    .row {margin-right:-8px; margin-left:-8px;}    
.col, .col-1, .col-10, .col-11, .col-12, .col-2, .col-3, .col-4, .col-5, 
.col-6, .col-7, .col-8, .col-9, .col-auto, .col-lg, .col-lg-1, .col-lg-10, 
.col-lg-11, .col-lg-12, .col-lg-2, .col-lg-3, .col-lg-4, .col-lg-5, .col-lg-6, 
.col-lg-7, .col-lg-8, .col-lg-9, .col-lg-auto, .col-md, .col-md-1, .col-md-10, 
.col-md-11, .col-md-12, .col-md-2, .col-md-3, .col-md-4, .col-md-5, .col-md-6, 
.col-md-7, .col-md-8, .col-md-9, .col-md-auto, .col-sm, .col-sm-1, .col-sm-10, 
.col-sm-11, .col-sm-12, .col-sm-2, .col-sm-3, .col-sm-4, .col-sm-5, .col-sm-6, 
.col-sm-7, .col-sm-8, .col-sm-9, .col-sm-auto, .col-xl, .col-xl-1, .col-xl-10, 
.col-xl-11, .col-xl-12, .col-xl-2, .col-xl-3, .col-xl-4, .col-xl-5, .col-xl-6, 
.col-xl-7, .col-xl-8, .col-xl-9, .col-xl-auto {padding-right:8px; padding-left:8px;}    .card-header{background-color:#f0f3f5; border-bottom:1px solid #c8ced3; 
font-size:13px; font-weight:600; color:#464646; 
text-transform:uppercase; padding:.75rem 8px;}       .cnstr-record th{white-space:nowrap;padding:.45rem .2rem; font-size:13px; 
border-bottom-width:0px!important;}    
.cnstr-record thead{background:#f0f3f5;}    .cnstr-record .form-control{font-size:13px; padding:0px 0rem 0px 0.2rem; 
height:calc(2rem + 2px);}    
.cnstr-record select.form-control{padding-left:.05rem;}    
.cnstr-record .table td, .cnstr-record .table th {vertical-align:middle;}    
.cnstr-record .table td{padding:.3rem;}    
.cnstr-record .table td h4{margin:0px;}    .wp-50{width:50px;}    
.wp-60{width:60px;}    
.wp-70{width:70px;}    
.wp-80{width:80px;}    
.wp-90{width:90px;}    
.wp-100{width:100px;}    
.mw-auto{min-width:inherit;}    
.expand-row{width:100%; border:solid 1px #596269; display:inline-block; 
border-radius:3px; width:16px; height:16px; vertical-align:top; 
background:#596269; color:#ffffff!important;}    
.expand-row img{vertical-align:top; position:relative; top:2px;}    
.sub-table th{font-weight:400; font-size:12px;}    
.sub-table td{background:#efefef;}    
.no-bg td{background:inherit;}    
.mw-100{max-width:100%;}    .activeTabColor{  color: #fff;  background-color: #000000;  
}   
.page-item:first-child .page-link {  margin-left: 0;  border-top-left-radius: .25rem;  border-bottom-left-radius: .25rem;  
}  .pageColor{  position: relative;  display: block;  padding: .5rem .75rem;  margin-left: -1px;  line-height: 1.25;  color: white!important;  background-color: black!important;  border: 1px solid #dee2e6;  
}  
.notAllowed{  position: relative;  display: block;  padding: .5rem .75rem;  margin-left: -1px;  line-height: 1.25;  color: #007bff;  background-color: #fff;  border: 1px solid #dee2e6;  cursor: not-allowed;  
}  
.page-link {  position: relative;  display: block;  padding: .5rem .75rem;  margin-left: -1px;  line-height: 1.25;  color: #007bff;  background-color: #fff;  border: 1px solid #dee2e6;  
}   
}

步骤8

import { Injectable } from '@angular/core';  @Injectable()  export class PaginationService {  //Pagination Variables  temppage: number = 0;  pageField = [];  exactPageList: any;  constructor() {  }  // On page load   pageOnLoad() {  if (this.temppage == 0) {  this.pageField = [];  for (var a = 0; a < this.exactPageList; a++) {  this.pageField[a] = this.temppage + 1;  this.temppage = this.temppage + 1;  }  }  }    
}

步骤9

import { Injectable } from '@angular/core';  
import { HttpClient } from '@angular/common/http';  
import { Observable } from 'rxjs';  @Injectable({  providedIn: 'root'  
})  
export class ApiService {  private url = "";  constructor(public http: HttpClient) {  }    getAllCompanies(pageNo,pageSize,sortOrder): Observable<any> {  this.url = 'http://localhost:59390/api/Pagination/getAllCompanies?pageNo=' + pageNo+'&pageSize='+pageSize+'&sortOrder='+sortOrder;  return this.http.get(this.url);  }  getAllCompaniesCount(): Observable<any> {  this.url = 'http://localhost:59390/api/Pagination/getAllCompaniesCount';  return this.http.get(this.url);  }  
}

步骤10

import { BrowserModule } from '@angular/platform-browser';  
import { NgModule } from '@angular/core';  import { AppComponent } from './app.component';  
import { ApiService } from './pagination/api.service';  
import { HttpClientModule } from '@angular/common/http';  
import { PaginationService } from './pagination/pagination.service';  
import { PaginationComponent } from './pagination/pagination.component';  @NgModule({  declarations: [  AppComponent,  PaginationComponent  ],  imports: [  BrowserModule,  HttpClientModule  ],  providers: [ApiService,PaginationService],  bootstrap: [AppComponent]  
})  
export class AppModule { }

步骤11