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 相关文章推荐
WordPress 照片lightbox效果的运用几点
Jun 22 Javascript
Javascript(AJAX)解析XML的代码(兼容FIREFOX/IE)
Jul 11 Javascript
使用Jquery打造最佳用户体验的登录页面的实现代码
Jul 08 Javascript
JS命名空间的另一种实现
Aug 09 Javascript
jQuery选择器全集详解
Nov 24 Javascript
jquery中toggle函数交替使用问题
Jun 22 Javascript
javascript中的Function.prototye.bind
Jun 25 Javascript
为什么JavaScript没有块级作用域
May 22 Javascript
使用bootstrap typeahead插件实现输入框自动补全之问题及解决办法
Jul 07 Javascript
vue2.0 + element UI 中 el-table 数据导出Excel的方法
Mar 02 Javascript
vue todo-list组件发布到npm上的方法
Apr 04 Javascript
webpack file-loader和url-loader的区别
Jan 15 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中使用php://input处理相同name值的表单数据
2015/02/03 PHP
php面向对象中static静态属性和静态方法的调用
2015/02/08 PHP
实例分析PHP中PHPMailer发邮件
2017/12/13 PHP
PHP使用Redis长连接的方法详解
2018/02/12 PHP
PHP学习记录之数组函数
2018/06/01 PHP
PHP中十六进制颜色与RGB颜色值互转的方法
2019/03/18 PHP
不安全的常用的js写法
2009/09/15 Javascript
jQuery 1.5.1 发布,全面支持IE9 修复大量bug
2011/02/26 Javascript
javascript学习笔记(九) js对象 设计模式
2012/06/19 Javascript
IE不支持getElementsByClassName最终完美解决方案
2012/12/17 Javascript
jquery实现输入框动态增减的实例代码
2013/07/14 Javascript
jQuery实现自定义事件的方法
2015/04/17 Javascript
JS中产生标识符方式的演变
2015/06/12 Javascript
基于jQuery实现表格内容的筛选功能
2016/08/21 Javascript
禁用backspace网页回退功能的实现代码
2016/11/15 Javascript
ES6新特性之类(Class)和继承(Extends)相关概念与用法分析
2017/05/24 Javascript
js学习总结之dom2级事件基础知识详解
2017/07/27 Javascript
对Angular中单向数据流的深入理解
2018/03/31 Javascript
Swiper 4.x 使用方法(移动端网站的内容触摸滑动)
2018/05/17 Javascript
VUE使用 wx-open-launch-app 组件开发微信打开APP功能
2020/08/11 Javascript
Windows环境下python环境安装使用图文教程
2018/03/13 Python
在python中pandas的series合并方法
2018/11/12 Python
Python 给定的经纬度标注在地图上的实现方法
2019/07/05 Python
Python+Selenium使用Page Object实现页面自动化测试
2019/07/14 Python
python Qt5实现窗体跟踪鼠标移动
2019/12/13 Python
使用Python爬虫库BeautifulSoup遍历文档树并对标签进行操作详解
2020/01/25 Python
django处理select下拉表单实例(从model到前端到post到form)
2020/03/13 Python
用HTML5制作视频拼图的教程
2015/05/13 HTML / CSS
泰国汽车、火车和轮渡票预订网站:Bus Online Ticket
2017/09/09 全球购物
金融专业推荐信
2013/11/14 职场文书
公司合作协议书范本
2014/04/18 职场文书
师范生求职自荐信
2014/06/14 职场文书
公司的力量观后感
2015/06/05 职场文书
聊聊golang中多个defer的执行顺序
2021/05/08 Golang
教你如何使用Python实现二叉树结构及三种遍历
2021/06/18 Python
SQL优化老出错,那是你没弄明白MySQL解释计划用法
2021/11/27 MySQL