LayUI数据表格重载与查询功能实现

（框架：前端使用LayUI，后端Spring）

搜索框：

代码：

<form action="" class="layui-form">
	<div class="layui-inline">
		<input class="layui-input" name="name" id="name" placeholder="请输入姓名" autocomplete="off">
	</div>
	
	<button type="button" class="layui-btn" data-type="reload" id="search"><i class="layui-icon">&#xe615;</i>搜索</button>
		
</form>

表格显示：

代码：

layui.use(['laydate', 'laypage', 'layer', 'table', 'element', 'slider'], function(){
	var $ = layui.jquery
	  ,laydate = layui.laydate //日期
	  ,laypage = layui.laypage //分页
	  ,layer = layui.layer //弹层
	  ,table = layui.table //表格  
	  ,element = layui.element //元素操作
	  ,slider = layui.slider //滑块
	  ,tableObj = table.render({});
	  
  
  //方法级渲染
  table.render({
    elem: '#demo'
    	 ,url:' ${pageContext.request.contextPath}/students/students' //数据接口
    	 ,id: 'testReload'
    	 ,title:'学生成绩表'
    	 ,height: 550
    	 ,limit:10
    	 ,toolbar: 'default'
    ,cols: [[
       {align:'center', title:  '学生信息',colspan:6}
       ,{align:'center', title: '学生成绩',colspan:4}    		   
      ] ,[

	{type: 'checkbox', fixed: 'left'}
	,{field: 'id', title: 'ID', width:80, sort: true, fixed: 'left', totalRowText: '合计：'}
	,{field: 'sno', title: '学号', width:150}
	,{field: 'name', title: '姓名', width:150}
	,{field: 'major', title: '专业', width: 100}
	,{field: 'classN', title: '班级', width:100,}     
	,{field: 'subject1', title: 'C语言', width:100, sort: true}  
	,{field: 'subject2', title: '高数', width: 100, sort: true}

	,{field: 'subject3', title: '英语', width: 100, sort: true}
	,{field: 'subject4', title: '大学物理', width: 101, sort: true}
	,{fixed: 'right', width: 165, align:'center', toolbar: '#barDemo'}
	]]
    
    //,page: true
    ,page: { //支持传入 laypage 组件的所有参数（某些参数除外，如：jump/elem） - 详见文档
    	layout: ['count', 'prev', 'page', 'next', 'limit', 'refresh', 'skip']//自定义分页布局 
        ,limits:[5,10,15,20,100]
        ,first: false //不显示首页
        ,last: false //不显示尾页
        
      }
    	 ,method:'post'
    	 
  });

其中,url:' ${pageContext.request.contextPath}/students/students'是与后端联系的路径


实现重载部分：

 var $ = layui.$, active = {
    reload: function(){
      var name= $('#name');
      
      //执行重载
      table.reload('testReload', {	//testReload为table中的id
    	 
        page: {
          curr: 1 //重新从第 1 页开始
        }
        ,where: {
          
          name:name.val(),
         
          }
        }
      ),'data';
    }
  };
  
  $('#search').on('click', function(){	//search为搜索button中设置的id名
    var type = $(this).data('type');
    active[type] ? active[type].call(this) : '';
  });

后端代码：
（Controller）

@ResponseBody
	@RequestMapping(value = "students")
	public Map<String,Object> showStudents(int page, int limit,String name) throws IOException{
		List<Students> students = studentsService.getStudents();
		List<Students> student = studentsService.getStudentsCount(page,limit); 
		List<Students> stu=studentsService.getStu(name);
		
		Map<String,Object> tableData =new HashMap<String,Object>();
		tableData.put("code", 0);
		tableData.put("msg", "");
		System.out.println(name);
		
		//System.out.println("tableData:"+tableData);
		if(name==null&&classN==null){
		tableData.put("count", students.size());
		tableData.put("data", student);
		}else 
		{			
			tableData.put("count", stu.size());
			tableData.put("data", stu);
			
		}
			
	    return tableData;
		 
	    }

（service）

public List<Students> getStudentsCount(int page, int pageSize) {
			
			return studentsDao.getStudentsCount(page, pageSize);
		}
public List<Students> getStu(String name){
			return studentsDao.getStu(name);
		}

（DAO接口的实现）

@Override
	public List<Students> getStudentsCount(int page, int pageSize) {
		int start = (page-1)*pageSize;
		String sql = "select * from students limit "+start+" ,?";
		RowMapper<Students> rowMapper=new BeanPropertyRowMapper<Students>(Students.class);
		List<Students> students = jdbcTemplate.query(sql, rowMapper,pageSize); 
		return students; 
	}

	@Override
	public List<Students> getStu(String name) {
		String sql = "select * from students where name=?";
		RowMapper<Students> rowMapper=new BeanPropertyRowMapper<Students>(Students.class);	//RowMapper 接口
		List<Students> students = jdbcTemplate.query(sql, rowMapper,name); 	
		return students; 
	}