继昨天写了knockoutjs+ jquery pagination+asp.net web Api 实现无刷新列表页 ,正好最近刚学习angularjs ,故琢磨着写一个angularjs版本的分页控件。

思路是自定义一个directive , 然后用isolated scope与父级controller $scope同步交互页数和当前页信息, 利用module的contant方法定义默认选项,从directive link 函数获取用户自定义选项设置。和以前写jquery插件的思路类似, 内部定义一个默认的defaults选项,利用jQuery.extend({},defaults,userCustomOption)合并用户自定义设置 ,然后动态构造html结构,只不过directive可以使用模板,模板中可以继续使用其他directive,所以构造html的工作可以分配给模板来做,劳累了半天总算可以跑起来了,劳动成果如下 angular.pagination.js

;
(function(angular) {
var myModule = angular.module("myModule", []); myModule.constant('pagexConfig', {
visiblePageCount: 10,
firstText: 'First',
lastText: 'Last',
prevText: 'Previous',
nextText: 'Next'
}).directive("pager", ['pagexConfig', function(pagexConfig) {
return {
link: function(scope, element, attrs) {
var visiblePageCount = angular.isDefined(attrs.visiblePageCount) ? attrs.visiblePageCount : pagexConfig.visiblePageCount;
scope.firstText = angular.isDefined(attrs.firstText) ? attrs.firstText : pagexConfig.firstText;
scope.lastText = angular.isDefined(attrs.lastText) ? attrs.lastText : pagexConfig.lastText;
scope.prevText = angular.isDefined(attrs.prevText) ? attrs.prevText : pagexConfig.prevText;
scope.nextText = angular.isDefined(attrs.nextText) ? attrs.nextText : pagexConfig.nextText;
scope.currentPage = 1; scope.pageChange = function(page) {
if (page >= 1 && page <= scope.pageCount) {
scope.currentPage = page;
} else {
scope.currentPage = 1;
}
} function build() {
var low,
high,
v; scope.pagenums = []; if (scope.pageCount == 0) {
return;
}
if (scope.currentPage > scope.pageCount) {
scope.currentPage = 1;
} if (scope.pageCount <= visiblePageCount) {
low = 1;
high = scope.pageCount;
} else {
v = Math.ceil(visiblePageCount / 2);
low = Math.max(scope.currentPage - v, 1);
high = Math.min(low + visiblePageCount - 1, scope.pageCount); if (scope.pageCount - high < v) {
low = high - visiblePageCount + 1;
}
} for (; low <= high; low++) {
scope.pagenums.push(low);
} scope.onPageChange();
} scope.$watch('currentPage+pageCount', function() {
build();
});
},
replace: true,
restrict: "E",
scope: {
pageCount: '=',
currentPage: '=',
onPageChange: '&'
},
template: '<ul class="pagination"><li ng-click="pageChange(1)">{{firstText}}</li>' +
'<li ng-click="pageChange(currentPage-1>0?currentPage-1:1)">{{prevText}}</li>' +
'<li ng-repeat="pagenum in pagenums" ng-click="pageChange(pagenum)" ng-class="{active:currentPage===pagenum}">{{pagenum}}</li>' +
'<li ng-click="pageChange(currentPage+1<=pageCount?currentPage+1:pageCount)">{{nextText}}</li>' +
'<li ng-click="pageChange(pageCount)">{{lastText}}</li></ul>'
}
}]);
})(angular)

简单起见, 只定义了几个简单的自定义属性, first | last | prev | next (Text) 顾名思义就是首页,尾页,上一页,下一页, visiblePageCount是用户可见的页码块。

server 端代码继续用昨天knockoutjs 的 ,获取页数的稍作改变

using System.Collections.Generic;
using System.Linq;
using System.Web.Http; namespace WebApp.Api
{
public class Product
{
public int Id { get; set; }
public string Name { get; set; }
public string Category { get; set; }
public decimal Price { get; set; }
} public class TestController : ApiController
{
Product[] products = new Product[]
{
new Product { Id = , Name = "Tomato Soup", Category = "Groceries", Price = },
new Product { Id = , Name = "Yo-yo", Category = "Toys", Price = 3.75M },
new Product { Id = , Name = "Hammer", Category = "Hardware", Price = 16.99M },
new Product { Id = , Name = "Tomato Soup", Category = "Groceries", Price = },
new Product { Id = , Name = "Yo-yo", Category = "Toys", Price = 3.75M },
new Product { Id = , Name = "Hammer", Category = "Hardware", Price = 16.99M } ,
new Product { Id = , Name = "Tomato Soup", Category = "Groceries", Price = },
new Product { Id = , Name = "Yo-yo", Category = "Toys", Price = 3.75M },
new Product { Id = , Name = "Hammer", Category = "Hardware", Price = 16.99M },
new Product { Id = , Name = "Tomato Soup", Category = "Groceries", Price = },
new Product { Id = , Name = "Yo-yo", Category = "Toys", Price = 3.75M },
new Product { Id = , Name = "Hammer", Category = "Hardware", Price = 16.99M },
new Product { Id = , Name = "Tomato Soup", Category = "Groceries", Price = },
new Product { Id = , Name = "Yo-yo", Category = "Toys", Price = 3.75M },
new Product { Id = , Name = "Hammer", Category = "Hardware", Price = 16.99M } ,
new Product { Id = , Name = "Tomato Soup", Category = "Groceries", Price = },
new Product { Id = , Name = "Yo-yo", Category = "Toys", Price = 3.75M },
new Product { Id = , Name = "Hammer", Category = "Hardware", Price = 16.99M }
}; [Route("api/getpagecount")]
[HttpGet]
public int GetCount()
{
return products.Length % == ? products.Length / : products.Length / + ;
} [Route("api/getdata")]
[HttpGet]
public IEnumerable<Product> GetProduct(int pageIndex, int pageSize)
{
return products.Skip(pageIndex * pageSize).Take(pageSize);
}
}
}

view层页码代码

<!DOCTYPE html>
<html> <head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width" />
<title>index</title>
<link href="css/style.css" rel="stylesheet" />
</head> <body ng-app="app">
<div ng-controller="myCtrl">
<pager page-count="pageCount" current-page="currentPage" on-page-change="onPageChange()" first-text="首页" last-text="最后一页"></pager>
</div>
<script src="js/angular-1.2.21.min.js"></script>
<script src="js/angular.pagination.js"></script>
<script src="js/app.js"></script>
</body> </html>

业务逻辑代码

 var app = angular.module( 'app', ['myModule'] );

        app.controller( 'myCtrl', function ( $scope, $http )
{
$scope.onPageChange = function ()
{
$http.get( '/api/getdata?pageIndex=' + ( $scope.currentPage - 1 ) + '&pageSize=10' ).success( function ( data )
{
$scope.items = data;
} );
} $http.get( '/api/getpagecount' ).success( function ( data )
{
$scope.pageCount = data;
} ); $http.get( '/api/getdata?pageIndex=0&pageSize=10' ).success( function ( data )
{
$scope.items = data;
} );
} );

运行效果图

纯html版本的已经 发布到github , 无须server端支持 https://github.com/leonwgc/angularjs-pagination

自定义angularjs分页控件的更多相关文章

  1. [转]Oracle分页之二:自定义web分页控件的封装

    本文转自:http://www.cnblogs.com/scy251147/archive/2011/04/16/2018326.html 上节中,讲述的就是Oracle存储过程分页的使用方式,但是如 ...

  2. C# WinForm自定义通用分页控件

    大家好,前几天因工作需要要开发一个基于WinForm的小程序.其中要用到分页,最开始的想法找个第三方的dll用一下,但是后来想了想觉得不如自己写一个玩一下 之前的web开发中有各式各样的列表组件基本都 ...

  3. 自定义WPF分页控件

    一.分页控件功能说明 实现如上图所示的分页控件,需要实现一下几个功能: 可以设置每页能够展示的最大列数(例如每页8列.每页16列等等). 加载的数组总数量超过设置的每页列数后,需分页展示. 可以直接点 ...

  4. WPF自定义DataGrid分页控件

    新建Custom Control,名:PagingDataGrid 打开工程下面的Themes\Generic.xaml xaml里面代码替换如下 <Style x:Key="{x:T ...

  5. Angularjs 分页控件

    实现效果: 实现步骤: 1.分页页面:page.html,页面多余样式,需要自己去除. <div class="row" ng-show="conf.totalIt ...

  6. jQuery 自定义插件 (分页控件)

    1.引入jqpage.js 2.html代码 <div id="page"> </div> 3.js 调用 $(function () { $.fn.jqp ...

  7. MVC中的自定义标签分页控件,仅供大家学习!!

    public static HtmlString ShowPageNavigate(this HtmlHelper htmlHelper, int currentPage, int pageSize, ...

  8. asp.net webform 自定义分页控件

    做web开发一直用到分页控件,自己也动手实现了个,使用用户自定义控件. 翻页后数据加载使用委托,将具体实现放在在使用分页控件的页面进行注册. 有图有真相,给个直观的认识: 自定义分页控件前台代码: & ...

  9. C# DataGridView自定义分页控件

    好些日子不仔细写C#代码了,现在主要是Java项目,C#.Net相关项目不多了,有点手生了,以下代码不足之处望各位提出建议和批评. 近日闲来无事想研究一下自定义控件,虽然之前也看过,那也仅限于皮毛,粗 ...

随机推荐

  1. 加载跨域的HTML页面AJAX

    //下面是谷歌浏览器处理方式,微信端,直接使用微信链接不作处理,,火狐浏览器另行处理... 借鉴地址:http://stackoverflow.com/questions/15005500/loadi ...

  2. Ubuntu 14.04--php的安装和配置

      更新源列表 打开"终端窗口",输入"sudo apt-get update"-->回车-->"输入root用户的密码"--& ...

  3. js_截取Url值

    "total" -->传递参数时的名字 var reg = new RegExp("(^|&)" + "total" + &q ...

  4. AJAX回调函数,返回JSON格式,应该返回自定义状态STATUS,但是却返回200

    返回200应该是方法已经执行通的意思,但是没返回自定义的status,仔细一看json格式拼错了...

  5. 华为oj 刷题记录之合唱团

    华为OJ-合唱队 描述 计算最少出列多少位同学,使得剩下的同学排成合唱队形 说明: N位同学站成一排,音乐老师要请其中的(N-K)位同学出列,使得剩下的K位同学排成合唱队形. 合唱队形是指这样的一种队 ...

  6. shell脚本删除指定mobileprovision

    由于某种原因,xcode帮我按照了几千个开发和上线证书,需要删除这部分证书: #dir="/Users/Ethan/Library/MobileDevice/Provisioning Pro ...

  7. 使用jQuery Uploadify在ASP.NET 上传附件

    Uploadify是JQuery的一个上传插件,实现的效果非常不错,带进度显示.Uploadify官方网址:http://www.uploadify.com/,在MVC中使用的方法可以参考 jQuer ...

  8. IIS Community Newsletter June 2013

    Announcements Windows 2012 Server R2 preview released Windows Server 2012 R2 provides a wide range o ...

  9. 《Entity Framework 6 Recipes》中文翻译系列 (21) -----第四章 ASP.NET MVC中使用实体框架之在页面中创建查询和使用ASP.NET URL路由过虑

    翻译的初衷以及为什么选择<Entity Framework 6 Recipes>来学习,请看本系列开篇 4.2. 构建一个搜索查询 搜索数据是几乎所有应用的一个基本功能.它一般是动态的,因 ...

  10. Chrome开发者工具不完全指南(四、性能进阶篇)

    前言 Profiles面板功能的作用主要是监控网页中各种方法执行时间和内存的变化,简单来说它就是Timeline的数字化版本.它的功能选项卡不是很多(只有三个),操作起来比较前面的几块功能版本来说简单 ...