分页加模糊查询

Posted 2020-11-07 不点江山

基于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();
})
})