angularJs完成分页

POJOPage.java

package cn.com.mcd.util;

import java.io.Serializable;
import java.util.List;

public class PagesPojo<T> implements Serializable {

private static final long serialVersionUID = -5583579662704307696L;

private int curPage = 1; // 当前页
private int pageSize = 10; // 每页多少行
private int totalRow; // 共多少行
private int start;// 当前页起始行
private int end;// 结束行
private int totalPage; // 共多少页
private String sortColumn;//排序字段
private boolean sortDirection;//排序方向（）

/**分页数据**/
private List<T> pages;

public List<T> getPages() {
return pages;
}

public void setPages(List<T> pages) {
this.pages = pages;
}

public int getCurPage() {
return curPage;
}

public void setCurPage(int curPage) {
if (curPage < 1) {
curPage = 1;
} else {
start = pageSize * (curPage - 1);
}
end = start + pageSize > totalRow ? totalRow : start + pageSize;
this.curPage = curPage;
}

public int getStart() {
// start=curPage*pageSize;
return start;
}

public int getEnd() {

return end;
}

public int getPageSize() {
return pageSize;
}

public void setPageSize(int pageSize) {
this.pageSize = pageSize;
}

public int getTotalRow() {
return totalRow;
}

public void setTotalRow(int totalRow) {
totalPage = (totalRow + pageSize - 1) / pageSize;
this.totalRow = totalRow;
if (totalPage < curPage) {
if (totalPage != 0) curPage = totalPage;
end = totalRow;
}
start = pageSize * (curPage - 1);
end = start + pageSize > totalRow ? totalRow : start + pageSize;
}

public int getTotalPage() {

return this.totalPage;
}

public String getSortColumn() {
return sortColumn;
}

public void setSortColumn(String sortColumn) {
this.sortColumn = sortColumn;
}

public boolean isSortDirection() {
return sortDirection;
}

public void setSortDirection(boolean sortDirection) {
this.sortDirection = sortDirection;
}

}

javaBean

package cn.com.mcd.model;

import java.util.Date;

public class ItEquipmentMaintenance {
private Long id;

private String equipmentNo;

private String faCode;

private String equipmentCode;

private String equipmentName;

private String areaType;

private String equipmentType;

private String auditStatus;

private String comments;

private String createdBy;

private Date createdStamp;

public Long getId() {
return id;
}

public void setId(Long id) {
this.id = id;
}

public String getEquipmentNo() {
return equipmentNo;
}

public void setEquipmentNo(String equipmentNo) {
this.equipmentNo = equipmentNo == null ? null : equipmentNo.trim();
}

public String getFaCode() {
return faCode;
}

public void setFaCode(String faCode) {
this.faCode = faCode == null ? null : faCode.trim();
}

public String getEquipmentCode() {
return equipmentCode;
}

public void setEquipmentCode(String equipmentCode) {
this.equipmentCode = equipmentCode == null ? null : equipmentCode.trim();
}

public String getEquipmentName() {
return equipmentName;
}

public void setEquipmentName(String equipmentName) {
this.equipmentName = equipmentName == null ? null : equipmentName.trim();
}

public String getAreaType() {
return areaType;
}

public void setAreaType(String areaType) {
this.areaType = areaType == null ? null : areaType.trim();
}

public String getEquipmentType() {
return equipmentType;
}

public void setEquipmentType(String equipmentType) {
this.equipmentType = equipmentType == null ? null : equipmentType.trim();
}

public String getAuditStatus() {
return auditStatus;
}

public void setAuditStatus(String auditStatus) {
this.auditStatus = auditStatus == null ? null : auditStatus.trim();
}

public String getComments() {
return comments;
}

public void setComments(String comments) {
this.comments = comments == null ? null : comments.trim();
}

public String getCreatedBy() {
return createdBy;
}

public void setCreatedBy(String createdBy) {
this.createdBy = createdBy == null ? null : createdBy.trim();
}

public Date getCreatedStamp() {
return createdStamp;
}

public void setCreatedStamp(Date createdStamp) {
this.createdStamp = createdStamp;
}
}

controller.java

/**
* 分页查询所有22. IT设备维护(eps_it_equipment_maintenance)
* @param vendorinfo
* @param page
* @return
* @throws Exception
*/
@RequestMapping(value = "/selectItEquipmentMaintenance", method = RequestMethod.POST)
@ResponseBody
public ResultModel selectItEquipmentMaintenance(@ModelAttribute ItEquipmentMaintenance itEquipmentMaintenance,@ModelAttribute PagesPojo<ItEquipmentMaintenance> page) throws Exception {
log.info(this.getClass().getName()+".selectItEquipmentMaintenance.start==itEquipmentMaintenance="+itEquipmentMaintenance+"========page="+page);
ResultModel resultModel = new ResultModel();
int count = purchaseItListService.countItEquipmentMaintenanceAll();
log.info(this.getClass().getName()+".selectItEquipmentMaintenance.count"+JSON.toJSONString(count));
List<ItEquipmentMaintenance> list=new ArrayList<ItEquipmentMaintenance>();
page.setTotalRow(count);
if(count>0){
list = purchaseItListService.selectItEquipmentMaintenance(page,itEquipmentMaintenance);
}
log.info(this.getClass().getName()+".selectItEquipmentMaintenance.list"+JSON.toJSONString(list));
page.setPages(list);
resultModel.setResultCode(Constants.SERVICE_SUCCESS_CODE);
resultModel.setResultMsg(Constants.DATA_BASE_SEARCH_SUCCESS_MSG);
resultModel.setResultData(page);
log.info(this.getClass().getName()+".selectItEquipmentMaintenance.end.resultModel="+resultModel);
return resultModel;
}

service.java

/**
* 分页查询22. IT设备
*/
@Override
public List<ItEquipmentMaintenance> selectItEquipmentMaintenance(PagesPojo<ItEquipmentMaintenance> page,ItEquipmentMaintenance itEquipmentMaintenance) {
List<ItEquipmentMaintenance> result =new ArrayList<ItEquipmentMaintenance>();
try{
result = itEquipmentMaintenanceMapper.selectItEquipmentMaintenance(page,itEquipmentMaintenance);
}catch(DataBaseAccessException e){
log.error("getAllITRepairCostRecords itEquipment repair cost maintenance table fail",e);
throw new DataBaseAccessException("getAllITRepairCostRecords itEquipment repair cost maintenance table fail");
}
return result;
}

sql.xml

param1:第1个参数

param2：第二个参数

<select id="selectItEquipmentMaintenance" resultMap="BaseResultMap">
SELECT top (#{param1.pageSize})
<include refid="Base_Column_List" />
from eps_it_equipment_maintenance
where
id not in (
select top (#{param1.start}) id
from eps_it_equipment_maintenance
<if test="param1.sortColumn !=null">
order by ${param1.sortColumn}
<if test="param1.sortDirection">
ASC
</if>
<if test="!param1.sortDirection">
DESC
</if>
</if>
)
<if test="param2.equipmentName!=null">
and equipment_name = #{param2.equipmentName}
</if>
<if test="param2.areaType!=null">
and area_type= #{param2.areaType}
</if>
<if test="param2.equipmentType!=null">
and equipment_type = #{param2.equipmentType}
</if>

<if test="param1.sortColumn !=null">
order by ${param1.sortColumn}
<if test ="param1.sortDirection">
ASC
</if>
<if test="!param1.sortDirection">
DESC
</if>
</if>
</select>

controller.js

/**
* 挑选商品页面的list table
*/
$scope.page = {
curPage : 1,
pageSize : 10,
sortColumn : 'id',
sortDirection : true
};
$scope.gridOptionsGoods = {
paginationPageSizes: [10, 20, 30, 40, 50],
paginationPageSize: 10,
enableColumnMenus: false,
rowEditWaitInterval: -1,
enableHorizontalScrollbar: 0,
enableVerticalScrollbar: 0,
useExternalPagination: true,
useExternalSorting: true,
expandableRowTemplate:'angularjsMVC/master-data/it-equipment-list-maintenance/template/it-equipment-list-maintenance-common.html',
expandableRowHeight : 150,
columnDefs : [
{name : 'id',displayName: '序号',enableCellEdit : false,cellTooltip:function(row) { return row.entity.purchaseNo ;}},
{name : 'equipmentNo',displayName: 'IT设备编号',enableCellEdit : false,cellTooltip:function(row) { return row.entity.purchaseName ;}},
{name : 'equipmentName',displayName: '设备名称',enableCellEdit : false,cellTooltip:function(row) { return row.entity.auditStatus ;}},
{name : 'areaType',displayName: '设备所用区域分类',enableCellEdit : false,cellTooltip:function(row) { return row.entity.auditStatus ;}},
{name : 'areaType',displayName: '设备分类',enableCellEdit : false,cellTooltip:function(row) { return row.entity.auditStatus ;}}
],

onRegisterApi : function(gridApi) {
$scope.gridApi = gridApi;
$scope.gridApi.core.on.sortChanged($scope,$scope.page,function(grid, sortColumns) {
if (sortColumns.length != 0) {
if (sortColumns[0].sort.direction == 'asc')
$scope.page.sortDirection = true;
if (sortColumns[0].sort.direction == 'desc')
$scope.page.sortDirection = false;
$scope.page.sortColumn = sortColumns[0].displayName;
ItEquipmentCommonService.queryGoodsByPage($scope,$scope.page);
}
});
gridApi.pagination.on.paginationChanged($scope,function(newPage, pageSize) {
$scope.page.curPage = newPage;
$scope.page.pageSize = pageSize;
ItEquipmentCommonService.queryGoodsByPage($scope,$scope.page);
});
gridApi.selection.on.rowSelectionChanged($scope, function(row) {
var msg = 'row selected '+ row.isSelected;
});
gridApi.selection.on.rowSelectionChangedBatch($scope,function(rows) {
var msg = 'rows changed '+ rows.length;
});
}

service.js

/**查询被挑选的商品**/
this.queryGoodsByPage = function(scope) {
var purchasemaintainData = {
'equipmentName': scope.equipmentName,
'areaType': scope.areaType.id,
'equipmentType': scope.equipmenttype.id,
};
var pages = [];
pages.push(purchasemaintainData);
scope.page.pages = pages;
http({
method: 'POST',
url: 'purchasemaintain/queryAllbyNumberandNameandAuditstatus',
data: scope.page,
}).success(function(data){
scope.gridOptionsGoods.totalItems = data.resultData.totalRow;
scope.gridOptionsGoods.data = data.resultData.pages;
scope.page = data.resultData;
}).error(function(data){
alert("fail");
});

};

html页面

<a ng-href="#">后退</a>
<div ng-controller="itEquipmentCreatController">
<div class="panelSelf panel panel-primary">
<div class="panel-heading">{{titleText}}</div>
<div class="panel-body">
<form class="form-horizontal fromSelf" role="from">
<div class="row">
<div class="col-xs-3">
<label class="control-label">项目编号：</label> <span class="colorSelf">*</span>
</div>
<div class="col-xs-3 col-xs-offset-1">
<label class="control-label">项目名称：</label> <span class="colorSelf">*</span>
</div>
<div class="col-xs-3 col-xs-offset-1" >
<label class="control-label">项目负责人</label>
</div>
</div>

<div class="form-group row divRow">
<div class="col-xs-3">
<ui-select ng-model="pro.selected" theme="bootstrap" ng-change="change()" search-enabled="searchEnabled" ng-disabled="disabled" style=" 150px;" title="Choose a proNo">
<ui-select-match placeholder="Please select">{{$select.selected.purchaseNo}}</ui-select-match>
<ui-select-choices repeat="pro in proNoesList | propsFilter: {purchaseNo: $select.search, purchaseName: $select.search}">
<div ng-bind-html="pro.purchaseNo +'-'+pro.purchaseName | highlight: $select.search"></div>
<!-- <small> -->
<!-- {{pro.purchaseNo +'-'+pro.purchaseName}} -->
<!-- </small> -->
</ui-select-choices>
</ui-select>
</div>
<div class="col-xs-3 col-xs-offset-1">
<label ng-model="name" ng-disabled="isDisable" type="text" class="form-control">{{pro.selected.purchaseName}}</label>
</div>
<div class="col-xs-3 col-xs-offset-1">
<label ng-model="address" ng-disabled="isDisable" type="text" class="form-control">{{pro.selected.projectLeader}}</label>
</div>
</div>

<div class="row divRow">
<div class="col-xs-3">
<label class="control-label">项目类别：</label>
</div>

<div class="col-xs-3 col-xs-offset-1">
<label class="control-label">生效时间</label>
</div>
<div class="col-xs-3 col-xs-offset-1">
<label class="control-label">结束时间</label>
</div>
</div>

<div class="row divRow">
<div class="col-xs-3 radio-inline">
<label class="col-xs-4"><input ng-disabled="radioAble" name="optionRadio" type="radio" value="1" />设备</label>
<label class="col-xs-4"><input ng-disabled="radioAble" name="optionRadio" type="radio" value="2"/>工程</label>
<label class="col-xs-4"><input ng-disabled="radioAble" name="optionRadio" type="radio" value="3" checked="checked"/>IT</label>
</div>

<div class="col-xs-3 col-xs-offset-1">
<label type="text" class="form-control">{{pro.selected.startTime |date:'yyyy-MM-dd'}}</label>
</div>

<div class="col-xs-3 col-xs-offset-1">
<label type="text" class="form-control">{{pro.selected.endTime |date:'yyyy-MM-dd'}}</label>
</div>
</div>

<div class="row divRow">
<div class="col-xs-3">
<label class="control-label">备注：</label>
</div>
</div>

<div class="row divRow">
<div class="col-xs-7">
<textarea class="form-control" rows="4" placeholder="填写备注" name="checkInfo" value="pro.selected.remark">{{pro.selected.remark}}</textarea>
</div>
</div>

<div class="row divRow form-inline">
<div class="col-xs-6">
<!-- 上传文件标签 <label for="file" class="btnSelf btn btn-info">上传文件</label>
<input type="file" id="file" style="display: none" file-upload multiple/><br/> -->

<label class="control-label">已上传附件：</label>
<label ng-model="name" class="control-label">{{file}}*****</label>
<button ng-disabled="disableFlag" type="button" class="btnSelf btn btn-info">下载文件</button>
</div>
</div>

<div class="row">
<div class="col-xs-3">
<label class="control-label">SI工程师人数：</label>
<span class="colorSelf">*</span>
</div>
<div class="col-xs-3 col-xs-offset-1">
<label class="control-label" >差旅无住宿天数：</label>
</div>
<div class="col-xs-3 col-xs-offset-1">
<label class="control-label">差旅住宿天数：</label>
</div>
</div>
<div class="row divRow">
<div class="col-xs-3">
<input type="text" ng-model="siEngineerNumber" class="form-control" placeholder=""/>
</div>
<div class="col-xs-3 col-xs-offset-1">
<input type="text" ng-model="travelDaysExcludeHotel" class="form-control" placeholder=""/>
</div>
<div class="col-xs-3 col-xs-offset-1">
<input type="text" ng-model="travelDaysIncludeHotel" class="form-control" placeholder=""/>
</div>
</div>
<div class="row">
<div class="col-xs-3">
<label class="control-label">餐饮次数：</label>
<span class="colorSelf">*</span>
</div>
<div class="col-xs-3 col-xs-offset-1">
<label class="control-label" >大工程运输费：</label>
</div>
<div class="col-xs-3 col-xs-offset-1">
<label class="control-label">standby工时：</label>
</div>
</div>
<div class="row divRow">
<div class="col-xs-3">
<input type="text" ng-model="reparstTimes"" class="form-control" placeholder=""/>
</div>
<div class="col-xs-3 col-xs-offset-1">
<input type="text" ng-model="trafficExpense" class="form-control" placeholder=""/>
</div>
<div class="col-xs-3 col-xs-offset-1">
<input type="text" ng-model="standBy" class="form-control" placeholder=""/>
</div>
</div>
<div ng-controller="itEquipmentCreatController">
<div class="row divRow col-xs-offset-7">
<button ng-disabled="disableFlag" data-toggle="modal" data-target="#chooseGoods" type="button" class="btnSelf btn btn-info" ng-click="clearData()">挑选商品</button>
<button ng-disabled="disableFlag" ng-click="removeData(false)" type="button" class="btnSelf btn btn-info">移除</button>
</div>
</div>

<!-- 显示选中的商品 table list-->
<div ng-hide="visibles">
<div ui-grid="gridOptionsShow" class="grid" ui-grid-pagination ui-grid-cellNav ui-grid-selection ui-grid-auto-resize></div>
</div>

<div class="form-group row">
<div class="col-xs-12 ">
<button ng-click="" type="button" class="btnSelf btn btn-info" ng-hide="visible">保存</button>
<button ng-click="" type="button" class="btnSelf btn btn-info">取消</button>
</div>
</div>
</div>

<!-- 挑选商品 -->
<div id="chooseGoods" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="chooseGoodsLabel" aria-hidden="true">
<div style="margin-top: 30px;"></div>
<div class="modal-dialog" style=" 70%; margin: auto;">
<div class="modal-content" style="padding: 20px;background-color: #EFEFEF;">
<div class="panel panel-primary">
<div class="panel-heading modal-title" id="chooseGoodsLabel">挑选设备</div>
<div class="panel-body">
<form class="form-horizontal fromSelf" role="from">
<div class="row divRow">
<div class="col-xs-3">
<label class="control-label">设备名称：</label>
</div>
<div class="col-xs-3 col-xs-offset-1">
<label class="control-label">设备所用区域：</label>
</div>
<div class="col-xs-3 col-xs-offset-1">
<label class="control-label">设备分类：</label>
</div>
</div>
<div class="form-group row divRow">
<div class="col-xs-3">
<input type="text" class="form-control" placeholder="" ng-model="equipmentName"/>
</div>
<div class="col-xs-3 col-xs-offset-1">
<ui-select ng-model="areaType.id" theme="bootstrap" ng-change="change()" search-enabled="searchEnabled" style=" 150px;" title="Choose a areaType">
<ui-select-match placeholder="Please select">{{$select.selected.area}}</ui-select-match>
<ui-select-choices repeat="areaType in areaTypes | propsFilter: {id: $select.search, area: $select.search}">
<div ng-bind-html=" areaType.area | highlight: $select.search "></div>
<!-- <small> -->
<!-- {{areaType.area +'-'+areaType.id}} -->
<!-- </small> -->
</ui-select-choices>
</ui-select>
</div>
<div class="col-xs-3 col-xs-offset-1">
<ui-select ng-model="equipmenttype.id" theme="bootstrap" ng-change="change()" search-enabled="searchEnabled" style=" 150px;" title="Choose a equipmenttype">
<ui-select-match placeholder="Please select">{{$select.selected.type}}</ui-select-match>
<ui-select-choices repeat="equipmenttype in equipmenttypes | propsFilter: {id: $select.search, code :$select.search, type: $select.search}">
<div ng-bind-html=" equipmenttype.type | highlight: $select.search "></div>
<!-- <small> -->
<!-- {{areaType.area +'-'+areaType.id}} -->
<!-- </small> -->
</ui-select-choices>
</ui-select>
</div>
</div>
<div class="row divRow">
<div class="col-xs-12">
<button ng-click="showData(false)" type="button" class="btnSelf btn btn-info">查询</button>
<button data-dismiss="modal" type="button" class="btnSelf btn btn-info">取消</button>
<button ng-click="backShowData(false)" data-dismiss="modal" ng-hide="visible" type="button" class="btnSelf btn btn-info">确认选择</button>
</div>
</div>
</form>
</div>
</div>
<!-- 挑选商品table list-->
<div ng-hide="visibles2">
<div ui-grid="gridOptionsGoods" class="grid" ui-grid-pagination ui-grid-cellNav ui-grid-selection ui-grid-auto-resize></div>
</div>
</div>

</div>
</div>
</div>
</div>
<div class="divRow"><a ng-href="#/">back up</a></div>