angularjs 分页精华代码
//pageinfo
$scope.pageSize=10;
$scope.currentType={{ current_type }};
$scope.currentPage={{ json_encode(current_page) }};
$scope.totalPage={{ json_encode(total_page) }};
$scope.pages = [];//分页数组
//下面3句是分页核心
var viewCount = 7;
var firstIdx = ($scope.currentPage<=parseInt(viewCount/2)+1?1:($scope.currentPage-parseInt(viewCount/2)));
var lastIndex = (firstIdx+viewCount-1>=$scope.totalPage?$scope.totalPage:firstIdx+viewCount-1);
if(lastIndex>=$scope.totalPage){
lastIndex = $scope.totalPage;
firstIndex = lastIndex - viewCount+1;
}
$scope.lastPage = lastIndex;
if(firstIdx<1){
firstIdx=1;
}
while(firstIdx<=lastIndex&&$scope.totalPage>1){
$scope.pages.push(firstIdx);
firstIdx++;
} ------------
注:
viewCount 指显示的页码数量,如(上一页,2,3,4,5,6,7,8,下一页)
设viewCount = 7
测试结果
输入当前页码1,总页数1 ,显示页码标签 $scope.pages = [];
输入当前页码1,总页数2 ,显示页码标签 $scope.pages = [1,2];
输入当前页码1,总页数3 ,显示页码标签 $scope.pages = [1,2,3];
输入当前页码1,总页数4 ,显示页码标签 $scope.pages = [1,2,3,4];
输入当前页码1,总页数5 ,显示页码标签 $scope.pages = [1,2,3,4,5];
输入当前页码1,总页数6 ,显示页码标签 $scope.pages = [1,2,3,4,5,6];
输入当前页码1,总页数7 ,显示页码标签 $scope.pages = [1,2,3,4,5,6,7];
输入当前页码5,总页数8 ,显示页码标签 $scope.pages = [2,3,4,5,6,7,8];
输入当前页码6,总页数9 ,显示页码标签 $scope.pages = [3,4,5,6,7,8,9];
输入当前页码7,总页数8 ,显示页码标签 $scope.pages = [4,5,6,7,8]; angularjs 的directive定义
.directive('noenter',function() {
return function(scope, element) {
element.on('keypress', function(e) {
if (e.which === 13) {
var page = element.val();
if(page>=1&&page<=scope.totalPage){
return scope.getData(page);
}else{
alert('输入页码超出范围!');
}
}
return true;
})
}
})
使用:
<input type="text" noenter class="goto-page">
angularjs 分页精华代码的更多相关文章
- php分页类代码带分页样式效果(转)
php分页类代码,有漂亮的分页样式风格 时间:2016-03-16 09:16:03来源:网络 导读:不错的php分页类代码,将类文件与分页样式嵌入,实现php查询结果的精美分页,对研究php分页原理 ...
- 百度分页样式代码 css+c#
通过c#输出html分页代码: /// <summary> /// 返回分页Html代码 /// </summary> /// <param name="pag ...
- bootstrap 分页样式代码
bootstrap 分页样式代码,废话不多说,直接上源码 <!DOCTYPE html> <html> <head> <title>Bootstrap ...
- AngularJS进阶(十四)AngularJS灵异代码事件
AngularJS灵异代码事件 注:请点击此处进行充电! 事情原委 router_sys.js源代码如下: 自己在html路由跳转的代码如下: 但是在实际路由过程中,却路由到了下面的状态,相应的页面中 ...
- 非常不错的一个JS分页效果代码
这里分享一个不错的js分页代码. 代码中cpage是页面计数,应为全局变量,可以随处调用它: totalpage是总页数. 与asp分页代码很类似,也是先取得记录总数,然后实现分页,基本的分页思路与原 ...
- ASP 三十二条精华代码 (1)
ASP 三十二条精华代码 (1) 2009-08-10 09:53:03 www.hackbase.com 来源:互联网 1. oncontextmenu="window.event.r ...
- angularjs分页组件
这是我第一次写博客,激动,首先,我也是个菜鸟,分享一下自己写的服务器端分页的代码,自己一步一步写的,其中也有参考别人的代码.技术比较渣,先这样了. // ====== 2019-1-3 ======/ ...
- 自定义angularjs分页控件
继昨天写了knockoutjs+ jquery pagination+asp.net web Api 实现无刷新列表页 ,正好最近刚学习angularjs ,故琢磨着写一个angularjs版本的分页 ...
- AngularJS 分页
前端源码: <div> <h1>列表页33</h1> <table> <thead> <tr><td>CandiID ...
随机推荐
- 44、NLP的其他分词功能测试
1. 命名实体识别功能测试 @Test public void testNer(){ if (NER.create("ltp_data/ner.model")<0) { Sy ...
- Oracle数据库中SYS、SYSTEM、DBSNMP、SYSMAN四用户的区别
[转] SYS.SYSTEM.DBSNMP. Oracle 数据库中 SYS.SYSTEM.DBSNMP.SYSMAN 四用户的区别 用户: SYS 用户: SYS,默认密码为 CHANGE_ON ...
- Python全栈开发day6
1. 简介 正则表达式本身是一种小型的.高度专业化的编程语言,而在python中,通过内嵌集成re模块,程序媛们可以直接调用来实现正则匹配.正则表达式模式被编译成一系列的字节码,然后由用C编写的匹配引 ...
- 【原】git如何删除本地和远程的仓库
今天操作git时遇到一个小问题:如何删除本地和远程的仓库,在网上巴拉一番解决了这个问题. 方法1: $rm testfile$git add -u $git commit -m "delet ...
- 用贝赛尔曲线把图片, 按钮, label 绘成圆 或圆角矩形
//创建圆形遮罩,把用户头像变成圆形 /* *CGPointMake(35, 35) 是绘图的中心点, 如果想把控件居中绘圆, 一般用控件的中心点, radius 是圆半径 startAn ...
- Hadoop 调研笔记
由于从各光伏电站采集的数据量较大,必须解决海量数据的查询.分析的问题.目前主要考虑两种方式:1. Hadoop大数据技术:2. Oracle(数据仓库)+BI: 本文仅介绍hadoop的技术 ...
- JS,JQuery的扩展方法
转 http://blog.csdn.net/tuwen/article/details/11464693 //JS的扩展方法: 1 定义类静态方法扩展 2 定义类对象方法扩展 ...
- ASP.NET MVC 介绍
ASP.NET分为WebForm(数据访问层 界面层 业务逻辑层)和MVC MVC : Model(模型)是应用程序中用于处理应用程序数据逻辑的部分. 通常模型对象负责在数据库中存取数据. View( ...
- linux系统数据盘挂载教程
将数据盘挂载为/www命令:#mkdir /www & mount /dev/sdb1 /www ----------------------------------------------- ...
- Android(Logcat、Monitors)
刚学习Android 的时候总喜欢输出"Hello Word"这样的信息来判断是不是执行了某个方法,最初连Android Studio控制台.断点这些在哪里都要找好久,现在好了多点 ...