angularui 分页
分页组件的使用
<!DOCTYPE html>
<html lang="en" ng-app="myApp">
<head>
<meta charset="UTF-8">
<title>pagination+table</title>
<link rel="stylesheet" href="http://cdn.static.runoob.com/libs/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="http://cdn.static.runoob.com/libs/jquery/2.1.1/jquery.min.js"></script> <script src="http://cdn.static.runoob.com/libs/angular.js/1.4.6/angular.min.js"></script>
<script src="http://cdn.bootcss.com/angular-ui-bootstrap/2.2.0/ui-bootstrap-tpls.js"></script>
<style> </style>
<script>
angular.module('myApp',['ui.bootstrap']).controller("paginationCtrl",function($scope,$log){
$scope.data=[
{index:'1',title:"标题一",content:'content 1'},
{index:'2',title:"标题一",content:'content 1'},
{index:'3',title:"标题一",content:'content 1'},
{index:'4',title:"标题一",content:'content 1'},
{index:'5',title:"标题一",content:'content 1'},
{index:'6',title:"标题一",content:'content 1'},
{index:'7',title:"标题一",content:'content 1'},
{index:'8',title:"标题一",content:'content 1'},
{index:'9',title:"标题一",content:'content 1'},
{index:'10',title:"标题一",content:'content 1'},
{index:'11',title:"标题一",content:'content 1'},
{index:'12',title:"标题一",content:'content 1'},
{index:'13',title:"标题一",content:'content 1'},
{index:'14',title:"标题一",content:'content 1'},
{index:'15',title:"标题一",content:'content 1'},
{index:'16',title:"标题一",content:'content 1'},
{index:'17',title:"标题一",content:'content 1'},
{index:'18',title:"标题一",content:'content 1'}
];
$scope.sec=[{id:1,name:"1"},{id:2,name:"2"},{id:4,name:"4"}]
$scope.totalItems=$scope.data.length;//条目总数
$scope.currentPage=1;//当前页面数
$scope.pageSize=4;
$scope.pageNum=Math.ceil($scope.totalItems/$scope.pageSize); $scope.allItem=[];
for(var i=0;i<$scope.totalItems;i+=$scope.pageSize){
$scope.allItem.push($scope.data.slice(i,i+$scope.pageSize));
} $scope.changsize=function(){
$scope.pageNum=Math.ceil($scope.totalItems/$scope.pageSize);
$scope.currentPage=1;
$scope.allItem=[];
for(var i=0;i<$scope.totalItems;i=i+$scope.pageSize){
$scope.allItem.push($scope.data.slice(i,i+$scope.pageSize));
}
}
$scope.page=null;
$scope.changpage=function(){
if($scope.page>0&&$scope.page<=$scope.pageNum)
{$scope.currentPage=$scope.page;}
} })
</script>
</head>
<body>
<div ng-controller="paginationCtrl">
<div class="table">
<table class="table table-striped">
<thead>
<tr>
<th>序号</th>
<th>title</th>
<th>内容</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="item in allItem[currentPage-1]">
<td>{{item.index}}</td>
<td>{{item.title}}</td>
<td>{{item.content}}</td>
</tr>
</tbody>
</table>
</div>
每页显示<select id="" name="" ng-model="pageSize" ng-change="changsize()" ng-options="o.id as o.name for o in sec"> </select>
<div>跳至<input type="text" ng-model="page" ng-change="changpage()">
共{{pageNum}}页
共{{totalItems}}条数据
当前页{{currentPage}}
</div>
<div class="page">
<ul uib-pagination
boundary-links="true"
class="pagination-lg"
total-items="totalItems"
ng-model="currentPage"
items-per-page="pageSize"
previous-text="‹"
next-text="›"
first-text="«"
last-text="»"
max-size='7'
boundary-link-numbers="true"
> </ul>
<ul uib-pager total-items="totalItems" ng-model="currentPage" items-per-page="pageSize"></ul>
</div>
</div> <script type="text/ng-template" id='list.html'>
<ul>
<li ng-repeat="item in items">{{item}}</li>
</ul>
<!-- max-size 显示的页面数目
总条目 totalItems total-items
当前页面 currentPage ng-model
页面尺寸 pageSize items-per-page
页面数目 pageNum -->
</script> </body>
</html>
angularui 分页的更多相关文章
- angular-ui分页组件
http://angular-ui.github.io/bootstrap/#/pagination 分页组件只提供生成分页按钮,数据的显示需要使用ng-repeat, 注意设置 items-per- ...
- Angular+Angular-Ui实现分页（代码更加简单，更加容易懂哦）
前面写了个分页,但是个人认为只能玩玩,实际业务上的话代码太繁杂(笔者想走代码.性能精简化之路[不知道哪天才能成为高手~·YY一下无伤大雅]),逻辑上有点混乱.那么今天我们来看看另外一种只实现分页没有查 ...
- 如何将angular-ui的分页组件封装成一个指令
准备工作: (1)一如既往的我还是使用了requireJS进行js代码的编译 (2)必须引入angualrJS , ui-bootstrap-tpls-1.3.2.js , bootstrap.css ...
- 通过angularjs的directive以及service来实现的列表页加载排序分页
前两篇:(列表页的动态条件搜索,我是如何做列表页的)分别介绍了我们是如何做后端业务系统数据展示类的列表页以及动态搜索的,那么还剩下最重要的一项:数据展示.数据展示一般包含三部分: 数据列头 数据行 分 ...
- 通过angularjs的directive以及service来实现的列表页加载排序分页（转）
前两篇:(列表页的动态条件搜索,我是如何做列表页的)分别介绍了我们是如何做后端业务系统数据展示类的列表页以及动态搜索的,那么还剩下最重要的一项:数据展示.数据展示一般包含三部分: 数据列头 数据行 分 ...
- angular 分页插件的使用
html: <pagination total-items="totalItems" ng-model="currentPage" items-per-p ...
- 记一次SQLServer的分页优化兼谈谈使用Row_Number()分页存在的问题
最近有项目反应,在服务器CPU使用较高的时候,我们的事件查询页面非常的慢,查询几条记录竟然要4分钟甚至更长,而且在翻第二页的时候也是要这么多的时间,这肯定是不能接受的,也是让现场用SQLServerP ...
- js实现前端分页页码管理
用JS实现前端分页页码管理,可以很美观的区分页码显示(这也是参考大多数网站的分页页码展示),能够有很好的用户体验,这也是有业务需要就写了一下,还是新手,经验不足,欢迎指出批评! 首先先看效果图: 这是 ...
- JdbcTemplate+PageImpl实现多表分页查询
一.基础实体 @MappedSuperclass public abstract class AbsIdEntity implements Serializable { private static ...
随机推荐
- C#打印九九乘法表
C#打印九九乘法表... ---------------------------------- using System; using System.Collections.Generic; usin ...
- WebGL开发入门
Getting started with WebGL development WebGL开发入门 What is Unity WebGL? 什么是Unity WebGL? The WebGL b ...
- 从yum提示空间不足到根分区扩容
记录一次安装软件的报错 --1261065212@qq.com 1.系统版本(VMware 虚拟机) [root@ansible-admin ~]# cat /etc/redhat-r ...
- ajax和json
1.$ ajax({ url:"", data:{username:"admin"},//发送时携带的参数 type:"post/get", ...
- Java虚拟机说明书
JVM运行原理: Class的加载 过程:加载-验证-准备-解析-初始化-执行-卸载 加载:class文件(二进制字节流)被类加载器加载到内存中,将这个字节流所代表的静态存储结构转化为方法区的运行时数 ...
- python进阶学习（三）
本节通过SQLite了解数据库操作 ------------------------- 数据库支持 使用简单的纯文本只能实现有退限的功能,所需要引入数据库,完成更强大的功能,本节使用的简单数据库SQL ...
- 介绍下Python的两个标准库 os 和 sys
import sysprint(sys.path) #python 2 中报错 ....,打印的是绝对路径(***\\python\\lib\\site-packages# 第三方库,后退一级为标准库 ...
- java多线程sleep和wait方法的区别
分别创建了三个类,一个测试类,两个线程类实现Runnable接口. 当有notify()唤醒线程时,执行的结果如下: 当把TestSleepaWait.class.notify();语句注释后,即没有 ...
- 手工删除crfclust.bdb文件
环境:RHEL 6.5 + Oracle 11.2.0.4 RAC 现象:巡检发现自己的测试环境节点2的空间使用率过高,进一步查询,发现大文件是GI目录下crfclust.bdb文件. crfclus ...
- 【★】SPF(Dijkstra)算法完美教程