Angular ui.bootstrap.pagination分页
更新时间:2017年1月23日 10:00 点击:2176
本文实例为大家分享了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); }
效果图:
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持脚本之家。
上一篇: js+css3实现旋转效果
相关文章
- Vue.js通过简洁的API提供高效的数据绑定和灵活的组件系统.这篇文章主要介绍了vue.js 表格分页ajax 异步加载数据的相关资料,需要的朋友可以参考下...2016-10-20
- 这篇文章主要为大家分享了Bootstrap教程JS插件滚动监听学习笔记,内容很详细,感兴趣的小伙伴们可以参考一下...2016-05-20
- 这篇文章主要介绍了Angular性能优化之第三方组件和懒加载技术,对性能优化感兴趣的同学,可以参考下...2021-05-11
- 这篇文章主要教大家如何利用Bootstrap3制作图片轮播效果,具有一定的参考价值,感兴趣的小伙伴们可以参考一下...2016-05-14
- 这篇文章主要为大家详细介绍了AngularJS实现分页显示数据库信息效果的相关资料,感兴趣的小伙伴们可以参考一下...2016-07-06
- 这篇文章主要给大家介绍了关于Angular利用HTTP POST下载流文件的相关资料,文中通过示例代码介绍的非常详细,对大家的学习或者使用Angular具有一定的参考学习价值,需要的朋友们下面来一起学习学习吧...2020-07-26
- 这篇文章主要介绍了基于jquery实现表格无刷新分页,功能实现了前端排序功能,增加了前端搜索功能,感兴趣的小伙伴们可以参考一下...2016-01-08
- 这篇文章主要给大家介绍了关于Angular如何处理未可知异常错误的相关资料,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧...2021-01-17
使用Angular CDK实现一个Service弹出Toast组件功能
本文主要写用cdk实现一个简单的Toast组件,使用的是cdk中的overlay模块,需要手动安装环境,具体安装方法及相关实现代码跟随小编一起看看吧...2021-07-28- 这篇文章主要介绍了BootStrap和jQuery相结合实现可编辑表格的相关资料,需要的朋友可以参考下...2016-04-23
详解JavaScript的AngularJS框架中的作用域与数据绑定
这篇文章主要介绍了JavaScript的AngularJS框架中的作用域与数据绑定,包括作用域的继承以及数据的单向和双向绑定等重要知识点,需要的朋友可以参考下...2016-03-07- 这篇文章主要为大家详细介绍了vue.js表格分页示例,ajax异步加载数据...2016-10-20
- 本篇文章主要介绍了AngularJS的ng-click传参的方法,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧 ...2017-06-24
- 本篇文章主要介绍了ionic+AngularJs实现获取验证码倒计时按钮,具有一定的参考价值,有兴趣的可以了解一下。...2017-04-27
- 这篇文章主要介绍了Angular实现form自动布局的相关资料,以代码片段的形式分析了Angular实现form自动布局的实现方法,感兴趣的小伙伴们可以参考一下...2016-02-01
- 这篇文章主要介绍了Angular ng-class的知识,并整理了相关资料,有兴趣的小伙伴可以参考下...2016-10-03
- 这篇文章主要介绍了初识angular框架后的所思所想,学习认识angular后的一些个人问题总结,需要的朋友可以参考下...2016-02-21
- 这篇文章主要介绍了AngularJS中实现用户访问的身份认证及表单验证功能的方法,Angular是Google开发的一款浏览器端的高人气JavaScript框架,需要的朋友可以参考下...2016-04-23
- 本篇文章主要介绍了AngularJS ui-router (嵌套路由)实例,具有一定的参考价值,感兴趣的小伙伴们可以参考一下。...2017-03-13
- 这篇文章主要为大家详细分享了laypage分页控件使用实例,具有一定的参考价值,感兴趣的小伙伴们可以参考一下...2016-05-20