Angular ui.bootstrap.pagination分页


Posted in Javascript onJanuary 20, 2017

本文实例为大家分享了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); 
}

效果图:

Angular ui.bootstrap.pagination分页

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
javascript实现动态增加删除表格行(兼容IE/FF)
Apr 02 Javascript
javascript十个最常用的自定义函数(中文版)
Sep 07 Javascript
分享27款非常棒的jQuery 表单插件
Mar 28 Javascript
js模拟select下拉菜单控件的代码
May 08 Javascript
Eclipse去除js(JavaScript)验证错误
Feb 11 Javascript
jQuery回调函数的定义及用法实例
Dec 23 Javascript
javascript原型模式用法实例详解
Jun 04 Javascript
JavaScript中const、var和let区别浅析
Oct 11 Javascript
jQuery绑定事件的四种方式介绍
Oct 31 Javascript
js实现数组和对象的深浅拷贝
Sep 30 Javascript
微信小程序实现人脸识别
May 25 Javascript
Fetch超时设置与终止请求详解
May 18 Javascript
bootstrap中的 form表单属性role=&quot;form&quot;的作用详解
Jan 20 #Javascript
javascript容错处理代码(屏蔽js错误)
Jan 20 #Javascript
关于AngularJs数据的本地存储详解
Jan 20 #Javascript
html5 canvas 详细使用教程
Jan 20 #Javascript
canvas绘制万花筒效果(代码分享)
Jan 20 #Javascript
原生js实现网页顶部自动下拉/收缩广告效果
Jan 20 #Javascript
Angular.js中ng-if、ng-show和ng-hide的区别介绍
Jan 20 #Javascript
You might like
php 处理上百万条的数据库如何提高处理查询速度
2010/02/08 PHP
让ThinkPHP的模板引擎达到最佳效率的方法详解
2017/03/14 PHP
Javascript实例教程(19) 使用HoTMetal(5)
2006/12/23 Javascript
ASP.NET jQuery 实例7 通过jQuery来获取DropDownList的Text/Value属性值
2012/02/03 Javascript
jquery禁止输入数字以外的字符的示例(纯数字验证码)
2014/04/10 Javascript
jQuery插件slick实现响应式移动端幻灯片图片切换特效
2015/04/12 Javascript
Javascript实现检测客户端类型代码封包
2015/12/03 Javascript
js如何改变文章的字体大小
2016/01/08 Javascript
loading动画特效小结
2017/01/22 Javascript
Vue的移动端多图上传插件vue-easy-uploader的示例代码
2017/11/27 Javascript
Vue 获取数组键名的方法
2018/06/21 Javascript
用图片替换checkbox原始样式并实现同样的功能
2018/11/15 Javascript
小程序文字跑马灯效果
2018/12/28 Javascript
详解element-ui日期时间选择器的日期格式化问题
2019/04/08 Javascript
Vue自定义全局弹窗组件操作
2020/08/11 Javascript
vue移动端下拉刷新和上滑加载
2020/10/27 Javascript
[03:03]DOTA2 2017国际邀请赛开幕战队入场仪式
2017/08/09 DOTA
Python 字典dict使用介绍
2014/11/30 Python
用Python的Tornado框架结合memcached页面改善博客性能
2015/04/24 Python
十条建议帮你提高Python编程效率
2016/02/16 Python
举例讲解Python设计模式编程中对抽象工厂模式的运用
2016/03/02 Python
在python的类中动态添加属性与生成对象
2016/09/17 Python
python 截取 取出一部分的字符串方法
2017/03/01 Python
详解python--模拟轮盘抽奖游戏
2019/04/12 Python
使用Python在Windows下获取USB PID&amp;VID的方法
2019/07/02 Python
Python Selenium 之数据驱动测试的实现
2019/08/01 Python
Pycharm中Python环境配置常见问题解析
2020/01/16 Python
在PyTorch中使用标签平滑正则化的问题
2020/04/03 Python
在Ubuntu 20.04中安装Pycharm 2020.1的图文教程
2020/04/30 Python
python中Mako库实例用法
2020/12/31 Python
NOTINO英国:在线购买美容和香水
2020/02/25 全球购物
珠宝的促销活动方案
2014/08/31 职场文书
2014幼儿园家长工作总结
2014/11/10 职场文书
调解书格式范本
2015/05/20 职场文书
入党积极分子党支部意见
2015/06/02 职场文书
python APScheduler执行定时任务介绍
2022/04/19 Python