Javascript 如何将 AJAX 响应设置为 jquery 数据表列？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/38452771/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to set AJAX response to jquery data table columns?
提问by manohar e
Can anyone tell me how to set the response to jquery data to each table columns.
谁能告诉我如何将 jquery 数据的响应设置为每个表列。
Here is my javascript code:
这是我的 javascript 代码：
$(document).ready (function() {
$.ajax({
url: 'userController?action=list',
success : function(response) {
var jsonObject = $.parseJSON(response);
alert(jsonObject.Password);
alert(jsonObject.UserId);
$('#usertable').dataTable( {
data : jsonObject,
columns: [
{'jsonObject' : 'UserId'},
{'jsonObject' : 'Password'},
{'jsonObject' : 'Level'},
],
searching : false
});
}
});});
Here the response in String and the response is
{"UserId" : "Manohar", "Password" : "1234", "Level" : "lev"}.
这里是字符串中的响应，响应是
{"UserId" : "Manohar", "Password" : "1234", "Level" : "lev"}.
Below is the jsp page.
下面是jsp页面。
<table id="usertable">
<thead>
<tr>
<th>User Id</th>
<th>Password</th>
<th>Level</th>
</tr>
</thead>
I have written the above and neither I am getting error nor the row is added to table. Can you guys help me in this?
我已经写了上面的内容，既没有出现错误，也没有将行添加到表中。你们能帮我吗？
采纳答案by manohar e
Here the solution is to change the response. Earlier it was {"userid":"manohar", "password":"1234"}, now I have changed it to [["manohar", "1234"]]. Then in js file
这里的解决方案是更改响应。之前是 {"userid":"manohar", "password":"1234"}，现在我把它改成了 [["manohar", "1234"]]。然后在js文件中
$.ajax({
url: 'userController?action=list',
success : function(data, textStatus, jqXHR) {
var table_data = JSON.parse(data);
var table = $('#usermaintenancetable').DataTable( {
data: table_data
}); } });
So here the response is in String format and I have change it to JSON using JSON.parse() then passed this as data to data table.
所以这里的响应是字符串格式，我使用 JSON.parse() 将其更改为 JSON，然后将其作为数据传递给数据表。
回答by Vidhyadhar Galande
use this
用这个
$(document).ready (function() {
$.ajax({
url: 'userController?action=list',
success : function(response) {
var jsonObject = $.parseJSON(response);
alert(jsonObject.Password);
alert(jsonObject.UserId);
$('#usertable').dataTable( {
data : jsonObject,
//data : response,
columns: [
{"data" : "UserId"},
{"data" : "Password"},
{"data" : "Level"}
],
searching : false
});
}
});});
change only jsonObjectto data
只更改jsonObject为data
Try Another Method u can use ASP.NET MVC
尝试另一种方法你可以使用 ASP.NET MVC
$(document).ready(function () {
$.get("/userController/list", function (data) {
// console.log(data);
if (data != null) {
$('#usertable').dataTable({
data: data,
columns: [
{"data" : "UserId"},
{"data" : "Password"},
{"data" : "Level"}
],
searching : false
});
}
})
});
回答by Lucky
You shouldn't reinitialize the datatable inside your success method. Once you have the json object response, you should use row.add()method,
您不应该在成功方法中重新初始化数据表。一旦你有 json 对象响应，你应该使用row.add()方法，
Sol 1: (For looping JSON objects)
Sol 1：（用于循环 JSON 对象）
success:function(data, textStatus, jqXHR) {
$.each(data, function (i,item) {
var rowNode= [ item.UserId, item.Password, item.Level]
dataTable.row.add(rowNode).draw();
});
}
Sol 2 :(For JSON string values)
Sol 2 :(对于 JSON 字符串值）
success:function(data, textStatus, jqXHR) {
var jsonData = JSON.parse(data);
var rowNode= [ jsonData.UserId, jsonData.Password, jsonData.Level]
dataTable.row.add(rowNode).draw();
}
The above code adds one row at a time. For adding multiple rows at once, use rows.add()API method
上面的代码一次添加一行。要一次添加多行，请使用rows.add()API 方法
