layui table数据表格中数据返回成功，但页面不显示数据内容问题。
这是我做毕业设计的时候自己遇到的问题，后来查看了网上的一些技术贴子而得到解决，所以便想总结一个大概的方法，供大家参考！
一般导致这个问题的原因是 自己设置的返回的数据格式与layui表格中的以及固定设置好的数据格式不符合，导致无法正确显示数据于页面。
需要特别注意的是，layui中数据表格table正确的数据返回前端的成功状态码 (code)必须为：0。
1）layui table数据表格对传过来的Json数据有严格的要求，一般情况下，要求要有4个参数，如下所示：
code:0 //数据状态 msg:"" //状态信息 count:1000 //数据总数 data:[] //数据列表
2）若传过来的Json数据包含这四个参数，且参数名一样，则表格读数据和显示数据不会出问题。若参数名和上述的不一样，则需要转换下，具体方法如下：
在 table.render({}) 内添加以下代码：
response:{ statusName: '自定义的参数名称' ,// 对应 code msgName: '自定义的参数名称' , // 对应 msg countName: '自定义的参数名称' , // 对应 count dataName: '自定义的参数名称' // 对应 data }
3)html文件里的代码如下：
注意：‘field’字段里的属性名是必须与后台数据库表格里的名称一致！因为mapper里的字段也是与后台数据库表格属性名一致。
<table class="layui-table" lay-data="{height: 'full-200', cellMinWidth: 100, page: true}" lay-filter="EditListTable" id="tableDemo"><thead ><tr><th lay-data="{field:'id',width:150, align:'center' }">自定义名称</th><th lay-data="{field:'name', width:100, align:'center',edit:'text'}">自定义名称</th><th lay-data="{fixed:'right', width:230, align:'center', toolbar: '#barDemo'}">自定义名称</th></tr></thead></table>
4）完整的layui数据表格处理的前端js代码贴一个
var getListUrl = '/xxx/xxxxx';//请求地址//var searchBarContent = '';var tableOptions = {elem: '#tableDemo', //table表格的id名url: getListUrl, //请求地址method: 'POST', //方式id: 'listReload', //生成 layui table 的标识 id，必须提供，用于后文刷新操作page: true, //是否分页// width: 800,// height: 300,cellMinWidth: 30, //全局定义常规单元格的最小宽度，layui 2.2.1 新增where: {//searchBarContent:''数据传送到后台}, cols: [[ ]]// // 请求后端接口的条件，该处就是条件错误点，按照官方给出的代码示例，原先写成了 where: { key : { type: "all" } }，结果并不是我想的那样，如此写，key 将是后端的一个类作为参数，里面有 type 属性，如果误以为 key 是 Layui 提供的格式，那就大错特错了, response: { //定义后端 json 格式，详细参见官方文档statusName: 'code', //状态字段名称statusCode: '0', //状态字段成功值msgName: 'msg', //消息字段countName: 'count', //总数字段dataName: 'returnData' //数据字段（自己创建的数据字段的一个Bean，专门用来返回数据）}};(function () {layui.use(['table', 'layer', 'laydate', 'form'], function () { //layui 模块引用，根据需要自行修改var layer = layui.layer;var table = layui.table;var form = layui.form;//渲染数据表格table.render(tableOptions);//表初始化var createTable = function() {table.init('EditListTable', tableOptions);// table lay-filter};createTable();//表刷新方法function reloadTable(item) {table.reload("listReload", { //此处是上文提到的 初始化标识idurl:getListUrl,where:item});};//专门用于删除功能的刷新方法 function delete_reload(item) { table.reload("listReload", { //此处是上文提到的 初始化标识idurl: '删除功能的刷新方法的数据接口',where:item }); };//监听工具条table.on('tool(EditListTable)',function(obj) {var data = obj.data;//获取所在行所有键值var field = obj.field;//得到字段var value = obj.value;//得到修改后的值if (obj.event === 'del') {layer.confirm('真的删除行么', function (index) {obj.del();layer.close(index);//刷新delete_reload(item)table.render(tableOptions);*/});}//修改按钮else if(obj.event === 'edit') {}});});})();
