分页加模糊查询

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

 

posted @ 2018-05-22 10:32  不点江山  阅读(1699)  评论(0编辑  收藏  举报