layui数据表格获取数据的办法 思路步骤: 1.请求后端的总条数 2.后端数据的格式顺序要与表头数据相同 3.table组件接受数据的格式为 table.render({ elem: '#demp' ,url: '' ,parseData: function(res){ //res 即为原始返回的数据 return { "code": res.status, //解析接口状态
layui数据表格获取数据的办法
思路步骤:
1.请求后端的总条数
2.后端数据的格式顺序要与表头数据相同
3.table组件接受数据的格式为
table.render({
elem: '#demp'
,url: ''
,parseData: function(res){ //res 即为原始返回的数据
return {
"code": res.status, //解析接口状态
"msg": res.message, //解析提示文本
"count": res.total, //解析数据长度
"data": res.data.item //解析数据列表
};
}
//,…… //其他参数
});
前端script代码
layui.use(['table',"jquery","layer"], function(){ //加载模块
var table = layui.table;
var $=layui.$;
var layer=layui.layer;
var count=10; //总条数
$.ajax({
url:"../../../SchoolServlet?method=getAllSchoolCount" //向后端发送请求获取总条数
,type:"POST"
,dataType:"json"
,success:function(data){
console.log("data: "+data);
count=parseInt(data); //获取后端的总条数
table.render({
elem: '#demo'
,height: 512
,url: '../../../SchoolServlet?method=getAllSchool' //数据接口,获取查询的所有数据,json格式
,page: true //开启分页
,cols: [[ //表头
{type:'radio'}
,{field: 'school_id', title: 'id', width:80, sort: true, fixed: 'left'}
,{field: 'school_name', title: '学校名', width:"20%"}
,{field: 'school_phone', title: '学校联系电话', width:"20%"}
,{field: 'school_address', title: '学校地址', width:"20%"}
, {fixed: 'right', title: '操作', toolbar: '#barDemo', width: "20%"}
]]
, parseData:function (res) { //返回数据值(必填)
return{
"code":0,
"msg" :'',
"count": count,
"data" :res
}
}
, page:{
count:count
}
});
}//end succes
});//end ajax
});
后台Servlet页面
//获取学校数据的总条数
public void getAllSchoolCount(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
SchoolService service=new SchoolServiceImpl();
int count=service.getAllSchoolNum();
//System.out.println("schoolNum"+count);
//将获取的总条数返回给前端
response.getWriter().print(count);
}
//返回请求的数据
public void getAllSchool(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
request.setCharacterEncoding("utf-8");
response.setCharacterEncoding("utf-8");
// url:"xxxServlet?page=xx&limit=xx"
//layui请求数据接口的时候默认会携带page参数和limit
int page=Integer.parseInt(request.getParameter("page"));
int limit=Integer.parseInt(request.getParameter("limit"));
SchoolService schoolService=new SchoolServiceImpl();
//查询分页数据mysql的物理分页
List<School> list=schoolService.selectAll(page,limit);
//System.out.println(list);
String data=JSON.toJSONString(list);
//将数据返回给前端的ajax
response.getWriter()print(data);
}
更多的东西需要的看官方文档
沃梦达教程
本文标题为:layui数据表格获取数据
基础教程推荐
猜你喜欢
- 解决ajax的delete、put方法接收不到参数的问题方法 2023-02-23
- Vue+WebSocket实现在线聊天 2023-10-08
- ECSHOP中实现ajax弹窗登录功能 2023-01-31
- 深入浅析Jsonp解决ajax跨域问题 2022-12-28
- 基于bootstrap的上传插件fileinput实现ajax异步上传功能(支持多文件上传预览拖拽) 2023-02-01
- ExtJS 3.x DateField menuListeners 显示/隐藏 2022-09-15
- vue的 Mixins (混入) 2023-10-08
- 分页技术原理与实现之无刷新的Ajax分页技术(三) 2023-01-20
- 第7天:CSS入门 2022-11-04
- 关于 css:WebKit (iPad) CSS3: 背景过渡闪烁 2022-09-21