首先在页面引入分页插件

<script src="../plugins/angularjs/pagination.js"></script>
<link rel="stylesheet" href="../plugins/angularjs/pagination.css">

然后再挂载到模块上:

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

在表格最底下加入:

<!-- 分页 -->
<tm-pagination conf="paginationConf"></tm-pagination>

这样就完成了,需要配置paginationConf,以及相关js

/重新加载列表 数据
$scope.reloadList=function(){
//切换页码
$scope.findPage( $scope.paginationConf.currentPage,
$scope.paginationConf.itemsPerPage);
}
//分页控件配置
$scope.paginationConf = {
currentPage: ,
totalItems: ,
itemsPerPage: ,
perPageOptions: [, , , , ],
onChange: function(){
$scope.reloadList();//重新加载
}
};
//分页
$scope.findPage=function(page,rows){
$http.get('../brand/findPage.do?page='+page+'&rows='+rows).success(
function(response){
$scope.list=response.rows;
$scope.paginationConf.totalItems=response.total;//更新总记录数
}
);
}

paginationConf 变量各属性的意义:
currentPage:当前页码
totalItems:总条数
itemsPerPage:
perPageOptions:页码选项
onChange:更改页面时触发事件

anglarJs分页的更多相关文章

  1. 记一次SQLServer的分页优化兼谈谈使用Row_Number()分页存在的问题

    最近有项目反应,在服务器CPU使用较高的时候,我们的事件查询页面非常的慢,查询几条记录竟然要4分钟甚至更长,而且在翻第二页的时候也是要这么多的时间,这肯定是不能接受的,也是让现场用SQLServerP ...

  2. js实现前端分页页码管理

    用JS实现前端分页页码管理,可以很美观的区分页码显示(这也是参考大多数网站的分页页码展示),能够有很好的用户体验,这也是有业务需要就写了一下,还是新手,经验不足,欢迎指出批评! 首先先看效果图: 这是 ...

  3. JdbcTemplate+PageImpl实现多表分页查询

    一.基础实体 @MappedSuperclass public abstract class AbsIdEntity implements Serializable { private static ...

  4. MVC如何使用开源分页插件shenniu.pager.js

    最近比较忙,前期忙公司手机端接口项目,各种开发+调试+发布现在几乎上线无问题了:虽然公司项目忙不过在期间抽空做了两件个人觉得有意义的事情,一者使用aspnetcore开发了个人线上项目(要说线上其实只 ...

  5. NET Core-TagHelper实现分页标签

    这里将要和大家分享的是学习总结使用TagHelper实现分页标签,之前分享过一篇使用HtmlHelper扩展了一个分页写法地址可以点击这里http://www.cnblogs.com/wangrudo ...

  6. 套用JQuery EasyUI列表显示数据、分页、查询

    声明,本博客从csdn搬到cnblogs博客园了,以前的csdn不再更新,朋友们可以到这儿来找我的文章,更多的文章会发表,谢谢关注! 有时候闲的无聊,看到extjs那么肥大,真想把自己的项目改了,最近 ...

  7. php实现的分页类

    php分页类文件: <?php /** file: page.class.php 完美分页类 Page */ class Page { private $total; //数据表中总记录数 pr ...

  8. C#关于分页显示

    ---<PS:本人菜鸟,大手子还请高台贵手> 以下是我今天在做分页时所遇到的一个分页显示问题,使用拼写SQL的方式写的,同类型可参考哦~ ------------------------- ...

  9. JAVA 分页工具类及其使用

    Pager.java package pers.kangxu.datautils.common; import java.io.Serializable; import java.util.List; ...

随机推荐

  1. NodeJs之文件合并(某一文件的内容发生变化与之相关的内容重新合并)

    首先,一个文件里面的内容是由多个文件共同组成的.例如一个文件夹包含有多文件(文件夹) 然后,当其中一个发生变化时所用与之有直接作用的文件(文件夹)都会重新组合. /*注意:该例子需要在同级目录下完成及 ...

  2. elastic(7)bulk

    转自:https://www.cnblogs.com/xing901022/p/5339419.html bulk批量导入 批量导入可以合并多个操作,比如index,delete,update,cre ...

  3. css之content

    content 属性与 :before 及 :after 伪元素配合使用,来插入生成内容.该属性用于定义元素之前或之后放置的生成内容.默认地,这往往是行内内容,不过该内容创建的框类型可以用属性 dis ...

  4. day36-hibernate检索和优化 01-上次课内容回顾

    clear():直接清空一级缓存的所有对象.evict(Object obj):清空一个对象.flush():控制你的刷出的时机.refresh(Object obj);将你的数据查出来把一级缓存覆盖 ...

  5. SpringBoot07 异常枚举、自定义异常、统一的全局异常处理

    1 异常编号和提示信息统一管理 利用枚举来实现异常的统一管理 package cn.xiangxu.springboottest.enums; import lombok.Getter; /** * ...

  6. 添加超级链接为什么用a标签

    a是anchor的简写,中文意思是锚点,而锚点的引申意思是连接,link已经被html占用了,只能用a来表示连接了.

  7. Luogu 2312 [NOIP2014] 解方程

    感觉好无聊. 秦九昭算法:一般地,一元n次多项式的求值需要经过(n+1)*n/2次乘法和n次加法,而秦九韶算法只需要n次乘法和n次加法.在人工计算时,一次大大简化了运算过程.(百度百科) 具体来说怎么 ...

  8. HTML5应用程序缓存Application Cache详解.RP

    什么是Application Cache HTML5引入了应用程序缓存技术,意味着web应用可进行缓存,并在没有网络的情况下使用,通过创建cache manifest文件,可以轻松的创建离线应用. A ...

  9. (数组)字符串的回文构词法( anagrams)

    题目:https://www.nowcoder.com/practice/e84e273b31e74427b2a977cbfe60eaf4?tpId=46&tqId=29130&tPa ...

  10. HTML 4.0 触发事件

    HTML 4 的新特性之一是可以使 HTML 事件触发浏览器中的行为,比方说当用户点击某个 HTML 元素时启动一段 JavaScript. 在现代浏览器中都内置有大量的事件处理器.这些处理器会监视特 ...