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表达式中的<for:each>

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;
@Service
public class BrandServiceImpl implements BrandService {

	@Autowired
	private TbBrandMapper brandMapper;
	//查询全部品牌
	@Override
	public List<TbBrand> findAll() {

		return brandMapper.selectByExample(null);
	}
	//分页查询
	@Override
	public 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的分页插件
插件下载:https://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()” 去掉