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的更多相关文章

  1. angular分页插件tm.pagination 解决触发二次请求的问题

    angular分页插件tm.pagination(解决触发二次请求的问题) DEMO:  http://jqvue.com/demo/tm.pagination/index.html#?current ...

  2. angular分页指令

    目前的多个项目中都用到分页这个功能,为了提高可复用性,我特地分离出来写了个分页的指令.直接贴代码,详情如下: index.html <body id="sBill" ng-c ...

  3. angular 分页插件的使用

    html: <pagination total-items="totalItems" ng-model="currentPage" items-per-p ...

  4. angular分页插件tm.pagination二次触发问题解决歪方案

    今天在学习angularjs的分页插件时遇到了一个前端的问题,谷歌浏览器开发者模式调试的时候发现每次点击分页刷新按钮会触发两次后台请求,ajax向后台发送了两次请求,这对于强迫症患者来说是一个比较恶心 ...

  5. angular 分页

    http://jsfiddle.net/SAWsA/11/# <html xmlns:ng="http://angularjs.org" ng-app lang=" ...

  6. Angular简易分页设计(二)：封装成指令

    (首先声明本文来自博客园本人原创,转载请说明出处.欢迎关注:http://www.cnblogs.com/mazhaokeng/) 之前我们讲过,Angular分页代码确实不难实现,但是由于在多个路由 ...

  7. 在angular中利用分页插件进行分页

    必需:angular分页js和css  当然还有angular.js   还需要bootstrap的css angular.min.js (下面我直接把插件粘贴上去了,以免有的同学还要去找.是不是很贴 ...

  8. angular+bootstrap+MVC 之三，分页控件初级版

    今天实现一个分页控件,效果如下: 1.HTML: <!doctype html> <!--suppress ALL --> <html ng-app="appT ...

  9. Angular.js+Bootstrap实现表格分页

    最近一直学习Angular.js,在学习过程中也练习了很多的Demo,这里先贴一下表格+分页. 先上图看看最终结果: 不得不说Angular.js代码风格很受人欢迎,几十行代码清晰简洁的实现了上面的功 ...

随机推荐

  1. Python函数-enumerate()

    enumerate(sequence, [start=0]) 作用: 将可循环序列sequence以start开始分别列出序列数据和数据下标,即对一个可遍历的数据对象(如列表.元组或字符串),enum ...

  2. MySQL 使用pt-table-checksum 检查主从数据一致性 (实例转)

    1.基本环境: Mysql版本:5.6.12-log Percona-toolkit:2.2.18 Linux:centos6.5 2.安装 源码安装: # 一些依赖包 yum install per ...

  3. uboot中的TEXT_BASE

    转载:http://blog.csdn.net/xxblinux/article/details/6281295 我们都知道U-BOOT分为两个阶段,第一阶段是(~/cpu/arm920t/start ...

  4. C++字符集问题终极分析（可解决乱码问题）

    最近研究vc,windows的东西真是很傻瓜,啥都给你做好,有个好处就是开发方便了. 有个弊端就是完全按微软的一套进行,规则都是它定的,你得知道它的很多api, 开发出来的代码效率不高,不过却可以比较 ...

  5. Spring线程池由浅入深的3个示例

    作者博客主页:http://blog.csdn.net/chszs 本文提供了三个Spring多线程开发的例子,由浅入深,由于例子一目了然,所以并未做过多的解释.诸位一看便知. 前提条件: 1)在Ec ...

  6. Oracle 常见进程

    1 服务器进程 专用服务器连接:数据连接跟服务器上的一个进程之间存在1:1的映射 共享服务器连接:多个会话共享一个服务器进程池,由一个调度程序分配 1.1 专用服务器连接 专用服务器连接模式下,客户连 ...

  7. throw和throws的区别和联系

    突然发现今天诗兴大发,看来又得写点内容了. throw和throws对于Java程序员而言它们真的不是很陌生.但对于我这样的选手而言一提到它们的区别和联系就蒙圈了... 为了以后不蒙圈,今天就研究一下 ...

  8. 编译适用于TP-Link WR703N的OpenWRT固件

    编译适用于TP-Link WR703N TP-Link MR11U 以及使用AR9331芯片组的单WAN/LAN复用口的路由. 注:刷机有风险,刷机需谨慎.一般情况下是不会失败的,若无法通过捅Rese ...

  9. C# Dynamic通用反序列化Json类型并遍历属性比较

    背景 : 最近在做JAVA 3D API重写,重写的结果需要与原有的API结果进行比较,只有结果一致时才能说明接口是等价重写的,为此需要做一个API结果比较的工具,比较的内容就是Json内容,但是为了 ...

  10. adb基本命令总结（Android Debug Bridge）

    adb 是PC和设备连接的桥梁,可以通过adb对devices进行相关操作 adb devices           列出你的devices adb kill-server         杀掉ad ...