zoukankan      html  css  js  c++  java
  • 分页加模糊查询

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

  • 相关阅读:
    创建一个Phone实体,完成多页面的电话簿项目
    ABP教程-对Person信息进行操作
    完善Person页面的视图操作功能
    实现ABP中Person类的权限功能
    在ABP中创建Person实体类
    ABP教程-给项目添加SwaggerUI,生成动态webapi
    ABP教程-通过ABPboilerplate模版创建项目
    EF Codefirst 多对多关系 操作中间表的 增删改查(CRUD)
    ORM小练习代码
    Tomcat中work目录
  • 原文地址:https://www.cnblogs.com/gudeyeyu/p/9070779.html
Copyright © 2011-2022 走看看