一、html中写
<table id="workList" class="layui-hide" lay-filter="workList"></table>
二、在js中写
function workList(){
layui.use(['table','element'], function(){
var table = layui.table
,form = layui.form;
var element = layui.element;
//第一个实例
table.render({
elem: '#workList'
,height: 312
,url: 'http://localhost:8080/UserInfo/selectByVillage.do' //数据接口
,page: true //开启分页
,method: 'post'
,where:{village:'wang'}
,cols: [[ //表头
{field: 'name', title: '用户名'}
,{field: 'telephone', title: '联系电话'}
,{field: 'politicsStatus', title: '政治面貌'}
,{field: 'officialRank', title:'职别'}
,{field: 'currentJob', title: '现任职务'}
]]
});
});
}
elem对应于html中id为worklist的table标签
url是将要访问的接口,由于是跨域,要在html的头上加上一段
<meta http-equiv="Access-Control-Allow-Origin" content="*" />
where字段的作用旨在传递参数,当前意思为访问接口时带一个名叫village的参数,值为“wang”,访问方法是post
cols字段,直接将里面的field值对应于Controller返回的集合中,每一个对象的各个参数即可,layui会自动对号并输出,不需要你遍历,如果需要分页就用上面的page参数。
三、在controller中写
@Controller
@RequestMapping("UserInfo")
public class UserInfoController {
@Autowired
UserInfoService userInfoService;
public String selectByVillage(HttpServletResponse response, @RequestParam("village") String village){
response.setHeader("Access-Control-Allow-Origin","*");
System.out.println(village);
List<UserInfo> userInfos = (List<UserInfo>) userInfoService.selectUserInfoByVillage(village);
int count = userInfos.size();
Map<String,Object> map=new HashMap<String, Object>();
map.put("code", 0);
map.put("msg", "");
map.put("count", count);
map.put("data", userInfos);
String res = JSON.toJSONString(map);
return res;
}
}
第一句response.setHeader(“Access-Control-Allow-Origin”,"*");,还是为了解决跨域的问题。
用到map的原因,是人家layui的开发者文档说了
格式就是这样,这是文档连接,layui文档
本来照着网上的样例是直接传map的,但是我真的技术不行,捣鼓一天了也不能传map,一直显示没有转换器,最后只能选择在Controller里就将其转换成JSON格式,往前端传字符串,这是返回到前端的json数据。
{"code":0,"count":1,"data":[{"community":"nan","currentJob":"stu","gender":true,"idno":"370","name":"jinx","officialRank":"bronze","politicsStatus":"stu","telephone":"111","town":"yunshan","userid":"1","village":"wang"}],"msg":""}
四、最后的show
在cols字段里,想展示data的那些值都行,我只展示了我需要展示的几个。
感谢各个群里的大佬,感谢身边的朋友,感谢大哥,感谢老师。