LayUI数据表格重载与查询功能实现
（框架：前端使用LayUI，后端Spring）
搜索框：
代码：
表格显示：
代码：
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;
}