layui详细分页和查询功能_layui分页查询-优快云博客

本文链接：https://blog.youkuaiyun.com/Bian_MCheng/article/details/89676317

1.Java开发千人交流群 677807540 大家可以一起讨论技术欢迎加入

2.前端页面，注意查询的参数不能放在form里面否则会提交两次表单，后台接收不到数据。

<html><%@ page language="java" contentType="text/html; charset=UTF-8"
			   pageEncoding="UTF-8"%>
<%@ include file="/commons/global.jsp"%>
<!DOCTYPE html>
<html>
<head>
 <meta charset="utf-8">
  <title></title>
  <meta name="renderer" content="webkit">
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
  <link rel="stylesheet" href="${path}/styles/layui/css/layui.css"  media="all">
	 

	<script type="text/javascript" src="${path}/styles/layui/layui.all.js" charset="utf-8"></script>
	
	 <style>
 .layui-form-label {
 width: 100px;
 
 }
 
 </style>
<script>
$(function() {
	$("#startTime").click(
			function(){
				 WdatePicker({ dateFmt: 'yyyy',minDate:'${editInfo.selectyear}', isShowToday: false, isShowClear: false});
			}
	);
});
/* layui.use('laydate', function(){
	  var laydate = layui.laydate;
	  
	  //执行一个laydate实例
	  laydate.render({
	    elem: '#startTime' //指定元素
	    	,type: 'year'
	  });
	  laydate.render({
		    elem: '#endTime' //指定元素
		  });
	}); */
//先初始化加载首页，十条数据
//showReocrd(1,10);
layui.use(['form','layer','table'], function(){
          var table = layui.table
          ,form = layui.form,$=layui.$;
          table.render({
              elem: '#test'  //绑定table id
                  ,url:'${path}/deptqua/pageList/'  //数据请求路径
            ,cellMinWidth: 200
            ,cols: [[
                {field:'DEPT_NAME', title: '科室名称'}
                ,{field:'BL', title: '入组率', sort: true}
               ,{field:'BASE_COUNT',  title: '入组人数'}
                ,{field:'PARTAKE_COUNT', title: '出院人数', sort: true}
            ]]
            
            ,page: true   //开启分页
            ,limit:10   //默认十条数据一页
            ,limits:[10,20,30,50]  //数据分页条
            ,id: 'testReload'  
            ,startTime:'2018'
          });
 
          var $ = layui.$, active = {
        		    reload: function(){
        		    var startTime = $('#startTime');
                          var  dept = $('#dept'); 
                      /*     var demoReload = $('#demoReload'); */
        		      
        		      //执行重载
        		      table.reload('testReload', {
        		        page: {
        		          curr: 1 //重新从第 1 页开始
        		        }
        		        ,where: {
        		          
        		        	  /* id: demoReload.val() */
        		         	startTime: startTime.val(),
      	                	dept: dept.val() 
        		        
        		        }
        		      });
        		    }
        		  };
        		  
        		  $('.layui-btn').on('click', function(){
        		    var type = $(this).data('type');
        		    active[type] ? active[type].call(this) : '';
        		  });
});

function exportexcel(){

	location = "${path}/deptqua/excel?template=deptqua.ftl";
}

</script>
	
</head>
<body>

	<div class="demoTable">
	<label class="layui-form-label">时间:</label> 
		<div class="layui-inline layui-col-xs3">
			<input
				class="layui-input" placeholder="请选择" name="startTime"  style="whith:100px"
				id="startTime">
		</div>

		科室:
		<div class="layui-inline">
			<input class="layui-input" name="dept" id="dept" autocomplete="off">
		</div>
		<button class="layui-btn" data-type="reload">查询</button>
		<button class="layui-btn layui-btn-normal"
			onclick="exportexcel();return false;">导出全部</button>
	</div>


	<div id="test"></div>

</body>
</html>

3.后台逻辑编写

/**
	 * 分页
	 * @return
	 */
	@RequestMapping(value = "/page" )
	@ResponseBody
	 public String page(@RequestParam Map<String, Object> map){
		 //查询列表数据
   
  int page = Integer.parseInt(map.get("page").toString());
  int limit = Integer.parseInt(map.get("limit").toString());
 
	//	Map map =new HashMap<String, Object>();
		map.put("page", page*limit+1);
		map.put("limit",(page-1)*limit );
		//查询数据
		List<Map<String, Object>> list = Service.getDrgsDeptQuality(map);

		  //查询总数
		int count = Service.count(map);
		  //用json来传值
          JSONArray json = JSONArray.fromObject(list);
          String js = json.toString();
          //*****转为layui需要的json格式，必须要这一步，博主也是没写这一步，在页面上数据就是数据接口异常
          String jso = "{\"code\":0,\"msg\":\"\",\"count\":"+count+",\"data\":"+js+"}";
          return jso;
	}

4.mybatis的sql编写

<select id="getDrgsDeptQuality" resultType="java.util.HashMap">
		select * from(select a.*,rownum rn from (
		select * from   table
		)
		a where rownum &lt; #{page,jdbcType=VARCHAR}) where rn
		&gt;#{limit,jdbcType=VARCHAR}
	</select>

<select id="count" resultType="java.lang.Integer">
		select count(0) from (
		select * from table
		
		)

	</select>