本文将分享angular2ng2-pagination分页组件的详细内容，并且还将对angular分页插件进行详尽解释，此外，我们还将为大家带来关于Angularpagination分页模块只提供分页
本文将分享angular2 ng2-pagination 分页组件的详细内容，并且还将对angular分页插件进行详尽解释，此外，我们还将为大家带来关于Angular pagination分页模块 只提供分页参数处理 不处理分页记录数据、Angular ui.bootstrap.pagination 分页、Angular ui.bootstrap.pagination分页、angular – 过滤和分页不适用于ngxpagination模板的相关知识，希望对你有所帮助。
本文目录一览：- angular2 ng2-pagination 分页组件（angular分页插件）
- Angular pagination分页模块 只提供分页参数处理 不处理分页记录数据
- Angular ui.bootstrap.pagination 分页
- Angular ui.bootstrap.pagination分页
- angular – 过滤和分页不适用于ngxpagination模板
angular2 ng2-pagination 分页组件（angular分页插件）
ng2-pagination 分页组件
1、安装插件
npm install ng2-pagination --save
2、如果使用System.js打包那么就需要配置systemjs.config.js文件
A. map中加入以下代码
'ng2-pagination': 'npm:ng2-pagination'
B. packages中添加以下代码
"ng2-pagination": {
main: 'index.js',defaultExtension: 'js'
}
3、app.module.ts主模块中添加此模块，并添加到imports
import {Ng2PaginationModule} from "ng2-pagination"
@NgModule({
imports: [
Ng2PaginationModule
],
4、创建file.component.ts文件，提供数据
import {Component} from "@angular/core";
@Component({
selector: "my-page",templateUrl: "./app/page.html"
})
export class PageComponent {
info: Array<Object>; //对象数组
constructor() {
this.info = [
{
"id": 1,"name": "html"
},{
"id": 2,"name": "css"
},{
"id": 3,"name": "jquey"
},{
"id": 4,"name": "angular"
},{
"id": 5,"name": "ionic"
},{
"id": 6,"name": "angular2"
},{
"id": 7,"name": "ionic2"
},{
"id": 8,"name": "react"
},{
"id": 9,"name": "node"
},{
"id": 10,"name": "webpack"
},{
"id": 11,"name": "typescript"
}
]
}
}
5、创建模板page.html界面
<ul>
<li *ngFor="let item of info | paginate: { itemsPerPage: 10,currentPage: p }">{{item.name}}</li>
</ul>
<pagination-controls (pageChange)="p = $event"></pagination-controls>
6、提高篇，分页的数据一般都是有父组件提供的，所以数据应该由属性传递给@Input然后获取他的值。 部分代码
父组件 .ts文件 提供数据
export class FatherComponent {
result: Array<Object>;
constructor() {
this.result = [
{
"id": 1,"name: "js"
}
]
}
}
父组件 .html文件
<!-- 把父组件的信息传递给分页组件,进行分页。 --> <my-page [info]="result"></my-page>
分页组件 .ts文件 使用Input模块获取属性传递过来的数据 info
import {Component,Input} from "@angular/core";
@Component({
selector: "my-page",templateUrl: "./app/page.html"
})
export class PageComponent {
// 使用@Input接受传递过来的变量,操作。
@input()
info: Array<Object>;
}
分页模板代码不变，通过info获取数据
<ul>
<li *ngFor="let item of info | paginate: { itemsPerPage: 10,currentPage: p }">{{item.name}}</li>
</ul>
<pagination-controls (pageChange)="p = $event"></pagination-controls>
7、最后修改分页英文字母为中文的文件
node_modules/ng2-pagination/dist/template.js 修改上一页、下一页
8、注意
其实，这个分页组件重在循环html部分内容，ts文件只是提供数据，所以，最好的用法就是，每个需要分页的组件的模板中，加入分页组件的这段HTML代码就可以了，不需要专门命名为page组件然后公用，这样有局限性，不同的分页内容不同，所以循环出来的字段名称肯定不同。所以最好不要由父组件提供数据，调用分页模板，这样有很大的局限性。
Angular pagination分页模块 只提供分页参数处理 不处理分页记录数据
1 <!DOCTYPE html>
2 <html lang="en">
3 <head>
4 <meta charset="UTF-8">
5 <title>angular demo-9 分页功能</title>
6 <script src="../plugins/angularjs/angular.min.js"></script>
7
8 <!-- 分页插件 -->
9 <link href="../plugins/angularjs/pagination.css">
10 <script src="../plugins/angularjs/pagination.js"></script>
11 <!-- 分页插件/ -->
12
13 <script>
14 var demo = angular.module("demoModule", [''pagination'']);
15 demo.controller("demoController", function ($scope, $http) {
16 $scope.paginationConf = {
17 currentPage: 1,
18 itemsPerPage: 2,
19 totalItems: 10,
20 onChange: function () {
21 // alert("变了");
22 console.log("变了");
23 }
24 };
25 /*
26 pagination功能特点：
27 1.双向绑定
28 改变相应的变量，则分页条就会发生相应的改变。
29 currentPage itemsPerPage totalItems都是双向绑定的
30 改变一个就会改变了
31 2.并不处理记录数据，页面记录数据的更新必须由我们自己完成。
32 注意:
33 pagination功能和记录数据显示完全没有关系，只提供分页参数处理。
34 面记录数据的更新必须由我们自己完成
35 */
36 $scope.increTotalItems = function(){
37 console.log($scope.paginationConf.totalItems);
38
39 $scope.nameList.push( "刘备" + $scope.nameList.length);
40 $scope.paginationConf.totalItems = $scope.nameList.length;
41
42 // $scope.paginationConf.totalItems = $scope.paginationConf.totalItems + 1;
43 console.log($scope.paginationConf.totalItems);
44 };
45
46 $scope.nameList = ["孙权", "刘备", "曹操", "大乔", "小乔"];
47
48 });
49 </script>
50
51 </head>
52 <body ng-app="demoModule" ng-controller="demoController">
53
54 <!--<p ng-repeat="name in nameList">{{name}}</p>-->
55
56 <table>
57 <tr ng-repeat="name in nameList" ng-model="nameList">
58 <td>{{name}}</td>
59 </tr>
60 </table>
61
62 <input type="button" ng-click="increTotalItems()" value="自增">
63 <input ng-model="paginationConf.currentPage">
64 <input ng-model="paginationConf.itemsPerPage">
65
66 <tm-pagination conf="paginationConf"></tm-pagination>
67 </body>
68 </html>
Angular ui.bootstrap.pagination 分页
1、Html
<!DOCTYPE html>
<html>
<head>
<Meta name="viewport" content="width=device-width" />
<title>MyPagination</title>
<link href="//netdna.bootstrapcdn.com/bootstrap/3.0.3/css/bootstrap.min.css" rel="stylesheet" />
<script src="~/Scripts/angular.js"></script>
<script src="~/Scripts/ui-bootstrap-tpls-0.13.0.min.js"></script>
<script>
var readyDataUrl = '@Url.Content("~/StudentManage/GetPagelist")';
var loadDataUrl = '@Url.Content("~/StudentManage/GetPagelist")';
var app = angular.module('app',['ui.bootstrap']);
app.controller('ctrl',['$log','$http','$scope',function ($log,$http,$scope) {
$scope.reportData = [];
$scope.maxSize = 7;
$scope.currentPage = 0;
$scope.totalItems = 0;
$scope.pageChanged = function () {
//showLoading("正在查询");
$http.post(loadDataUrl,{
pageIndex: $scope.currentPage,pageSize: 10,name: ""
})
.then(function (result) {
$scope.reportData = result.data.Data;
$scope.totalItems = result.data.recordTotal;
}).catch(function (error) {
$log.error('error:' + error);
}).finally(function () {
//closeLoading();
});
}
$scope.Inital = function () {
//showLoading("正在查询");
$http.post(readyDataUrl,name: ""
}).then(function (result) {
$scope.reportData = result.data.Data;
$scope.totalItems = result.data.recordTotal;
//closeLoading();
}).catch(function (error) {
$log.error('error:' + error);
}).finally(function () {
});
}
$scope.Inital();
$scope.search = function () {
//showLoading("正在查询");
$http.post(loadDataUrl,{})
.then(function (result) {
$scope.reportData = result.data.Data;
$scope.totalItems = result.data.recordTotal;
}).catch(function (error) {
$log.error('error:' + error);
}).finally(function () {
//closeLoading();
});
}
}]);
</script>
</head>
<body>
<div ng-app="app" ng-controller="ctrl">
<divid="toolbar">
<table>
<tr>
<td>
<button type="button"id="btnSearch" ng-click="search()">查询</button>
</td>
</tr>
</table>
<div>
<divhttps://www.jb51.cc/tag/ott/" target="_blank">ottom: 0px;">
<div>
<table>
<thead>
<tr>
<th><div>序号</div></th>
<th><div>姓名</div></th>
<th><div>电话</div></th>
<th><div>邮箱</div></th>
<th><div>年龄</div></th>
<th><div>国家</div></th>
<th><div>城市</div></th>
</tr>
</thead>
<tbody>
<tr ng-repeat="o in reportData">
<td><span ng-bind="o.Id"></span></td>
<td><span ng-bind="o.Name"></span></td>
<td><span ng-bind="o.Telephone"></span></td>
<td><span ng-bind="o.Email"></span></td>
<td><span ng-bind="o.Age"></span></td>
<td><span ng-bind="o.Country"></span></td>
<td><span ng-bind="o.City"></span></td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
<paginationitems-per-page="10" @*每页最大显示条数的数量。值小于1表明所有项目在一个页上*@
ng-model="currentPage"
total-items="totalItems" @*所有页中的项目总数*@
max-size="maxSize" @*限制分页按钮显示的数量大小*@
ng-change="pageChanged()" @*点击分页按钮触发的方法，可用于更改不同页面数据*@
boundary-links="false" @*是否显示第一个/最后一个按钮*@
boundary-link-numbers="true" @*是否显示第一个和最后一个页码*@
rotate="false" @*是否将当前激活页显示在中间*@
force-ellipses="true" @*当总页数大于最大显示页数（max-size）显示省略号按钮*@
prevIoUs-text="‹" @*上一个按钮的文本*@
next-text="›"> @*下一个按钮的文本*@
</pagination>
</div>
</div>
</body>
</html>
2、Action
[HttpPost]
public JsonResult GetPagelist(int pageIndex,int pageSize,string name)
{
int pageCount = 1;
int recordTotal = 0;
int topRecordTotal = 0;
List<Students> list = new List<Students>();
try
{
list = svc.GetAllStudent();
recordTotal = list.Count();
pageCount = (int)Math.Ceiling((decimal)recordTotal / pageSize);
topRecordTotal = (pageIndex - 1 < 0 ? 0 : pageIndex - 1) * pageSize;
list = list.Skip(topRecordTotal).Take(pageSize).ToList();
}
catch (Exception)
{
throw;
}
return Json(new
{
pageIndex = pageIndex,pageCount = pageCount,recordTotal = recordTotal,Data = list,},JsonRequestBehavior.AllowGet);
}
Angular ui.bootstrap.pagination分页
本文实例为大家分享了Angular 分页的具体代码，供大家参考，具体内容如下
1、Html
查询
ottom: 0px;">
