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 相关文章推荐
phpwind放自动注册方法
Dec 02 Javascript
jquery实现metro效果示例代码
Sep 06 Javascript
Jquery EasyUI中弹出确认对话框以及加载效果示例代码
Feb 13 Javascript
JS实现仿QQ效果的三级竖向菜单
Sep 25 Javascript
浅析$(function) ready和onload 的区别
Sep 03 Javascript
vue中axios解决跨域问题和拦截器的使用方法
Mar 07 Javascript
bootstrap动态调用select下拉框的实例代码
Aug 09 Javascript
微信小程序实现文字从右向左无限滚动
Nov 18 Javascript
vue图片上传本地预览组件使用详解
Feb 20 Javascript
如何利用node转发请求详解
Sep 17 Javascript
uniapp微信小程序:key失效的解决方法
Jan 20 Javascript
Vue实现tab导航栏并支持左右滑动功能
Jun 28 Vue.js
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
基于mysql的bbs设计(四)
2006/10/09 PHP
基于PHP输出缓存(output_buffering)的深入理解
2013/06/13 PHP
PHP写的资源下载防盗链类分享
2014/05/12 PHP
PHP开源开发框架ZendFramework使用中常见问题说明及解决方案
2014/06/12 PHP
PHP如何实现Unicode和Utf-8编码相互转换
2015/07/29 PHP
WordPress中创建用户角色的相关PHP函数使用详解
2015/12/25 PHP
CodeIgniter钩子用法实例详解
2016/01/20 PHP
php与c 实现按行读取文件实例代码
2017/01/03 PHP
php实现网页端验证码功能
2017/07/11 PHP
PHP中上传文件打印错误错误类型分析
2019/04/14 PHP
关于firefox的ElementTraversal 接口 使用说明
2010/11/11 Javascript
javascript拖拽应用实例(二)
2016/03/25 Javascript
jQuery实现的粘性滚动导航栏效果实例【附源码下载】
2017/10/19 jQuery
在vue项目中,使用axios跨域处理
2018/03/07 Javascript
JavaScript中变量提升与函数提升经典实例分析
2018/07/26 Javascript
利用Node.js批量抓取高清妹子图片实例教程
2018/08/02 Javascript
如何用Node写页面爬虫的工具集
2018/10/26 Javascript
微信小程序云开发 搭建一个管理小程序
2019/05/17 Javascript
JS数组方法push()、pop()用法实例分析
2020/01/18 Javascript
vue实现登录功能
2020/12/31 Vue.js
Nodejs 微信小程序消息推送的实现
2021/01/20 NodeJs
[03:46]DOTA2英雄基础教程 维萨吉
2013/12/11 DOTA
Python实例一个类背后发生了什么
2016/02/09 Python
Python利用Beautiful Soup模块搜索内容详解
2017/03/29 Python
树莓派动作捕捉抓拍存储图像脚本
2019/06/22 Python
关于Python turtle库使用时坐标的确定方法
2020/03/19 Python
canvas实现手机的手势解锁的步骤详细
2020/03/16 HTML / CSS
小学英语教学反思
2014/01/30 职场文书
学校爱国卫生月活动总结
2014/06/25 职场文书
社团活动总结书
2014/06/27 职场文书
机关驾驶员违规检讨书
2014/09/13 职场文书
2016教师校本培训心得体会
2016/01/08 职场文书
2019 入党申请书范文
2019/07/10 职场文书
ORACLE数据库对long类型字段进行模糊匹配的解决思路
2021/04/07 Oracle
解决MySQL存储时间出现不一致的问题
2021/04/28 MySQL
java开发双人五子棋游戏
2022/05/06 Java/Android