基于Spring+springmvc+spring data jpa+jquery框架
一，首先，我们先来看下后台.
我这里是根据经理登录来查看自己对应的客户，所以传递了4个值 页面大小，当前页 ， 经理ID，和模糊查询的数据 ，首先看下Service
currentPage = currentPage == null ? 1 : currentPage;
pageSize = pageSize == null ? 10 : pageSize
return dao.findLike(adminId,search,currentPage,pageSize);
在这里判断页面大小和当前页 dao层
public PageModel findLike(Integer adminId, String search, Integer currentPage, Integer pageSize) {
StringBuffer hql = new StringBuffer("from Customer where enbleflag=0");
if (adminId != null) {
hql.append(" and userid=").append(adminId);
}
if (StringUtils.isNotEmpty(search)) {
hql.append(" and (name like ‘%").append(search).append("%‘");
hql.append("or phone like ‘%").append(search).append("%‘)");
}
PageModel page = queryForPage(hql.toString(), currentPage, pageSize);
return page;
}
这里调用了 一个封装好的方法 queryForPage(hql.toString(), currentPage, pageSize)
@SuppressWarnings({"rawtypes", "unchecked"})
public PageModel queryForPage(String hql, int currentPage, int pageSize) {
PageModel page = new PageModel();
List list = null;
Integer totalCount = 0;
Integer totalPage = 0; //总页数
try {
int firstResult = (currentPage - 1) * pageSize;
Query query = em.createQuery(hql);
query.setMaxResults(pageSize);
query.setFirstResult(firstResult);
list = query.getResultList();
Query query2 = em.createQuery(hql);
List list2 = query2.getResultList();
totalCount = (list2 == null) ? 0 : list2.size();
if (totalCount % pageSize == 0) {
totalPage = totalCount / pageSize;
} else {
totalPage = totalCount / pageSize + 1;
}
page.setCurrentPage(currentPage);
page.setList(list);
page.setPageSize(pageSize);
page.setTotalCount(totalCount);
page.setTotalPage(totalPage);
} catch (Exception e) {
e.printStackTrace();
} finally {
em.close();
}
return page;
}
还要导入一个PageModel 模型
public class PageModel<E> implements Serializable {
private static final long serialVersionUID = 3265524976080127173L;
private int totalCount; //总记录数
private int pageSize = 10; //每页显示的数量
private int totalPage; //总页数
private int currentPage = 1; //当前页数
private List<E> list; //分页集合列表
private String url; //分页跳转的URL
还有set get 方法 在此就不写了
二，接下来看下jsp页面
<form id="searchForm">
<input type="text" name="search" id="search">
<input type="hidden" id="currentPage" name="currentPage" value="1">
<input type="hidden" id="adminId" name="adminId" value="1">
</form> 模糊查询的表单
<tbody id="customerarea">
</tbody>
</table>
</div>
<script type="text/html" id="customer">
{{if list && list.length > 0}}
{{each list as value index}}
<tr>
<td>{{(currentPage-1)*10+index+1}}</td>
<td >{{value.name?value.name:‘--‘}}</td>
<td>{{value.sex ==0?‘男‘:‘女‘}}</td>
<td>{{value.phone?value.phone:‘--‘}}</td>
<td >{{value.company?value.conpany:‘--‘}}</td>
<td>{{value.department?value.department:‘--‘}}</td>
<td>{{value.job?value.job:‘--‘}}</td>
<td><a href="${ctx}/jx/kclb/page/toeditkc?id={{value.id}}" >编辑</a>
<a href="javascript:;" id="{{value.id}}">查看详情</a>
</td>
</tr>
{{/each}}
{{else}}
<tr>
<td colspan="8">暂无数据</td>
</tr>
{{/if}}</script>
<div id="demo"></div>
</div>
这里用的ajax渲染
function getCustomer(cur) {
var currentPage=$(‘#currentPage‘).val(cur || 1);//分页
var url="${pageContext.request.contextPath }/meeting/findcustomer";
var search = $("#search").val();
var data=$(‘#searchForm‘).serialize();
$.ajax({
type:"GET",
url : url,
data : data,
dataType : ‘JSON‘,
success: function (result) {
if (result.success) {
console.log(result);
$(‘#customerarea‘).html(template(‘customer‘, result.data));
if (result.data.totalCount > 0) {
laypage({
cont: ‘demo‘, //容器。值支持id名、原生dom对象，jquery对象。【如该容器为】：<div id="page1"></div>
pages: result.data.totalPage, //通过后台拿到的总页数
curr: result.data.currentPage || 1, //当前页
skin: ‘#1978fe‘,
jump: function (obj, first) { //触发分页后的回调
console.log(obj.curr);
if (!first) { //点击跳页触发函数自身，并传递当前页：obj.curr
getCustomer(obj.curr);
}
}
});
}else{
$(‘#demo‘).html(‘‘);
}
} else {
$(‘#customerarea‘).html(template(‘customer‘, result.data));
layer.msg(result.msg);
}
}
})
}
$(function () {
$("#search").change(function () {
getCustomer();
})
})
原文地址：https://www.cnblogs.com/gudeyeyu/p/9070779.html