angular 分页2
http://www.alliedjeep.com/2547.htm
AngularJS Code (Users.js)
var Users = angular.module('Users', []);
Users.controller('UserList', function($scope, $http) {
$scope.start = 0;
$scope.showLimit = 10;
$scope.count = 0;
/* Default Users List */
$http.get('welcome/get_users' + '/' + $scope.start + '/' + $scope.showLimit).success(function(data){
$scope.users = data;
});
/* Count Users */
$http.get('welcome/count_users').success(function(data){
$scope.count = data;
});
/* Pagination */
$scope.page = function (start) {
$scope.start = start < 0 ? 0 : start;
if (start >= $scope.count) $scope.start = $scope.count - $scope.showLimit;
$http.get('welcome/get_users' + '/' + $scope.start + '/' + $scope.showLimit).success(function(data){
$scope.users = data;
});
}
});
HTML Code
<head>
<script src="angular.js"></script>
<script src="Users.js"></script>
</head>
<body ng-controller="UserList">
<div id="container">
<div id="user_list">
Search: <input class="query" type="text" ng-model="query" placeholder="Query">
<hr />
<table>
<thead>
<th>ID</th>
<th>User Name</th>
<th>Phone Number</th>
<th>Email</th>
</thead>
<tbody>
<tr ng-repeat="user in users | filter:query">
<td>{{user.id}}</td>
<td>{{user.user_name}}</td>
<td>{{user.phone_number}}</td>
<td>{{user.email}}</td>
</tr>
</tbody>
</table>
<hr />
<button ng-click="page(0)">First</button>
<button ng-click="page(start - showLimit)">Prev</button>
<button ng-click="page(start + showLimit)">Next</button>
<button ng-click="page(count - showLimit)">Last</button>
<input type="text" ng-model="gotoPage" />
<button ng-click="page(gotoPage * showLimit)">GO</button>
</div>
</div>
</body>
CSS Code (稍微美化了一下)
body {
margin: 40px;
font: 13px/20px normal Helvetica, Arial, sans-serif;
color: #4F5155;
}
#user_list {
margin: 15px;
}
#container {
margin: 10px;
border: 1px solid #D0D0D0;
box-shadow: 0 0 8px #D0D0D0;
}
input {
width: 40px;
height: 19px;
padding: 3px;
color: #555;
border-radius: 3px;
border: 1px solid #ccc;
}
input.query {
width: 100px;
}
button {
padding: 5px;
border: 1px solid #ccc;
border-radius: 3px;
}
table {
border-spacing: 0;
border-collapse: collapse;
}
td,th {
border: 1px solid #ccc;
text-align: center;
padding: 5px;
}
angular 分页2的更多相关文章
- angular分页插件tm.pagination 解决触发二次请求的问题
angular分页插件tm.pagination(解决触发二次请求的问题) DEMO: http://jqvue.com/demo/tm.pagination/index.html#?current ...
- angular分页指令
目前的多个项目中都用到分页这个功能,为了提高可复用性,我特地分离出来写了个分页的指令.直接贴代码,详情如下: index.html <body id="sBill" ng-c ...
- angular 分页插件的使用
html: <pagination total-items="totalItems" ng-model="currentPage" items-per-p ...
- angular分页插件tm.pagination二次触发问题解决歪方案
今天在学习angularjs的分页插件时遇到了一个前端的问题,谷歌浏览器开发者模式调试的时候发现每次点击分页刷新按钮会触发两次后台请求,ajax向后台发送了两次请求,这对于强迫症患者来说是一个比较恶心 ...
- angular 分页
http://jsfiddle.net/SAWsA/11/# <html xmlns:ng="http://angularjs.org" ng-app lang=" ...
- Angular简易分页设计(二)：封装成指令
(首先声明本文来自博客园本人原创,转载请说明出处.欢迎关注:http://www.cnblogs.com/mazhaokeng/) 之前我们讲过,Angular分页代码确实不难实现,但是由于在多个路由 ...
- 在angular中利用分页插件进行分页
必需:angular分页js和css 当然还有angular.js 还需要bootstrap的css angular.min.js (下面我直接把插件粘贴上去了,以免有的同学还要去找.是不是很贴 ...
- angular+bootstrap+MVC 之三，分页控件初级版
今天实现一个分页控件,效果如下: 1.HTML: <!doctype html> <!--suppress ALL --> <html ng-app="appT ...
- Angular.js+Bootstrap实现表格分页
最近一直学习Angular.js,在学习过程中也练习了很多的Demo,这里先贴一下表格+分页. 先上图看看最终结果: 不得不说Angular.js代码风格很受人欢迎,几十行代码清晰简洁的实现了上面的功 ...
随机推荐
- 图片的base64编码通过javascript生成图片--当前URL地址的二维码应用
前面的话 在电脑端发现一篇好的博文,想在手机上访问.这时,就必须打开手机浏览器输入长长的URL地址才行,非常不方便.如果在博客标题的后面跟一张小的图片,点击该图片后,出现一张二维码的大图,然后再通过手 ...
- 正确设置Linux的ulimit值的方法
学习swoole的时候有一个max_conn参数, max_conn 描述:服务器允许维持的最大TCP连接数 说明:设置此参数后,当服务器已有的连接数达到该值时,新的连接会被拒绝.另外,该参数的值不能 ...
- AngularJS：模块
ylbtech-AngularJS:模块 1.返回顶部 1. AngularJS 模块 模块定义了一个应用程序. 模块是应用程序中不同部分的容器. 模块是应用控制器的容器. 控制器通常属于一个模块. ...
- Oracle logminer 分析redo log（TOAD与PLSQL）
Oracle logminer 分析redo log Oracle 11g r2 RAC centos 6.5 设置时间格式 select to_char(sysdate,'yyyy-mm-dd hh ...
- c# 设置水印，消除水印
方案1: 图像处理 opencv etc 方案2: 开源框架,直接使用,已经优化 https://github.com/itext/itextsharp https://github.com/itex ...
- [iOS]UIImageView增加圆角
[iOS]UIImageView增加圆角 "如何给一个UIImageView增加圆角?有几种方法?各自区别?" 备注:本文参考自http://www.jianshu.com/p/d ...
- BIOS简单设置 解析“集成显卡”内存占用问题
很多使用集成显卡的用户会发现,在系统信息窗口中,内存容量和实际不一样.比如系统内存显示4GB,可用3.48G之类.这不可用的一部分内存到哪去了? 其实减少的这部分内存是被集成显卡占用当做显存使用了.而 ...
- 2015.9.28 不能将多个项传入“Microsoft.Build.Framework.ITaskItem”类型的参数 问题解决
方法是:项目->属性->安全性->启用ClickOnce安全设置, 把这个复选框前面的勾去掉就可以了.
- 问题：oracle CLOB类型；结果：oracle中Blob和Clob类型的区别
BLOB和CLOB都是大字段类型,BLOB是按二进制来存储的,而CLOB是可以直接存储文字的.其实两个是可以互换的的,或者可以直接用LOB字段代替这两个.但是为了更好的管理ORACLE数据库,通常像图 ...
- C#WinForm如何调整控件的Tab按键顺序
在日常生活中,很多用户都会有使用Tab键的习惯.而在C#的WinForm开发中,Tab按键的顺序默认是你拖拽进窗体的顺序.那么我们如何修改这个顺序呢?答案如下(以VS2010为例). 只需要点击[视图 ...