如何设置对 jquery 数据表列的 AJAX 响应？

Question

谁能告诉我如何将 jquery 数据的响应设置为每个表列。

这是我的 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
        });
    }
});});

这里是String中的响应，响应是 {"UserId" : "Manohar", "Password" : "1234", "Level" : "lev"}.

下面是jsp页面。

<table id="usertable">
<thead>
    <tr>
        <th>User Id</th>
        <th>Password</th>
        <th>Level</th>
    </tr>
</thead>

我已经写了上面的内容，我没有收到错误，也没有将行添加到表中。你们能帮我解决这个问题吗？

Answer 1

这里的解决方案是更改响应。 之前是 {"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
}); } });

所以这里的响应是字符串格式，我使用 JSON.parse() 将其更改为 JSON，然后将其作为数据传递给数据表。

Answer 2

使用这个

$(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
        });
    }
});});

仅将 jsonObject 更改为 data

尝试另一种方法，你可以使用 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
                      });
                    }
                })
            });

Answer 3

您不应在成功方法中重新初始化数据表。获得 json 对象响应后，您应该使用 row.add() 方法，

解决方案 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 :(对于 JSON 字符串值)

success:function(data, textStatus, jqXHR) {
        var jsonData = JSON.parse(data);
        var rowNode= [ jsonData.UserId, jsonData.Password, jsonData.Level]
        dataTable.row.add(rowNode).draw();
}

上面的代码一次添加一行。要一次添加多行，请使用rows.add() API 方法