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 相关文章推荐
PPK 谈 JavaScript 的 this 关键字 [翻译]
Sep 29 Javascript
javascript下string.format函数补充
Aug 24 Javascript
JavaScript实现自己的DOM选择器原理及代码
Mar 04 Javascript
js交换排序 冒泡排序算法(Javascript版)
Oct 04 Javascript
JavaScript检测弹出窗口是否已经关闭的方法
Mar 24 Javascript
JS正则表达式学习之贪婪和非贪婪模式实例总结
Dec 26 Javascript
详解React-Router中Url参数改变页面不刷新的解决办法
May 08 Javascript
Vue2.x通用条件搜索组件的封装及应用详解
May 28 Javascript
微信小程序判断用户是否需要再次授权获取个人信息
Jul 18 Javascript
微信小程序canvas绘制圆角base64图片的实现
Aug 18 Javascript
从零搭一个自用的前端脚手架的方法步骤
Sep 23 Javascript
vue+springboot+element+vue-resource实现文件上传教程
Oct 21 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大批量插入数据库的3种方法和速度对比
2014/07/08 PHP
Laravel框架执行原生SQL语句及使用paginate分页的方法
2018/08/17 PHP
setTimeout和setInterval的浏览器兼容性分析
2007/02/27 Javascript
jQuery实现点击标题输入详细信息
2013/04/16 Javascript
浅谈JavaScript之事件绑定
2013/07/08 Javascript
js抽奖实现随机抽奖代码效果
2013/12/02 Javascript
封装了一个支持匿名函数的Javascript事件监听器
2014/06/05 Javascript
jquery获取一个元素下面相同子元素的个数代码
2014/07/31 Javascript
jquery实现点击页面计算点击次数
2015/01/23 Javascript
分离与继承的思想实现图片上传后的预览功能:ImageUploadView
2016/04/07 Javascript
jQuery动态加载css文件实现方法
2016/06/15 Javascript
微信小程序 HTTPS报错整理常见问题及解决方案
2016/12/14 Javascript
JS实现HTML标签转义及反转义
2020/04/14 Javascript
详解在 Angular 项目中添加 clean-blog 模板
2017/07/04 Javascript
基于vue.js中关于下拉框的值默认及绑定问题
2018/08/22 Javascript
Vue.js中对css的操作(修改)具体方式详解
2018/10/30 Javascript
微信小程序用户授权,以及判断登录是否过期的方法
2019/05/10 Javascript
Python中为什么要用self探讨
2015/04/14 Python
浅析Python中的序列化存储的方法
2015/04/28 Python
python绘制圆柱体的方法
2018/07/02 Python
Python获取好友地区分布及好友性别分布情况代码详解
2019/07/10 Python
python 求定积分和不定积分示例
2019/11/20 Python
Python字符串的修改方法实例
2019/12/19 Python
基于Python 的语音重采样函数解析
2020/07/06 Python
PyQt5-QDateEdit的简单使用操作
2020/07/12 Python
HTML5中drawImage用法分析
2014/12/01 HTML / CSS
DJI大疆无人机官方商城:全球领先的无人飞行器研发和生产商
2016/12/21 全球购物
智能家居、吸尘器、滑板车、电动自行车网上购物:Geekmaxi
2021/01/18 全球购物
排序都有哪几种方法?请列举。用JAVA实现一个快速排序
2014/02/16 面试题
党的群众路线教育实践活动心得体会900字
2014/03/07 职场文书
优秀教导主任事迹材料
2014/05/09 职场文书
财务人员担保书
2014/05/13 职场文书
理财学专业自荐书
2014/06/28 职场文书
市场营销毕业求职信
2014/08/07 职场文书
社区低保工作总结2015
2015/07/23 职场文书
tomcat的catalina.out日志按自定义时间格式进行分割的操作方法
2022/04/02 Servers