核心提示：修改，批量删除，查询升降，分页代码实现link rel=stylesheet type=text/css href=${pageContext.request.contextPath }/bootst...
修改，批量删除，查询升降，分页代码实现
<link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath }/bootstrap-3.3.7-dist/css/bootstrap.css">
<script src="${pageContext.request.contextPath }/js/jquery-3.2.1.min.js"></script>
<script src="${pageContext.request.contextPath }/bootstrap-3.3.7-dist/js/bootstrap.js"></script>
<script src="https://cdn.bootcss.com/angular.js/1.4.6/angular.min.js"></script>
</head>
<script type="text/javascript">
var pages;
var currentPage=1;
var app = angular.module('myApp', []);
var rea="";
var orde="";
app.controller('personCtrl', function($scope,$http) {
$scope.toPage=function(num){
$http({
url:"${pageContext.request.contextPath }/user/selectEmail.do?pageno="+num+"&zt="+rea+"&orde="+orde,
method:"GET"
}).then(function successCallback(response) {
console.log(response.data);
$scope.pageInfo=response.data;
$scope.empList=response.data.list;
currentPage=response.data.pageNum;
});
};
$scope.toPage(1);
$scope.checkAll = function(){
$scope.flag = !$scope.flag;
angular.element(".common").prop("checked",$scope.flag);
};
//校验全选状态
$scope.validate = function(){
//普通复选框的个数
var num = angular.element(".common").length;
//普通复选框被选中的个数
var checkedNum = angular.element(".common:checked")
.length;
//通过判断复选框的个数是否与被选中的个数一致来决定全选框的状态
$scope.flag = (num == checkedNum);
};
$scope.shanchu=function(){
angular.element("#myModal").modal('show');
};
$scope.deleteqb=function(){
var ids="";
var comArr=angular.element(".common:checked");
for(var i=0;i<comArr.length;i++){
var eid=$(comArr[i]).val();
if(i==0){
ids+=eid;
}else{
ids+=","+eid;
}
}
$http({
url:"${pageContext.request.contextPath }/user/deleteEmail.do?ids="+ids,
method:"GET"
}).then(function successCallback(response) {
angular.element("#myModal").modal("hide");
//跳转到当前页
$scope.toPage(currentPage);
});
};
$scope.xiugai=function(){
angular.element("#dumodal").modal('show');
};
$scope.du=function(){
var ids="";
var comArr=angular.element(".common:checked");
for(var i=0;i<comArr.length;i++){
var eid=$(comArr[i]).val();
if(i==0){
ids+=eid;
}else{
ids+=","+eid;
}
}
alert(ids);
$http({
url:"${pageContext.request.contextPath }/user/duEmail.do?ids="+ids,
method:"GET"
}).then(function successCallback(response) {
angular.element("#dumodal").modal("hide");
//跳转到当前页
$scope.toPage(currentPage);
});
};
$scope.read=function(){
rea=angular.element("#rea").val();
if(rea==2){
rea=""
}
$scope.toPage(currentPage);
};
$scope.sheng=function(){
orde="asc";
$scope.toPage(currentPage);
};
$scope.jiang=function(){
orde="desc";
$scope.toPage(currentPage);
};
});
</script>
<body ng-app="myApp" ng-controller="personCtrl" class="container">
<h1 align="center">我的邮箱页面</h1>
<select class="form-control" onchange="angular.element(this).scope().read()" id="rea">
<option value="2">全部</option>
<option value="0">已读邮件</option>
<option value="1">未读邮件</option>
</select>
<br><br><br><br><br>
<table class="table">
<tr><td><span class="glyphicon glyphicon-user" aria-hidden="true"></span></td> <td><button type="button" class="btn btn-success" ng-click="xiugai()">批量设为已读</button></td>
<td><button type="button" class="btn btn-danger" ng-click="shanchu()">批量删除</button></td>
<td><button type="button" class="btn btn-primary" ng-click="sheng()">按时间升序排列</button></td>
<td><button type="button" class="btn btn-info" ng-click="jiang()">按时间降序排列</button></td></tr>
<tr><td><input type="checkbox" id="special" ng-checked="flag" ng-click="checkAll()"></td>
<td>发件人</td> <td>阅读状态</td>
<td>发送时间</td></tr>
<tr ng-repeat="emp in empList"><td><input type="checkbox" class="common" value="{{emp.id }}" ng-click="validate()" ></td>
<td>{{emp.man}}</td> <td>
<p ng-if="emp.zt == 0"><span class="glyphicon glyphicon-ok" aria-hidden="true"></span></p>
<p ng-if="emp.zt == 1"><span class="glyphicon glyphicon-envelope" aria-hidden="true"></span></p>
</td>
<td>{{emp.yjbt}}</td> <td>{{emp.sj}}</td>
</tr>
</table>
<!-- 分页条 -->
<p class="row">
<p class="col-md-6">共有{{pageInfo.total}}条数据,共有{{pageInfo.pages}}页</p>
<nav aria-label="Page navigation">
<ul class="pagination">
<li ng-show="pageInfo.hasPreviousPage"><a href="#" ng-click="toPage(1)">首页</a></li>
<li ng-hide="pageInfo.hasPreviousPage" class="disabled"><a href="#" >首页</a></li>
<li>
<a ng-show="pageInfo.hasPreviousPage" href="#" ng-click="toPage(pageInfo.pageNum-1)" aria-label="Previous">
<span aria-hidden="true">«</span>
</a>
</li>
<li>
<a ng-hide="pageInfo.hasPreviousPage" href="#" aria-label="Previous" class="disabled">
<span aria-hidden="true">«</span>
</a>
</li>
<li ng-repeat="num in pageInfo.navigatepageNums" ng-class="num==pageInfo.pageNum?'active':''">
<a href="#" ng-click="toPage(num)">{{num}}</a>
</li>
<li>
<a href="#" ng-click="toPage(pageInfo.pageNum+1)" aria-label="Next">
<span aria-hidden="true">»</span>
</a>
</li>
<li><a href="#" ng-click="toPage(pageInfo.pages)">尾页</a></li>
</ul>
</nav>
</p>
<!-- 模态框（Modal） -->
<p class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<p class="modal-dialog">
<p class="modal-content">
<p class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h4 class="modal-title" id="myModalLabel">确认框</h4>
</p>
<p class="modal-body">是否确认删除？</p>
<p class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
<button type="button" class="btn btn-primary" ng-click="deleteqb()">确认</button>
</p>
</p><!-- /.modal-content -->
</p><!-- /.modal -->
</p>
<!-- 模态框（Modal） -->
<p class="modal fade" id="dumodal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<p class="modal-dialog">
<p class="modal-content">
<p class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h4 class="modal-title" id="myModalLabel">确认框</h4>
</p>
<p class="modal-body">是否已读？</p>
<p class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
<button type="button" class="btn btn-primary" ng-click="du()">确认</button>
</p>
</p><!-- /.modal-content -->
</p><!-- /.modal -->
</p>
