利用ajax正常返回数据以后，返回的data数据也有，也转换成了json，通过给layui.render 中给data属性赋值实现渲染数据，但就是不知道为什么layui数据表格中就是不渲染数据。
上代码,不上代码我分析不出来
layui.use(['form', 'jquery', 'layer'], function () {
var form = layui.form;
var $ = layui.$;
var layer = layui.layer;
// 通过点击事件获取。
$(function () {
$("#querybtn").click(function () {
$.ajax({
url: "Handler/HandlerDataInfo.ashx",
async: true,
data: arg,
timeout: 120000,
type: "post",
beforeSend: function () { // 请求之前的方法
},
success: function (result) {
// 其中result以字符串形式返回，通过该方法返回的数据Handler/HandlerDataInfo.ashx/ProcessRequest(HttpContext context) 并通过context.Response.ContentType = "text/plain";context.Response.Write(result);返回
if (result != null && result != undefined) {
window.parent.location = curWwwPath.substring(0, pos) + "/Login.aspx";
return;
}
let data = result;
console.log(result);
console.log(data);
datasplit = data.split('#');
data = $.parseJSON("{\"code\":0,\"msg\":\"\",\"count\": " + parseInt(datasplit[0]) + ",\"data\": " + datasplit[3] + "}");
data = eval(data);
console.log(data);
console.log(typeof (data.data[0].stationname));
console.log(typeof (data.code));
console.log(typeof (data.count));
// ********在此之上都可以正常显示
layui.use(['form', 'jquery', 'table', 'layer'], function () {
var form = layui.form;
var $ = layui.$;
var table = layui.table;
var layer = layui.layer;
//第一个实例
table.render({
elem: '#mytable'
, height: 312
, url: "Handler/HandlerDataInfo.ashx" //数据接口
, page: true //开启分页
//, limit: 10 //指定每页显示的条数
//, limits: [10, 20, 30, 40, 50] //每页条数的选择项
, dataType: 'json'
//, data:data
, cols:
[
[ //表头
{ type: 'checkbox', width: 55 },
{ field: 'id', title: '编号', width: 180 }
, { field: 'name', title: '名称', width: 200 }
, { field: 'position', title: '位置', width: 180 }
, { field: 'type', title: '类型', width: 130 }
, { field: 'status', title: '状态', width: 120 }
, { field: 'operate', title: '操作', width: 520 }
]
]
, praseData: function (data) {
// 此方法并未执行。
console.log(data);
datasplit = data.split('#');
return {
"code": 0,
"msg": "",
"count": parseInt(datasplit[0]),
"data": JSON.parse(datasplit[3])
};
}
}
);
})
},
error: function () {
console.log("失败");
}
});
})
});
});
在参考资料的第一部分代码中，你已经成功地将返回的数据转换成了JSON格式。接下来需要将这些数据渲染到layui的table中。
根据你提供的参考资料段落0的代码，你使用了原生的JavaScript来操作DOM将数据渲染到页面上，这种方式有一定的复杂性并且容易出错。为了简化操作，你可以考虑使用Layui的table组件来实现数据的渲染。
下面是一种使用Layui的table组件来渲染数据的方法：
<link rel="stylesheet" href="https://cdn.staticfile.org/layui/2.5.6/css/layui.css">
<script src="https://cdn.staticfile.org/layui/2.5.6/layui.js"></script>
<table id="demo" lay-filter="test"></table>
function loadData() {
// 发送AJAX请求获取数据
var xhr = new XMLHttpRequest();
xhr.open('GET', "./demo.php", true);
xhr.onload = function() {
if ((xhr.status >= 200 && xhr.status < 300) || xhr.status == 304) {
var data = xhr.responseText;
var person = JSON.parse(data);
// 使用Layui的table组件渲染数据
layui.use('table', function() {
var table = layui.table;
// 渲染table
table.render({
elem: '#demo', // 指定表格元素的id
data: person, // 将数据作为参数传入
cols: [[
{field: 'name', title: '姓名'},
{field: 'age', title: '年龄'},
{field: 'gender', title: '性别', templet: '#genderTpl'}, // 可以使用模板渲染特定的字段
]]
});
});
} else {
alert("Request was unsuccessful :" + xhr.status);
console.log(xhr.statusText);
}
}
xhr.send(null);
}
window.onload = function() {
loadData();
}
其中，在第3步中的cols属性是一个二维数组，可以定义表格的列数、列头和字段名称。你需要根据你的数据结构来定义具体的列。
另外，你还可以使用模板来渲染特定的字段。在上面的例子中，我使用了一个模板来将性别字段的值转换成“男”或“女”。模板的定义方法是在HTML页面中添加一个script标签，并为其设置一个id属性，然后在cols数组中引用这个模板。
<script type="text/html" id="genderTpl">
{{# if(d.gender == 1){ }}
男
{{# } else { }}
女
{{# } }}
</script>
最后，你需要调用Layui的form.render()函数来渲染模板。
layui.use('form', function() {
var form = layui.form;
form.render();
});
希望这个方法可以帮助到你解决问题。如果还有任何疑问，请随时询问。