分頁加模糊查詢

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