angular 分页

http://jsfiddle.net/SAWsA/11/#

<html xmlns:ng="http://angularjs.org" ng-app lang="en">
<head>
<meta charset="utf-8">
<link href="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.1.1/css/bootstrap.no-icons.min.css" rel="stylesheet">
<link href="http://netdna.bootstrapcdn.com/font-awesome/2.0/css/font-awesome.css" rel="stylesheet">
<script src="http://code.angularjs.org/1.1.0/angular.min.js"></script>
</head>
<body>
<script type="text/javascript">
var sortingOrder = 'name';
</script>
</div>
<div ng-controller="ctrlRead">
<div class="input-append">
<input type="text" ng-model="query" ng-change="search()" class="input-large search-query" placeholder="Search">
<span class="add-on"><i class="icon-search"></i></span>
</div>
<table class="table table-striped table-condensed table-hover">
<thead>
<tr>
<th class="id">Id <a ng-click="sort_by('id')"><i class="icon-sort"></i></a></th>
<th class="name">Name <a ng-click="sort_by('name')"><i class="icon-sort"></i></a></th>
<th class="description">Description <a ng-click="sort_by('description')"><i class="icon-sort"></i></a></th>
<th class="field3">Field 3 <a ng-click="sort_by('field3')"><i class="icon-sort"></i></a></th>
<th class="field4">Field 4 <a ng-click="sort_by('field4')"><i class="icon-sort"></i></a></th>
<th class="field5">Field 5 <a ng-click="sort_by('field5')"><i class="icon-sort"></i></a></th>
</tr>
</thead>
<tfoot>
<td colspan="6">
<div class="pagination pull-right">
<ul>
<li ng-class="{disabled: currentPage == 0}">
<a href ng-click="prevPage()">« Prev</a>
</li>
<li ng-repeat="n in range(pagedItems.length)"
ng-class="{active: n == currentPage}"
ng-click="setPage()">
<a href ng-bind="n + 1">1</a>
</li>
<li ng-class="{disabled: currentPage == pagedItems.length - 1}">
<a href ng-click="nextPage()">Next »</a>
</li>
</ul>
</div>
</td>
</tfoot>
<tbody>
<tr ng-repeat="item in pagedItems[currentPage] | orderBy:sortingOrder:reverse">
<td>{{item.id}}</td>
<td>{{item.name}}</td>
<td>{{item.description}}</td>
<td>{{item.field3}}</td>
<td>{{item.field4}}</td>
<td>{{item.field5}}</td>
</tr>
</tbody>
</table>
</div>
</body>
</html>

var searchMatch = function (haystack, needle) {
if (!needle) {
return true;
}
return haystack.toLowerCase().indexOf(needle.toLowerCase()) !== -1;
};

// init the filtered items
$scope.search = function () {
$scope.filteredItems = $filter('filter')($scope.items, function (item) {
for(var attr in item) {
if (searchMatch(item[attr], $scope.query))
return true;
}
return false;
});
// take care of the sorting order
if ($scope.sortingOrder !== '') {
$scope.filteredItems = $filter('orderBy')($scope.filteredItems, $scope.sortingOrder, $scope.reverse);
}
$scope.currentPage = 0;
// now group by pages
$scope.groupToPages();
};

// calculate page in place
$scope.groupToPages = function () {
$scope.pagedItems = [];

for (var i = 0; i < $scope.filteredItems.length; i++) {
if (i % $scope.itemsPerPage === 0) {
$scope.pagedItems[Math.floor(i / $scope.itemsPerPage)] = [ $scope.filteredItems[i] ];
} else {
$scope.pagedItems[Math.floor(i / $scope.itemsPerPage)].push($scope.filteredItems[i]);
}
}
};

$scope.range = function (start, end) {
var ret = [];
if (!end) {
end = start;
start = 0;
}
for (var i = start; i < end; i++) {
ret.push(i);
}
return ret;
};

$scope.prevPage = function () {
if ($scope.currentPage > 0) {
$scope.currentPage--;
}
};

$scope.nextPage = function () {
if ($scope.currentPage < $scope.pagedItems.length - 1) {
$scope.currentPage++;
}
};

$scope.setPage = function () {
$scope.currentPage = this.n;
};

// functions have been describe process the data for display
$scope.search();

// change sorting order
$scope.sort_by = function(newSortingOrder) {
if ($scope.sortingOrder == newSortingOrder)
$scope.reverse = !$scope.reverse;

$scope.sortingOrder = newSortingOrder;

// icon setup
$('th i').each(function(){
// icon reset
$(this).removeClass().addClass('icon-sort');
});
if ($scope.reverse)
$('th.'+new_sorting_order+' i').removeClass().addClass('icon-chevron-up');
else
$('th.'+new_sorting_order+' i').removeClass().addClass('icon-chevron-down');
};
};
ctrlRead.$inject = ['$scope', '$filter'];

angular 分页的更多相关文章

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 分页2
http://www.alliedjeep.com/2547.htm AngularJS Code (Users.js) var Users = angular.module('Users', []) ...
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>  <html ng-app="appT ...
Angular.js+Bootstrap实现表格分页
最近一直学习Angular.js,在学习过程中也练习了很多的Demo,这里先贴一下表格+分页. 先上图看看最终结果: 不得不说Angular.js代码风格很受人欢迎,几十行代码清晰简洁的实现了上面的功 ...

随机推荐

nodejs 不同请求获取前端传的参数
get方法参数在req.query中获取 router.get('/', function(req, res, next) { console.log("reqquery:",r ...
angular 的杂碎报错小知识
1:[ng:areq] Angular出现这种错误的原因,是由于没有在页面中使用模块引入controller导致的所以请确保你定义了这个controller后也引用了它. 2:Failed to ...
日志分隔工具Cronolog
注:本文转载自 https://blog.csdn.net/weixin_38860565/article/details/81633234 Cronolog 分割 Tomcat8 Catalina. ...
bae3.0第二步添加一个空的django项目
1.创建django项目: 进入bae应用源码目录(appidd01iud80bg)执行django-admin.py startproject blog2.修改index.py的内容如下所示 #-* ...
GXT-资源篇
官方下载地址:https://www.sencha.com/products/gxt/download/ 百度网盘下载地址:http://pan.baidu.com/s/1eRhAusE Blog资源 ...
CountDownLatch的介绍和使用
1.类介绍 java.util.concurrent 类 CountDownLatch java.lang.Object java.util.concurrent.CountDownLatch 一个同 ...
UTF-8, Unicode, GB2312格式串转换之C语言版
原住址:http://www.cnitblog.com/wujian-IT/archive/2007/12/13/37671.html /* author: wu.j ...
Nginx配置文件中文注释详解
Nginx ("engine x") 是一个高性能的 HTTP 和反向代理服务器,也是一个 IMAP/POP3/SMTP 代理服务器. Nginx 是由 Igor Sysoev ...
ORA-00600:内部错误代码,参数:[kpnxdcbk-2],[],[],[],[],[],[],[],[],[],[],[]
由于最近工作中常出现ORA-00600:内部错误代码,参数:[kpnxdcbk-2],[],[],[],[],[],[],[],[],[],[],[]这种异常!所以在这里讲一下我的处理方法. 笔者所遇 ...
Android APP使用系统签名
Android M平台在写APP测试使用MediaRecoder通过AudioSource.VOICE_CALL来录制通话上下行音的时候,需要权限 <uses-permission androi ...

angular 分页

angular 分页的更多相关文章

随机推荐

热门专题