angular js 分页
一、编写实体类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 分页的更多相关文章
- angular.js分页代码的实例
对于大多数web应用来说显示项目列表是一种很常见的任务.通常情况下,我们的数据会比较多,无法很好地显示在单个页面中.在这种情况下,我们需要把数据以页的方式来展示,同时带有转到上一页和下一页的功能.现在 ...
- Angular.js分页代码
$scope.reloadList=function(){ $scope.findPage( $scope.pagina ...
- Angular.js+Bootstrap实现表格分页
最近一直学习Angular.js,在学习过程中也练习了很多的Demo,这里先贴一下表格+分页. 先上图看看最终结果: 不得不说Angular.js代码风格很受人欢迎,几十行代码清晰简洁的实现了上面的功 ...
- Angular.js+Bootstrap实现手风琴菜单
说是Angular.js+Bootstrap实现手风琴菜单,其实就是用了Bootstrap的样式而已. 上一篇实现了表格+分页,接着学习实现的Demo. 主要练习自定义指令,向指令中传递参数,老规矩先 ...
- angular+bootstrap分页指令案例
AngularJS中不仅内置了许多指令,而且开发人员也可以通过自定义指令来完成特殊操作,指令创建成功后可以到处复用. Web应用中的分页处理最为常见,我们可以将分页模块编写成一个可以复用的Angula ...
- angular.js的一点理解
对angular.js的一点理解 2015-01-14 13:18 by MrGeorgeZhao, 317 阅读, 4 评论, 收藏, 编辑 最近一直在学习angular.js.不得不说和jquer ...
- Angular简易分页设计(二):封装成指令
(首先声明本文来自博客园本人原创,转载请说明出处.欢迎关注:http://www.cnblogs.com/mazhaokeng/) 之前我们讲过,Angular分页代码确实不难实现,但是由于在多个路由 ...
- angular.js 渲染
angular.js 小常识 具体看代码,转载请备注来源. html结构 <%@ page language="java" contentType="text/ ...
- 对angular.js的一点理解
最近一直在学习angular.js.不得不说和jquery相比有很大不同,有很多的不同点,之前也用过Knockout.js 但是两者还是有一定的区别的,首先knockout.js是基于Mvvm的,是几 ...
随机推荐
- Linux 常用到的命令
1.按照文件所有属用户和名字查询 find -user mpsp -name \*.bin 2.根据string 字符串查找内容 more +/string test.txt 3.查找文件尾部 后20 ...
- shiro:入门程序(一)
SpringMVC项目 1:pom引入相关依赖 <dependencies> <!--测试依赖--> <dependency> <groupId>jun ...
- VSCode六大通用插件真香合集
目录 一.background:设置心水背景图 安利理由: 安装及设置步骤: 设置过程中使用的代码: 成果展示: 注意: 二.Material Theme(VSCode主题)+Material Ico ...
- TensorFlow-keras 100分类
import os os.environ['TF_CPP_MIN_LOG_LEVEL'] = '2' from tensorflow.python.keras.datasets import cifa ...
- Java 中正则表达式使用
正则表达式基本用法: 测试代码: @Test public void test01() { String str = "adsfd##4324"; // 创建正则表达式对象 Pat ...
- python工业互联网监控项目实战5—Collector到opcua服务
本小节演示项目是如何从连接器到获取Tank4C9服务上的设备对象的值,并通过Connector服务的url返回给UI端请求的.另外,实际项目中考虑websocket中间可能因为网络通信等原因出现中断情 ...
- netcore 下的policy授权自定义返回结果
目前一直在用policy做权限校验,但是好像组里需要将返回结果统一,之前用的都是直接继承AuthorizationHandler然后调用context.Fail(),但是这样会导致没办法自定义返回结果 ...
- php json接口demo
<?php class Student { public $no; public $username; public $password; } $student=new Student(); $ ...
- 单源最短路问题--朴素Dijkstra & 堆优化Dijkstra
许久没有写博客,更新一下~ Dijkstra两种典型写法 1. 朴素Dijkstra 时间复杂度O(N^2) 适用:稠密图(点较少,分布密集) #include <cstdi ...
- Material Design 设计规范总结(2)
本文是Material Design设计规范总结的第二部分,是进行UI设计与前端开发的必备参考资料. 八.布局 (1)所有可操作元素最小点击区域尺寸:48dp X 48dp. (2)栅格系统的最小单位 ...