对于大多数web应用来说显示项目列表是一种很常见的任务。通常情况下,我们的数据会比较多,无法很好地显示在单个页面中。在这种情况下,我们需要把数据以页的方式来展示,同时带有转到上一页和下一页的功能。现在在学习angular,使用angularjs 分页,基于 directive 实现,样式使用的 bootstrap,直接在 html代码中加入 标签即可调用。

先来看下效果图

实例代码

 app.directive('pagePagination', function(){
return {
restrict : 'E',
template : '<div class="pagination-box"><ul class="pagination"><li ng-class="page.style" ng-repeat="page in pageList"><a href="{{ page.link }}">{{ page.name }}</a></li></ul><ul class="pagination" ng-if="pageList[0]"><li class="page-count disabled"><span>共 <b>{{ pageRecord }}</b> 条记录 / 共 <b>{{ pageCount }}</b> 页</span></li></ul></div>',
replace : true,
scope : {
"pageId" : "=",
"pageRecord" : "=",
"pageSize" : "=",
"pageUrlTemplate" : "="
},
controller : ['$scope', function($scope){ $scope.getLink = function(pageId){
return $scope.pageUrlTemplate.replace("{PAGE}", pageId);
}; $scope.getPageList = function(){
var page = [];
var firstPage = parseInt(( $scope.pageId - 1 ) / $scope._pageSize ) * $scope._pageSize + 1;
page.push({
name : '首页',
style : $scope.pageId == 1 ? "disabled" : "",
link : $scope.getLink(1)
});
page.push({
name : '上一页',
style : $scope.pageId == 1 ? "disabled" : "",
link : $scope.getLink(1)
});
for( var pageId = firstPage; pageId < firstPage + 10; pageId ++){
if( pageId >= 1 && pageId <= $scope.pageCount ){
page.push({
name : pageId,
link : $scope.getLink(pageId),
style : pageId == $scope.pageId ? "active" : ""
});
}
}
page.push({
name : '下一页',
style : $scope.pageId == $scope.pageCount ? "disabled" : "",
link : $scope.getLink($scope.pageCount)
});
page.push({
name : '尾页',
style : $scope.pageId == $scope.pageCount ? "disabled" : "",
link : $scope.getLink($scope.pageCount)
});
return page;
}; $scope.pageInit = function(){
if( !$scope.pageId || !$scope.pageRecord ){
setTimeout(function(){
$scope.$apply(function(){
$scope.pageInit();
});
}, 10);
}else{
if( !!$scope.pageSize ){
$scope._pageSize = parseInt($scope.pageSize);
}else{
$scope._pageSize = 10;
}
$scope.pageId = parseInt($scope.pageId);
$scope.pageCount = parseInt(( $scope.pageRecord - 1 ) / $scope._pageSize ) + 1;
if( $scope.pageId < 1 ){
$scope.pageId = 1;
}else if( $scope.pageId > $scope.pageCount ){
$scope.pageId = $scope.pageCount;
}
$scope.pageLoad = true;
$scope.pageList = $scope.getPageList();
}
}; $scope.pageLoad = false;
$scope.pageInit();
}]
}
});

调用代码:

 <page-pagination
page-id="pageId"
page-record="recordCount"
page-url-template="urlTemplate">
</page-pagination>

以上就是angular.js分页代码的全部内容,希望对大家的学习有所帮助。

angular.js分页代码的实例的更多相关文章

  1. Angular.js分页代码

                $scope.reloadList=function(){                             $scope.findPage( $scope.pagina ...

  2. 纯js分页代码(简洁实用)

    纯js写的分页代码. 复制代码代码如下: //每页显示字数 PageSize=5000; //分页模式 flag=2;//1:根据字数自动分页 2:根据[NextPage]分页 //默认页 start ...

  3. angular js 分页

    一.编写实体类PageResult public class PageResult implements Serializable { private Long total;//总记录数 privat ...

  4. js分页代码

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"  "http://www.w3.org/TR/xh ...

  5. 非常不错的一个JS分页效果代码

    这里分享一个不错的js分页代码. 代码中cpage是页面计数,应为全局变量,可以随处调用它: totalpage是总页数. 与asp分页代码很类似,也是先取得记录总数,然后实现分页,基本的分页思路与原 ...

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

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

  7. angular.js 教程 -- 实例讲解

    angular.js AngularJS [1] 诞生于2009年,由Misko Hevery 等人创建,后为Google所收购.是一款优秀的前端JS框架,已经被用于Google的多款产品当中.Ang ...

  8. js分页实例

    js分页实例 案例1 1.js_pageusers.html <!DOCTYPE html> <html> <head> <title>js_pageu ...

  9. angular js 实例参数学习

    <!DOCTYPE html> <html> <head> <meta name="description" content=" ...

随机推荐

  1. python没有++和--操作

  2. 使用Array和[]创建数组的区别

    原文 简书原文:https://www.jianshu.com/p/57a337d20aea 大纲 前言 对使用Array和[]创建数组的区别的解释 个人理解 前言 JS定义数组变量时,在不需要给定数 ...

  3. crx 【 集合 】

    Vimium dbepggeogbaibhgnhhndojpepiihcmeb-1.64-Crx4Chrome.com.crx https://www.crx4chrome.com/down/731/ ...

  4. js中ajax连接服务器open函数的另外两个默认参数get请求和默认异步(open的post方式send函数带参数)(post请求和get请求区别:get:快、简单 post:安全,量大,不缓存)(服务器同步和异步区别:同步:等待服务器响应当中浏览器不能做别的事情)(ajax和jquery一起用的)

    js中ajax连接服务器open函数的另外两个默认参数get请求和默认异步(open的post方式send函数带参数)(post请求和get请求区别:get:快.简单 post:安全,量大,不缓存)( ...

  5. Android JNI编程(六)——C语言函数指针、Unition联合体、枚举、Typedef别名、结构体、结构体指针

    版权声明:本文出自阿钟的博客,转载请注明出处:http://blog.csdn.net/a_zhon/. 目录(?)[+] 一:函数指针 1.函数指针顾名思义就是定义一个指针变量指向一个函数,和一级指 ...

  6. Jquery前端分页插件pagination使用

    插件描述:JqueryPagination是一个轻量级的jquery分页插件.只需几个简单的配置就可以生成分页控件.并且支持ajax获取数据,自定义请求参数,提供多种方法,事件和回调函数,功能全面的分 ...

  7. 【codeforces 750D】New Year and Fireworks

    time limit per test2.5 seconds memory limit per test256 megabytes inputstandard input outputstandard ...

  8. Oracle 自己主动内存參数依赖性

    图例:在该图中使用了下面參数名称缩写: MT = MEMORY_TARGET MMT = MEMORY_MAX_TARGET ST = SGA_TARGET PAT = PGA_AGGREGATE_T ...

  9. Thread和ThreadPool

    Thread和ThreadPool 说到多线程异步编程,总会说起Thread.ThreadPool.Task.TPL这一系列的技术.总结整理了一版编程示例和实践,分享给大家. 先从Thread和Thr ...

  10. Java冒泡排序与直接选择排序代码随笔

    冒泡排序:延申的有很多种,有的是先确定最大值放到后面,有的是先确定最小值放到前边,还有就是反过来,先确定最小值的位置,但是本质都是:不断两两比较,交换位置...第一趟确定一个最大(最小)值放到前边(后 ...