AngularJS分页插件的使用
最终效果：
先查全部
1.后端
我们需要建立一个实体类，PageResult.java（加上get,set方法和构造方法，实现序列化）
定义 总页数和行数
package entity;import java.io.Serializable;import java.util.List;/** * 分页总结果，总页数和行数 * @author zly * */public class PageResult implements Serializable {private long total;private List rows;public PageResult(long total, List rows) {super();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;}}
通过controller,service,serviceimpl查询到所有数据后，最后通过alibaba的fastjson返回的是json数据，格式如下：
[{"firstChar": "L","id": 1,"name": "联想"}, {"firstChar": "Y","id": 25,"name": "优衣库"}]
2.前台显示
前台展示需要写angularjs指令，主要是在body标签里写，然后和script里的而对应
ng-app=“pinyougou”——可以写成项目名称
ng-controller=“brandController”——可以写成模块名称
ng-init=“findAll()”——作用是随页面加载
ng-repeat=“entity in list”——遍历，相当于jstl表达式中的
ng-click=“findPage()”——事件，相当于js里的onclick
js部分：
<script type="text/javascript" src="../plugins/angularjs/angular.min.js"></script><script type="text/javascript">var app = angular.module('pinyougou', [ '' ]);app.controller('brandController', function($scope, $http) {//查询所有的品牌$scope.findAll = function() {$http.get('../brand/findAll.do').success(function(response) {$scope.list = response;});}});</script>
body部分：
<body class="hold-transition skin-red sidebar-mini" ng-app="pinyougou" ng-controller="brandController" ng-init="findAll()"><table id="dataList" class="table table-bordered table-striped table-hover dataTable"><thead><tr><th class="" style="padding-right: 0px"><input id="selall" type="checkbox" class="icheckbox_square-blue"></th><th class="sorting_asc">品牌ID</th><th class="sorting">品牌名称</th><th class="sorting">品牌首字母</th><th class="text-center">操作</th></tr></thead><tbody><tr ng-repeat="entity in list"><td><input type="checkbox"></td><td>{{entity.id}}</td><td>{{entity.name}}</td><td>{{entity.firstChar}}</td><td class="text-center"><button type="button" class="btn bg-olive btn-xs" data-toggle="modal" data-target="#editModal">修改</button></td></tr></tbody></table></body>
后处理分页
1.后端
通过传（int pageNum, int pageSize）两个参数（当前第几页，每个个数），通过方法进接口，再进实现类，通过分页插件，得到想要的分页数据。这里仅贴出实现类serviceimpl的代码：
package com.pinyougou.sellergoods.service.impl;import java.util.List;import org.springframework.beans.factory.annotation.Autowired;import com.alibaba.dubbo.config.annotation.Service;import com.github.pagehelper.Page;import com.github.pagehelper.PageHelper;import com.pinyougou.mapper.TbBrandMapper;import com.pinyougou.pojo.TbBrand;import com.pinyougou.sellergoods.service.BrandService;import entity.PageResult;@Servicepublic class BrandServiceImpl implements BrandService {@Autowiredprivate TbBrandMapper brandMapper;//查询全部品牌@Overridepublic List<TbBrand> findAll() {return brandMapper.selectByExample(null);}//分页查询@Overridepublic PageResult findPage(int pageNum, int pageSize) {//mybatis的分页插件PageHelper.startPage(pageNum, pageSize);//查数据，返回成Page，强转一下Page<TbBrand> page = (Page<TbBrand>) brandMapper.selectByExample(null);//返回值return new PageResult(page.getTotal(), page.getResult());}}
2.前台部分
js部分
先引入angularjs的分页插件
插件下载
//download.csdn.net/download/qq_37796017/10782452
<!-- 分页组件开始 --><script type="text/javascript" src="../plugins/angularjs/pagination.js"></script><link rel="stylesheet" href="../plugins/angularjs/pagination.css"><!-- 分页组件结束 --><script type="text/javascript">var app = angular.module('pinyougou', [ 'pagination' ]);app.controller('brandController', function($scope, $http) {//查询所有的品牌$scope.findAll = function() {$http.get('../brand/findAll.do').success(function(response) {$scope.list = response;});}//初始化和点击时调用刷新列表$scope.paginationConf = {currentPage : 1,//当前页totalItems : 10,//总数itemsPerPage : 10,//每页个数perPageOptions : [ 10, 20, 30, 40, 50 ],//分页选项onChange : function() { //当更改页码时，自动触发事件$scope.reloadlist();}};//刷新列表$scope.reloadlist = function() {$scope.findPage($scope.paginationConf.currentPage,$scope.paginationConf.itemsPerPage);}//分页$scope.findPage = function(pageNum, pageSize) {$http.get('../brand/findPage.do?pageNum=' + pageNum + '&pageSize='+ pageSize + '').success(function(response) {$scope.list = response.rows;//显示当前页数据$scope.paginationConf.totalItems = response.total;//更新总记录数});}});</script>
body部分
1.在table下加上，用来调用和显示分页
<tm-pagination conf="paginationConf"></tm-pagination>
2.把body标签里的 ng-init=“findAll()” 去掉
电玩女神
骑猪看日落
向右看齐
￡神魔★判官ぃ
╰+哭是因爲堅強的太久メ
还没有评论，来说两句吧...