Angular ui.bootstrap.pagination分页

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

效果图:

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

时间: 2017-01-18

AngularJS 与Bootstrap实现表格分页实例代码

AngularJS 从开始发布到现在使用的开发的者越来越多,也表明大多数做前端的朋友在往这边转,毕竟是Google 公司出品的产品啊,所以最近自己也在学习这部分知识. AngularJS  Bootstrap实现表格分页: 最近一直学习Angular.js,在学习过程中也练习了很多的Demo,这里先贴一下表格+分页. 先上图看看最终结果: 不得不说Angular.js代码风格很受人欢迎,几十行代码清晰简洁的实现了上面的功能. 首先表格的数据源来自于,Server.js 点击下载.通过get取数后

Angular.js与Bootstrap相结合实现表格分页代码

先给大家简单介绍angular.js和bootstrap基本概念. AngularJS 是一个 JavaScript 框架.它可通过 <script> 标签添加到 HTML 页面. AngularJS 通过 指令 扩展了 HTML,且通过 表达式 绑定数据到 HTML. Bootstrap,来自 Twitter,是目前最受欢迎的前端框架.Bootstrap 是基于 HTML.CSS.JAVASCRIPT 的,它简洁灵活,使得 Web 开发更加快捷. 最近一直学习Angular.js,在学习过程

angularjs+bootstrap实现自定义分页的实例代码

目前在做一个java web页面,没有使用到框架的分页,所以需要自己实现分页,就想到了用angularjs来实现分页,数据通过ajax从后台获取. 插件 百度了一下,看到一个比较漂亮的插件,就直接用该插件,并修改了部分细节,使得适合我的项目,该插件地址是:(https://github.com/miaoyaoyao/AngularJs-UI) 效果图 使用方法 1.在网页的头部引入angularjs.bootstarp以及该插件,该分页插件主要是ng-pagination.css以及ng-pag

AngularJS bootstrap启动详解及实例代码

对于一般的使用者来说,AngularJS的ng-app都是手动绑定到某个dom元素.但是在一些应用中,这样就显得很不方便了. 绑定初始化 通过绑定来进行angular的初始化,会把js代码侵入到html中,但是对于新手使用来说,还是足够了! <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <script s

基于Bootstrap和jQuery构建前端分页工具实例代码

前言 为啥名字叫[前端分页工具]?因为我实在想不到什么好名字,如果想要更加贴切的理解这个工具,应该从业务来看 业务是这样的,有一个数据从后台传到前台,因为数据量不大,因此传过来之后直接显示即可,但是=.=所谓的数据量不大,最多也达到成百上千条,不可能全部显示出来,那么就需要分页 常规的分页是利用Ajax,通过传页偏移量到后台,后台查询数据库再返回数据,可以实现无刷新分页,拿到的数据也是最新的 前端分页 优点:一次传输数据,避免用户反复请求服务器,减少网络带宽.服务器调度压力.数据库查询.缓存查询

Angular+Bootstrap+Spring Boot实现分页功能实例代码

需要用到的js angular.js(用angular.min.js会导致分页控件不显示) ui-bootstrap-tpls.min.js angular-animate.js 需要用到的css bootstrap.min.css 由于本项目使用了路由,所以讲js以及css文件的应用都放在一个主html,请同学们在html页面中添加以上文件 在开始之前,我先简单介绍下分页的原理. 分页的实质其实就是一条sql语句, 比如查找第二页,即第16到第30条数据 在MySQL中是select * fr

AngularJS使用ngOption实现下拉列表的实例代码

下拉列表的简单使用 ng-option指令使用很简单,只需要绑定两个属性: 一个是ng-model用于获取选定的值: 另一个是ng-options用于确定下拉列表的元素数组. <select ng-model="engineer.currentActivity" class="form-control" ng-options="act for act in activities"></select> 上面这条语句就是把选择

Angularjs添加排序查询功能的实例代码

废话不多说了,直接给大家贴代码了,具体代码如下所示: <!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title></title> <script type="text/javascript" src="angular-1.3.0.js"></script&g

基于AngularJs + Bootstrap + AngularStrap相结合实现省市区联动代码

Angular JS (Angular.JS) 是一组用来开发Web页面的框架.模板以及数据绑定和丰富UI组件.它支持整个开发进程,提供web应用的架构,无需进行手工DOM操作. AngularJs 就是一个函数库,算不上一个框架,源码2万2千多行,提供了前端MVC的开发方式,有双向绑定,指令等特性,这是具有革命性的.我是多么反感jQuery 用选择器 选择元素 ,绑定事件,进行一大堆DOM操作,一旦代码过多,非常不好维护,html结构改变,又要重写js代码,不过 jQuery  对 ajax的

Angularjs 1.3 中的$parse实例代码

这次我们来看一下angular的Sandboxing Angular Expressions.关于内置方法的,核心有两块:Lexer和Parser.其中大家对$parse可能更了解一点.好了不多废话,先看Lexer的内部结构: 1.Lexer //构造函数 var Lexer = function(options) { this.options = options; }; //原型 Lexer.prototype = { constructor: Lexer, lex: function(){}

微信公众号测试账号自定义菜单的实例代码

自定义菜单接口可实现多种类型按钮,如下: 1.click:点击推事件 用户点击click类型按钮后,微信服务器会通过消息接口推送消息类型为event 的结构给开发者(参考消息接口指南),并且带上按钮中开发者填写的key值,开发者可以通过自定义的key值与用户进行交互: 2.view:跳转URL 用户点击view类型按钮后,微信客户端将会打开开发者在按钮中填写的网页URL,可与网页授权获取用户基本信息接口结合,获得用户基本信息. 3.scancode_push:扫码推事件 用户点击按钮后,微信客户

Java Web 简单的分页显示实例代码

本文通过两个方法:(1)计算总的页数. (2)查询指定页数据,实现简单的分页效果. 思路:首先得在 DAO 对象中提供分页查询的方法,在控制层调用该方法查到指定页的数据,在表示层通过 EL 表达式和 JSTL 将该页数据显示出来. 先给大家展示下效果图: 题外话:该分页显示是用 "表示层-控制层-DAO层-数据库"的设计思想实现的,有什么需要改进的地方大家提出来,共同学习进步.废话不多说了,开始进入主题,详细步骤如下所示: 1.DAO层-数据库 JDBCUtils 类用于打开和关闭数据