//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 分页精华代码的更多相关文章

  1. php分页类代码带分页样式效果(转)

    php分页类代码,有漂亮的分页样式风格 时间:2016-03-16 09:16:03来源:网络 导读:不错的php分页类代码,将类文件与分页样式嵌入,实现php查询结果的精美分页,对研究php分页原理 ...

  2. 百度分页样式代码 css+c#

    通过c#输出html分页代码: /// <summary> /// 返回分页Html代码 /// </summary> /// <param name="pag ...

  3. bootstrap 分页样式代码

    bootstrap 分页样式代码,废话不多说,直接上源码 <!DOCTYPE html> <html> <head> <title>Bootstrap ...

  4. AngularJS进阶(十四)AngularJS灵异代码事件

    AngularJS灵异代码事件 注:请点击此处进行充电! 事情原委 router_sys.js源代码如下: 自己在html路由跳转的代码如下: 但是在实际路由过程中,却路由到了下面的状态,相应的页面中 ...

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

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

  6. ASP 三十二条精华代码 (1)

    ASP 三十二条精华代码 (1) 2009-08-10 09:53:03  www.hackbase.com  来源:互联网 1. oncontextmenu="window.event.r ...

  7. angularjs分页组件

    这是我第一次写博客,激动,首先,我也是个菜鸟,分享一下自己写的服务器端分页的代码,自己一步一步写的,其中也有参考别人的代码.技术比较渣,先这样了. // ====== 2019-1-3 ======/ ...

  8. 自定义angularjs分页控件

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

  9. AngularJS 分页

    前端源码: <div> <h1>列表页33</h1> <table> <thead> <tr><td>CandiID ...

随机推荐

  1. egret.Tween、egret.Ease

    循环调用.只能设置boolean,不能设置循环次数. egret.Tween.).call(()=>{ console.log("循环调用"); }) 每次改变时,调用onC ...

  2. ubuntu查看系统资源占用(内存,cpu和进程)

    ubuntu查看系统资源占用(内存,cpu和进程) 1  top 查看ubuntu的资源占用的命令为$: top    说明:top命令就可以查看内存,cpu和进程了,很方便 top: 主要参数 d: ...

  3. Des加解密算法

    class DesHelper    {        /// <summary>        /// DES加密方法        /// </summary>       ...

  4. boost.numpy编译报错:undefined reference to `PyInt_FromLong' libboost_numpy.so: undefined reference to `PyCObject_AsVoidPtr'

    [ 31%] Built target boost_numpy[ 36%] Building CXX object libs/numpy/example/CMakeFiles/dtype.dir/dt ...

  5. 传输层(3)-缓冲区大小及限制、TCP输出

    3.缓冲区大小及限制 影响IP数据报大小的限制. 1)IPv4数据报,最大大小是65535. 2)硬件规定的MTU.以太网的MTU是1500字节.SLIP链路1006字节或296字节 3)路径MTU. ...

  6. redis命令String

    $ keys * $ rename oldkey newkey $ renamex oldkey newkey 新key存在抛出异常 $ dbsize $ expire key 时间(秒) $ ttl ...

  7. lua创建文件和文件夹

    创建文件夹: os.execute('mkdir xx') 创建文件: f = assert(io.open('a.tmp','w')) f:write('test') f:close()

  8. python之路-Day4

    本节内容 1. 函数基本语法及特性 2. 参数与局部变量 3. 返回值 嵌套函数 4.递归 5.匿名函数 6.函数式编程介绍 7.高阶函数 8.内置函数 函数是什么? 函数一词来源于数学,但编程中的「 ...

  9. npm install socket.io遇到的问题

    解决方法: 输入 npm install socket.io 前,先执行下面 npm config set proxy "http://yourip:port" 生产的npm-de ...

  10. 循序渐进Python3(十一) --1-- web之css

    css样式: css是英文Cascading Style Sheets的缩写,称为层叠样式表,用于对页面进行美化,CSS的可以使页面更加的美观. 基本上所有的html页面都或多或少的使用css.   ...