Angular ui.bootstrap.pagination分页
程序员文章站
2022-06-07 23:29:26
本文实例为大家分享了angular 分页的具体代码，供大家参考，具体内容如下
1、html
本文实例为大家分享了angular 分页的具体代码，供大家参考，具体内容如下
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, {
pageindex: $scope.currentpage,
pagesize: 10,
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">
<div class="form-group" id="toolbar">
<table>
<tr>
<td style="padding-left:10px;">
<button type="button" class="btn btn-success btn-sm" id="btnsearch" ng-click="search()">查询</button>
</td>
</tr>
</table>
<div class="bootstrap-table">
<div class="fixed-table-container" style="padding-bottom: 0px;">
<div class="table-responsive">
<table class="table table-condensed table-hover table-striped">
<thead>
<tr>
<th><div class="th-inner">序号</div></th>
<th><div class="th-inner">姓名</div></th>
<th><div class="th-inner">电话</div></th>
<th><div class="th-inner">邮箱</div></th>
<th><div class="th-inner">年龄</div></th>
<th><div class="th-inner">国家</div></th>
<th><div class="th-inner">城市</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>
<pagination class="pagination-sm pull-right"
ng-model="currentpage"
total-items="totalitems"
max-size="7"
ng-change="pagechanged()"
force-ellipses="true"
num-pages="numpages"
boundary-link-numbers="true"
boundary-links="false" @*是否显示第一个/最后一个按钮*@
rotate="false"
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);
}
效果图：
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。
上一篇： ai拼音和文字内容怎么排版?