angularjs实现的前端分页控件示例
前言：之前写个一个jQuery的分页显示插件，存在许多的bug，现在由于业务需要，学习的一点AngularJS，重新用angularjs实现了这个分页插件
实现效果图：
（效果图是加上了bootstrap的css文件）
用法：
angular-pagination.js代码：
/**
* angularjs分页控件
* Created by CHEN on 2016/11/1.
*/
angular.module('myModule', []).directive('myPagination', function () {
return {
restrict: 'EA',
replace: true,
scope: {
option: '=pageOption'
},
template: '<ul class="pagination">' +
'<li ng-click="pageClick(p)" ng-repeat="p in page" class="{{option.curr==p?\'active\':\'\'}}">' +
'<a href="javascript:;" rel="external nofollow" >{{p}}</a>' +
'</li>' +
'</ul>',
link: function ($scope) {
//容错处理
if (!$scope.option.curr || isNaN($scope.option.curr) || $scope.option.curr < 1) $scope.option.curr = 1;
if (!$scope.option.all || isNaN($scope.option.all) || $scope.option.all < 1) $scope.option.all = 1;
if ($scope.option.curr > $scope.option.all) $scope.option.curr = $scope.option.all;
if (!$scope.option.count || isNaN($scope.option.count) || $scope.option.count < 1) $scope.option.count = 10;
//得到显示页数的数组
$scope.page = getRange($scope.option.curr, $scope.option.all, $scope.option.count);
//绑定点击事件
$scope.pageClick = function (page) {
if (page == '«') {
page = parseInt($scope.option.curr) - 1;
} else if (page == '»') {
page = parseInt($scope.option.curr) + 1;
}
if (page < 1) page = 1;
else if (page > $scope.option.all) page = $scope.option.all;
//点击相同的页数 不执行点击事件
if (page == $scope.option.curr) return;
if ($scope.option.click && typeof $scope.option.click === 'function') {
$scope.option.click(page);
$scope.option.curr = page;
$scope.page = getRange($scope.option.curr, $scope.option.all, $scope.option.count);
}
};
//返回页数范围（用来遍历）
function getRange(curr, all, count) {
//计算显示的页数
curr = parseInt(curr);
all = parseInt(all);
count = parseInt(count);
var from = curr - parseInt(count / 2);
var to = curr + parseInt(count / 2) + (count % 2) - 1;
//显示的页数容处理
if (from <= 0) {
from = 1;
to = from + count - 1;
if (to > all) {
to = all;
}
}
if (to > all) {
to = all;
from = to - count + 1;
if (from <= 0) {
from = 1;
}
}
var range = [];
for (var i = from; i <= to; i++) {
range.push(i);
}
range.push('»');
range.unshift('«');
return range;
}
}
}
});
index.html代码：
<!doctype html> <html ng-app="app"> <head> <meta charset="UTF-8"> <title>Angularjs分页控件</title> <script src="angular.min.js"></script> <!-- 引入angularjs文件，而且是1.x版本的 --> <script src="angular-pagination.js"></script> <!-- 引入angularjs分页控件 --> <script src="app.js"></script> <!-- 引入app.js --> </head> <body> <!-- 控制器 --> <div ng-controller="myCtrl"> <!-- 分页控件指令 ，可以是元素 或者 属性 --> <my-pagination page-option="option"></my-pagination> </div> </body> </html>
app.js代码：
//引入 'myModele' 模块
var app = angular.module('app', ['myModule']);
app.contriller('myCtrl', function($scope){
//设置分页的参数
$scope.option = {
curr: 1, //当前页数
all: 20, //总页数
count: 10, //最多显示的页数，默认为10
//点击页数的回调函数，参数page为点击的页数
click: function (page) {
console.log(page);
//这里可以写跳转到某个页面等...
}
}
});
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。
相关推荐
-
教你用AngularJS框架一行JS代码实现控件验证效果
如上图所示,我们需要实现如下这些验证功能: 控件都是必输控件 都需要控制最大长度 第一次打开页面,控件不能显示为错误状态 输入内容再清空后,必输控件需要显示为错误状态 只有所有输入合法后,发布按钮才能变为可用状态 通过AngularJS,我们可以很轻松的实现这些要求,只需要1行JS代码.UI样式这里采用的是Bootstrap.先上示例代码: HTML. <!DOCTYPE html> <html lang="zh-cn" ng-app="ftitApp&qu
-
AngularJS自定义控件实例详解
本文实例讲述了AngularJS自定义控件.分享给大家供大家参考,具体如下: 自定义指令介绍 AngularJS 指令作用是在 AngulaJS 应用中操作 Html 渲染.比如说,内插指令 ( {{ }} ), ng-repeat 指令以及 ng-if 指令. 当然你也可以实现自己的.这就是 AngularJS 所谓的"教会 HTML 玩新姿势".本文将告诉你如何做到. 指令类型 可以自定义的指令类型如下: 元素 属性 CSS class Comment directives 这里面
-
AngularJS 文件上传控件 ng-file-upload详解
网上可以找到的 AngularJS 的文件上传控件有两个: angular-file-upload:https://github.com/nervgh/angular-file-upload ng-file-upload:https://github.com/danialfarid/ng-file-upload 这两个非常类似,连js文件的结构都是一样的.核心的js是.min.js,还都有一个-shim.min.js,用来支持上传进度条和上传暂停等高级功能. 按道理讲shim.js应该是可加可不
-
ANGULARJS中使用JQUERY分页控件
首篇,不知写何物,思来想去,敬上分页控件使用方法,望共同探讨. 分页乃前端数据展现之常用功能,而在我们使用的Angular js中,原生的分页需要将数据全部取到前端后,然后再到前端分页,在大批量数据操作时并不实用.接下来,我来介绍了将一种jquery的分页控件修改为Angularjs指令的方法. 首先在web项目中引用jquery1.10.Angularjs库文件以及jq-pagination控件. 我降指令名称为custompagination,为指令添加Html样式. 然后给指令添加对应的控
-
AngularJS仿苹果滑屏删除控件
AngularJs被用来开发单页面应用程序(SPA),利用AJAX调用配合页面的局部刷新,可以减少页面跳转,从而获得更好的用户体验.Angular的ngView及其对应的强大路由机制,是实现SPA应用的核心模块.本文所说的页面切换指的就是这个路由机制,即根据不同的url展示不同的视图. 前端开发中,为了对列表项进行快捷操作,有时就添个按钮来简单实现.但是,有时会发现按钮影响美观,甚至影响列表行的布局.稍在网上搜索无果,而写此仿苹果滑屏删除控件. 依赖项:angularJS.jQuery 测试浏览
-
学习使用AngularJS文件上传控件
前段时间做项目遇到一个需求是上传文件,大概需要实现的样式是这样子的,见下图: 需要同时上传两个文件.并且规定文件格式和文件大小.因为前端框架使用angular,且不想因为一个上传功能又引入一个jquery,所以在网上查找基于angular的上传控件,因为angular还算比较新,貌似都没有太成熟的插件,网上的教程也大多是复制粘贴,总之没起倒多大的作用...但是皇天不负有心人,最后还是让我遇到了这个功能强大的插件,让我有种相见恨晚的感觉呀,依靠官方文档和师兄的帮助,终于搞清楚了基本的使用方法.好东
-
Angularjs中使用layDate日期控件示例
layDate 控件地址:http://laydate.layui.com/ 前情:原来系统中使用的日期控件是UI bootstrap(地址:https://angular-ui.github.io/bootstrap/)里的.后来因为各种原因,要换掉UI bootstrap中的日期控件,改用layDate日期控件. 解决思路:将layDate的初始化及相关代码定义在指令里. 问题关键点:layDate操作的是Html元素的,怎么实现双向绑定,同步Angularjs模板值和Html的元素值. 指
-
AngularJS实现根据不同条件显示不同控件
由于项目需求,需要实现根据不同条件显示不同控件的功能.具体要求如下图所示: 即当选择"每单固定减"时,下方只显示"减免金额"一栏: 当选择"每单固定折扣"时,下方只显示"折扣比例"一栏: 当选择"每单满额减"时,下方只显示"满..减.."两栏. 根据自己对angular的了解,应该可以很轻松的实现此功能. js设置控件的隐藏与显示,设置控件style的display和visibility
-
angularjs实现的前端分页控件示例
前言:之前写个一个jQuery的分页显示插件,存在许多的bug,现在由于业务需要,学习的一点AngularJS,重新用angularjs实现了这个分页插件 实现效果图: (效果图是加上了bootstrap的css文件) 用法: angular-pagination.js代码: /** * angularjs分页控件 * Created by CHEN on 2016/11/1. */ angular.module('myModule', []).directive('myPagination',
-
JavaScript实现前端分页控件
现在web注重用户体验与交互性,ajax 提交数据的方式很早就流行了,它能够在不刷新网页的情况下局部刷新数据.前端分页多是用ajax请求数据(其他方式也有比如手动构造表单模拟提交事件等).通过js将查询参数构造好发向后台,后台处理后以特定的格式返回,多为json,比较流行处理起来也很方便.当后台数据到达后,浏览器重新渲染界面当然也包括js分页控件,如果觉得每次绘制分页控件对前端性能有影响也可以不绘制,但实现起来相对麻烦. 本人写的分页控件参考了其他网友的代码,链接忘了,控件接受四个参数或一个对象
-
asp.net自定义分页控件示例
一..ascx页面 复制代码 代码如下: <%@ Control Language="C#" AutoEventWireup="true" CodeBehind="Pagination.ascx.cs" Inherits="IOCS.WEB.UserControl.Pagination" %><link href="../Content/Css/Pager.css" rel="s
-
分享一个asp.net pager分页控件
效果: js: 复制代码 代码如下: $.fn.extend({ JPager: function (cfg, pageIndex, pageSize) { if (cfg && pageIndex > 0 && pageSize>0) { var token = "#" + this.attr("id"); this.empty(); var pageFirst = function () { $(token).JPag
-
jquery实现pager控件示例
js: 复制代码 代码如下: $.fn.extend({ JPager: function (cfg, pageIndex, pageSize) { if (cfg && pageIndex > 0 && pageSize>0) { var token = "#" + this.attr("id"); this.empty(); var pageFirst = functio
-
MvcPager分页控件使用注意事项
初学MVC,做了个单页面应用,需要显示多个分页,并无刷新更新. 找到了MvcPager控件,非常好用,在使用ajax过程中遇到很多问题.慢慢调试和杨老师(MvcPaegr作者)请教,总于都解决了. 首先NuGet包添加上.搜索MvcPager可以找到. 控制器端必须引用 using Webdiyer.WebControls.Mvc; 后端就不多记录了,看下官方Demo差不多都理解了,主要记录下前端. <div> @Ajax.Pager(Model, new PagerOptions { Sho
-
AspNetPager分页控件源代码（Version 4.2）第1/2页
//AspNetPager分页控件源代码(Version 4.2): using System; using System.IO; using System.Web; using System.Web.UI; using System.Web.UI.WebControls; using System.Web.UI.HtmlControls; using System.Collections.Specialized; using System.Text; using System.Componen
-
asp.net中使用自定义控件的方式实现一个分页控件的代码
一.概述 在web开发中,常常需要显示一些数据,而为了方便排版及浏览,我们只需要显示所有记录中的一部分.一般情况下,我们采用分页来实现这个需求.实现分页的方法多种多样,在本文中,我们采用了一个分页空间来记录记录总数.当前页.总页数及页面大小等.为了有一个直观上的印象,先展示该控件运行后的效果,效果如下图所示: 二.实现方案 为了实现该效果图,在asp.net中,可以使用Custom Controls and User Controls两种方式,User Controls的实现方式及其简单,而且使