一、编写实体类PageResult

public class PageResult implements Serializable {
private Long total;//总记录数
private List rows;//当前页的结构 public PageResult() {
} public PageResult(Long total, List rows) {
this.total = total;
this.rows = rows;
} public Long getTotal() {
return total;
} public void setTotal(Long total) {
this.total = total;
} public List getRows() {
return rows;
} public void setRows(List rows) {
this.rows = rows;
}
}
二、编写service
//分页
public PageResult findPage(Integer total,Integer rows);
三、编写serviceImpl
@Override
public PageResult findPage(Integer total,Integer rows) {
// 利用mybatis分页助手
PageHelper.startPage(total,rows);
Page<Brand> brandsList = (Page<Brand>) brandDao.selectByExample(null);
return new PageResult(brandsList.getTotal(),brandsList.getResult());
}
四、编写controller
//  分页查询
@RequestMapping("/findPage")
public PageResult findPage(Integer page, Integer rows){
PageResult re = brandService.findPage(page, rows);
return re;
}
五、编写页面html,引入相关的js,css
var app=angular.module('pingyougou',['pagination']);
app.controller('brandController',function($scope,$http){
$scope.reloadList=function(){
// 切换页码 第一个参数是当前页 第二个参数 :每页展示的数据条数
$scope.findPage( $scope.paginationConf.currentPage, $scope.paginationConf.itemsPerPage);
}
// 分页控件配置
$scope.paginationConf = {
// 当前页
currentPage: 1,
// 默认总条数
totalItems: 10,
// 每页展示的条数
itemsPerPage: 10,
// 每页展示的多少条 下拉框 默认是10条 也可以手动选择
perPageOptions: [10, 20, 30, 40, 50],
onChange: function(){
$scope.reloadList();//重新加载
}
};
//切换页码 第一个参数是当前页 第二个参数 :每页展示的数据条数
$scope.findPage=function(page,rows){
$http.get('../brand/findPage.do?page='+page+'&rows='+rows).success(
function(response){
// 返回的数据集合 List<Brand>
$scope.list=response.rows;
// 查询到的总记录数
$scope.paginationConf.totalItems=response.total;//更新总记录数
}
);
}
}
<tm-pagination conf="paginationConf"></tm-pagination>

angular js 分页的更多相关文章

  1. angular.js分页代码的实例

    对于大多数web应用来说显示项目列表是一种很常见的任务.通常情况下,我们的数据会比较多,无法很好地显示在单个页面中.在这种情况下,我们需要把数据以页的方式来展示,同时带有转到上一页和下一页的功能.现在 ...

  2. Angular.js分页代码

                $scope.reloadList=function(){                             $scope.findPage( $scope.pagina ...

  3. Angular.js+Bootstrap实现表格分页

    最近一直学习Angular.js,在学习过程中也练习了很多的Demo,这里先贴一下表格+分页. 先上图看看最终结果: 不得不说Angular.js代码风格很受人欢迎,几十行代码清晰简洁的实现了上面的功 ...

  4. Angular.js+Bootstrap实现手风琴菜单

    说是Angular.js+Bootstrap实现手风琴菜单,其实就是用了Bootstrap的样式而已. 上一篇实现了表格+分页,接着学习实现的Demo. 主要练习自定义指令,向指令中传递参数,老规矩先 ...

  5. angular+bootstrap分页指令案例

    AngularJS中不仅内置了许多指令,而且开发人员也可以通过自定义指令来完成特殊操作,指令创建成功后可以到处复用. Web应用中的分页处理最为常见,我们可以将分页模块编写成一个可以复用的Angula ...

  6. angular.js的一点理解

    对angular.js的一点理解 2015-01-14 13:18 by MrGeorgeZhao, 317 阅读, 4 评论, 收藏, 编辑 最近一直在学习angular.js.不得不说和jquer ...

  7. Angular简易分页设计(二):封装成指令

    (首先声明本文来自博客园本人原创,转载请说明出处.欢迎关注:http://www.cnblogs.com/mazhaokeng/) 之前我们讲过,Angular分页代码确实不难实现,但是由于在多个路由 ...

  8. angular.js 渲染

    angular.js 小常识   具体看代码,转载请备注来源. html结构 <%@ page language="java" contentType="text/ ...

  9. 对angular.js的一点理解

    最近一直在学习angular.js.不得不说和jquery相比有很大不同,有很多的不同点,之前也用过Knockout.js 但是两者还是有一定的区别的,首先knockout.js是基于Mvvm的,是几 ...

随机推荐

  1. Linux 常用到的命令

    1.按照文件所有属用户和名字查询 find -user mpsp -name \*.bin 2.根据string 字符串查找内容 more +/string test.txt 3.查找文件尾部 后20 ...

  2. shiro:入门程序(一)

    SpringMVC项目 1:pom引入相关依赖 <dependencies> <!--测试依赖--> <dependency> <groupId>jun ...

  3. VSCode六大通用插件真香合集

    目录 一.background:设置心水背景图 安利理由: 安装及设置步骤: 设置过程中使用的代码: 成果展示: 注意: 二.Material Theme(VSCode主题)+Material Ico ...

  4. TensorFlow-keras 100分类

    import os os.environ['TF_CPP_MIN_LOG_LEVEL'] = '2' from tensorflow.python.keras.datasets import cifa ...

  5. Java 中正则表达式使用

    正则表达式基本用法: 测试代码: @Test public void test01() { String str = "adsfd##4324"; // 创建正则表达式对象 Pat ...

  6. python工业互联网监控项目实战5—Collector到opcua服务

    本小节演示项目是如何从连接器到获取Tank4C9服务上的设备对象的值,并通过Connector服务的url返回给UI端请求的.另外,实际项目中考虑websocket中间可能因为网络通信等原因出现中断情 ...

  7. netcore 下的policy授权自定义返回结果

    目前一直在用policy做权限校验,但是好像组里需要将返回结果统一,之前用的都是直接继承AuthorizationHandler然后调用context.Fail(),但是这样会导致没办法自定义返回结果 ...

  8. php json接口demo

    <?php class Student { public $no; public $username; public $password; } $student=new Student(); $ ...

  9. 单源最短路问题--朴素Dijkstra & 堆优化Dijkstra

    许久没有写博客,更新一下~ Dijkstra两种典型写法 1. 朴素Dijkstra     时间复杂度O(N^2)       适用:稠密图(点较少,分布密集) #include <cstdi ...

  10. Material Design 设计规范总结(2)

    本文是Material Design设计规范总结的第二部分,是进行UI设计与前端开发的必备参考资料. 八.布局 (1)所有可操作元素最小点击区域尺寸:48dp X 48dp. (2)栅格系统的最小单位 ...