angular js 实现模糊查询并分页

如果这篇文章能给你带来帮助，不胜荣幸，如果有不对的地方也请批评指正 共同进步，因为最近使用augular前段所以看了一下，为了加深印象，所以记录一下，废话不多说直接上代码。

　　首先来讲你可以使用page的分页插件，也可以不使用我没有使用，所以得展示部分sql语句。总体来说sql语句的代码就是：select * from table where 1=1 and 条件=条件值 and 条件=条件值 limit start,num  并写一个查询相关条数的方法

其中start为起始下标，num为展示多少条。具体看下面

　　

<select id="selectByPageAndObj" resultMap="BaseResultMap">  		select * from registration_of_cases   		<where>  			<if test="unitName!=null">  			and unit_name like concat("%",#{unitName},"%")  			</if>  			<if test="organizationalCode!=null">  			and	organizational_code like concat("%",#{organizationalCode},"%")  			</if>  		</where> 		limit #{nowPage},#{pagetotle}  </select>
 
<select id="selectByPageAndObjNum" resultType="int">  		select count(*) from registration_of_cases   		<where>  			<if test="unitName!=null">  			and	unit_name like concat("%",#{unitName},"%")  			</if>  			<if test="organizationalCode!=null">  			and	organizational_code like concat("%",#{organizationalCode},"%")  			</if>  		</where>  </select>

　　然后需要创建一个分页类：分页累的作用就是简单地给你进行一下计算，比如说传入当前的页数 可以得到查询的起始位置等等不在一一赘述，看代码

package com.social.util;

import java.util.List;

public class Result {

private int pageSize = 5;//每页数量
private int pageNum = 1;//默认当前是第一页
private int total = 0;//总条数
private int totalPage = 0;//总页数
private int start = 0;//起始位置
private List rows;//接受数据的集合
private String url="";//请求的路径

public int getPageSize() {
return pageSize;
}
public void setPageSize(int pageSize) {
this.pageSize = pageSize;
}
public int getPageNum() {
return pageNum;
}
public void setPageNum(int pageNum) {
this.pageNum = pageNum;
}
public int getTotal() {
return total;
}
public void setTotal(int total) {
this.total = total;
}
public int getTotalPage() {
int pageCount = 0;
if(total%pageSize==0) {
pageCount=total/pageSize;
}else {
pageCount=total/pageSize+1;
}
totalPage = pageCount;
return totalPage;
}
public void setTotalPage(int totalPage) {
this.totalPage = totalPage;
}
public int getStart() {
start = (pageNum-1)*pageSize;
return start;
}
public void setStart(int start) {
this.start = start;
}
public List getRows() {
return rows;
}
public void setRows(List rows) {
this.rows = rows;
}
public String getUrl() {
return url;
}
public void setUrl(String url) {
this.url = url;
}
@Override
public String toString() {
return "PageBean [pageSize=" + pageSize + ", pageNum=" + pageNum + ", total=" + total + ", totalPage="
+ totalPage + ", start=" + start + ", rows=" + rows + ", url=" + url + "]";
}



}

　　在写这个之前，还得写一个查询所有的方法，如果你nb其实一个方法也可以，这篇文章就是给基础的看的。接着往下

后台的工作目前做到这里就算差不多的了 现在来看一下前台界面你需要写一部分js 上代码：

首先引入相关的js和css样式 例如：

	<script src="plugins/jQuery/jquery-2.2.3.min.js"></script>
	<script src="plugins/bootstrap/js/bootstrap.min.js"></script>
　   　　<link rel="stylesheet" href="plugins/bootstrap/css/bootstrap.min.css">
	<link rel="stylesheet" href="plugins/angularjs/pagination.css">
	<script type="text/javascript" src="plugins/angularjs/pagination.js"></script>
	<script type="text/javascript" src="plugins/angularjs/angular.min.js"></script>

　　然后接着上具体的前段代码 部分解释代码中见：

//初始化和点击时给部分分页的参数进行一个赋值 前段的分页
$scope.paginationConf = {
currentPage : 1,//当前页
totalItems : 0,//总数
itemsPerPage : 5,//每页个数
perPageOptions : [ 5, 10, 15, 20, 50 ],//分页选项
onChange : function() {//当更改页码时，自动触发分页查询方法
$scope.reloadlist();
}
};
$scope.searchEntity = {
unitName : "",//
organizationalCode : "",//
};
//有改变的时候调用重新加载的方法
$scope.reloadlist = function() {//方法里面有两个参数 当前页和每页多少条
$scope.findPage($scope.searchEntity.unitName,$scope.searchEntity.organizationalCode,$scope.paginationConf.currentPage,
$scope.paginationConf.itemsPerPage);
}
//根据条件进行分页查询
$scope.findPage = function(unitName,organizationalCode,nowPage, pageTotal) {
$http({
method:'post',
url:'http://localhost:80/mysocial/pageFindByObj',
data:{
"unitName":unitName,
"organizationalCode":organizationalCode,
"nowPage":nowPage,
"pageTotal":pageTotal
},
headers: { 'Content-Type': 'application/x-www-form-urlencoded' },
transformRequest: function(obj) {
var str = [];
for (var s in obj) {
str.push(encodeURIComponent(s) + "=" + encodeURIComponent(obj[s]));
}
return str.join("&");
}
}).success(function(response){
$scope.list = response.rows;//显示当前页数据
$scope.paginationConf.totalItems = response.total;//更新总记录数
})
}

　　

具体的html界面上的代码：

<tr ng-repeat="entity in list"> <!-- 你可以吧repeat当成foreach来理解 其中 list是上面接收的集合 entity是用来循环展示的变量 -->
				<td><input type="checkbox"></td>
				<td>{{entity.unitName}}</td>  <!-- 通过对象.属性的方式来进行一个展示数据 -->
				<td>{{entity.organizationalCode}}</td>
				<td>{{entity.nameOfTheComplainant}}</td>
</tr>
<!-- 最后在你的前台html界面上进行一个插件html的引入-->
<tm-pagination conf="paginationConf"></tm-pagination>

　　最后展示后台代码：查询所有的的代码我就不展示了，反正也是得返回一个pagebean 要不然你前台获取的时候获取不到相对应的值

·　　

@Autowired
private RegistrationOfCasesMapper registrationOfCasesMapper;

@ResponseBody
@RequestMapping("/pageFindByObj")
public Result pageFindByObj(String unitName,String organizationalCode,Integer nowPage,Integer pageTotal){
//创建result对象
Result result = new Result();
result.setPageNum(nowPage);
result.setPageSize(pageTotal);
List<RegistrationOfCases> selectByPageAndObj = registrationOfCasesMapper.selectByPageAndObj(unitName,organizationalCode,result.getStart(),pageTotal);
Integer selectByPageAndObjNum = registrationOfCasesMapper.selectByPageAndObjNum(unitName,organizationalCode, result.getStart(), pageTotal);
result.setRows(selectByPageAndObj);
result.setTotal(selectByPageAndObjNum);
return result;
}