【问题标题】:JSON response to Datatables?JSON 对数据表的响应?
【发布时间】:2016-09-14 13:44:09
【问题描述】:

我有以下示例从 Ajax 调用中获取 XML 响应并附加到表中。

$("#ajaxform5").submit(function(e) {
    var formURL = $(this).attr("action");
    var request = $.ajax({
        url : formURL,
        type: "GET",
        contentType : "application/xml",
        headers: {
            "Type" : "events"
        },
        success: function(xml){
            $(xml).find('event').each(function(){
                var $event = $(this);
                var id = $event.find("id").text();
                var level = $event.find("level").text();
                var name = $event.find("name").text();
                var attributes01 = $event.find("attributes").children("entry").eq(0).children("string").eq(0).text();
                var attributes02 = $event.find("attributes").children("entry").eq(0).children("string").eq(1).text();
                var attributes11 = $event.find("attributes").children("entry").eq(1).children("string").eq(0).text();
                var attributes12 = $event.find("attributes").children("entry").eq(1).children("string").eq(1).text();
                var attributes21 = $event.find("attributes").children("entry").eq(2).children("string").eq(0).text();
                var attributes22 = $event.find("attributes").children("entry").eq(2).children("string").eq(1).text();
                var attributes31 = $event.find("attributes").children("entry").eq(3).children("string").eq(0).text();
                var attributes32 = $event.find("attributes").children("entry").eq(3).children("string").eq(1).text();
                var attributes41 = $event.find("attributes").children("entry").eq(4).children("string").eq(0).text();
                var attributes42 = $event.find("attributes").children("entry").eq(4).children("string").eq(1).text();
                var userId = $event.find("userId").text();
                var ipaddress = $event.find("ipaddress").text();
                var outcome = $event.find("outcome").text();
                var html = '<tr><td>' + id + '</td><td>' + level + '</td><td>' + name + '</td><td>' +
                    '<div><span class="title">' + attributes01 + '</span> <span>' + attributes02 + '</span></div>' +
                    '<div><span class="title">' + attributes11 + '</span> <span>' + attributes12 + '</span></div>' +
                    '<div><span class="title">' + attributes21 + '</span> <span>' + attributes22 + '</span></div>' +
                    '<div><span class="title">' + attributes31 + '</span> <span>' + attributes32 + '</span></div>' +
                    '<div><span class="title">' + attributes41 + '</span> <span>' + attributes42 + '</span></div>' +
                    '</td><td>' + userId + '</td><td>' + ipaddress + '</td><td>' + outcome + '</td></tr>';
                $('#eventTable').append(html);
            });
        },
        error: function(jqXHR, textStatus, errorThrown) {
            alert(textStatus);
        }
    });
});

现在我想使用Datatables。所以我使用 xml2json(abdmob/x2js) 将响应 XML 转换为 JSON,我得到了下面的 JSON 响应。

JSON 响应;

{
    "list" : {
        "event" : [{
                "dateTime" : "1473858435162",
                "nanoTime" : "438326047248251",
                "id" : "15680",
                "eventTime" : {
                    "time" : "1473851193487",
                    "timezone" : "Asia/Istanbul"
                },
                "level" : "INFORMATION",
                "name" : "Get message content",
                "attributes" : {
                    "entry" : [{
                            "string" : ["metaDataIds", "6"]
                        }, {
                            "string" : ["messageId", "2765"]
                        }, {
                            "string" : ["channel", "Channel[id=44ab0667-d42c-496c-bca2-2bd7eecd6dc9,name=API jQuery Direct]"]
                        }
                    ],
                    "_class" : "linked-hash-map"
                },
                "outcome" : "SUCCESS",
                "userId" : "1",
                "ipAddress" : "127.0.0.1",
                "serverId" : "f85e48e2-32b3-429f-bee5-31630d8143a2"
            }, {
                "dateTime" : "1473858435167",
                "nanoTime" : "438326052034149",
                "id" : "15679",
                "eventTime" : {
                    "time" : "1473851191973",
                    "timezone" : "Asia/Istanbul"
                },
                "level" : "INFORMATION",
                "name" : "Get messages by page limit",
                "attributes" : {
                    "entry" : [{
                            "string" : ["filter", "MessageFilter[maxMessageId=2765,minMessageId=<null>,originalIdUpper=<null>,originalIdLower=<null>,importIdUpper=<null>,importIdLower=<null>,startDate=<null>,endDate=<null>,textSearch=<null>,textSearchRegex=<null>,statuses=<null>,includedMetaDataIds=[6],excludedMetaDataIds=<null>,serverId=<null>,contentSearch=[],metaDataSearch=<null>,textSearchMetaDataColumns=<null>,sendAttemptsLower=<null>,sendAttemptsUpper=<null>,attachment=false,error=false]"]
                        }, {
                            "string" : ["includeContent", "false"]
                        }, {
                            "string" : ["offset", "0"]
                        }, {
                            "string" : ["limit", "21"]
                        }, {
                            "string" : ["channel", "Channel[id=44ab0667-d42c-496c-bca2-2bd7eecd6dc9,name=API jQuery Direct]"]
                        }
                    ],
                    "_class" : "linked-hash-map"
                },
                "outcome" : "SUCCESS",
                "userId" : "1",
                "ipAddress" : "127.0.0.1",
                "serverId" : "f85e48e2-32b3-429f-bee5-31630d8143a2"
            }
        ]
    }
}


所以我的第一个问题是,这个 JSON 响应对 DataTables 有效吗?
如果它是有效的,我怎样才能像我的第一个例子一样将对象和数组寻址到行/列?

我尝试将 JSON 响应插入到数据表,但我不能。您可以在图片中看到结果。 response added to rows char by char

我给出下面的代码只是为了说明,你不想知道我插入数据流了多少口水。
我也尝试了 columns.data 选项来读取数组,但又失败了。

$("#ajaxform6").submit(function(e) {
    var formURL = $(this).attr("action");
    var request = $.ajax({
        url : formURL,
        type: "GET",
        contentType : "application/xml",
        headers: {
            "Type" : "events"
        },
        success: function(data, textStatus, jqXHR) {
            var x2js = new X2JS();
            var bXML = jqXHR.responseText;
            var jsonObj = x2js.xml_str2json(bXML);
            var json = JSON.stringify(jsonObj);
            console.log(json);
            $('#table_id').DataTable( {
                data: json,
                bSort: false,
            } );
        },
        error: function(jqXHR, textStatus, errorThrown) {
            alert(textStatus);
        }
    });
});

【问题讨论】:

    标签: jquery json ajax datatables


    【解决方案1】:

    收到您的 json 数据,因为响应有效,可以解析为 datatable

    您可以参考我使用您的 json 数据创建的以下 DataTable 代码:

    var jsdata = {
    		"list" : {
    			"event" : [
    					{
    						"dateTime" : "1473858435162",
    						"nanoTime" : "438326047248251",
    						"id" : "15680",
    						"eventTime" : {
    							"time" : "1473851193487",
    							"timezone" : "Asia/Istanbul"
    						},
    						"level" : "INFORMATION",
    						"name" : "Get message content",
    						"attributes" : {
    							"entry" : [
    									{
    										"string" : [ "metaDataIds", "6" ]
    									},
    									{
    										"string" : [ "messageId", "2765" ]
    									},
    									{
    										"string" : [ "channel",
    												"Channel[id=44ab0667-d42c-496c-bca2-2bd7eecd6dc9,name=API jQuery Direct]" ]
    									} ],
    							"_class" : "linked-hash-map"
    						},
    						"outcome" : "SUCCESS",
    						"userId" : "1",
    						"ipAddress" : "127.0.0.1",
    						"serverId" : "f85e48e2-32b3-429f-bee5-31630d8143a2"
    					},
    					{
    						"dateTime" : "1473858435167",
    						"nanoTime" : "438326052034149",
    						"id" : "15679",
    						"eventTime" : {
    							"time" : "1473851191973",
    							"timezone" : "Asia/Istanbul"
    						},
    						"level" : "INFORMATION",
    						"name" : "Get messages by page limit",
    						"attributes" : {
    							"entry" : [
    									{
    										"string" : [
    												"filter",
    												"MessageFilter[maxMessageId=2765,minMessageId=<null>,originalIdUpper=<null>,originalIdLower=<null>,importIdUpper=<null>,importIdLower=<null>,startDate=<null>,endDate=<null>,textSearch=<null>,textSearchRegex=<null>,statuses=<null>,includedMetaDataIds=[6],excludedMetaDataIds=<null>,serverId=<null>,contentSearch=[],metaDataSearch=<null>,textSearchMetaDataColumns=<null>,sendAttemptsLower=<null>,sendAttemptsUpper=<null>,attachment=false,error=false]" ]
    									},
    									{
    										"string" : [ "includeContent", "false" ]
    									},
    									{
    										"string" : [ "offset", "0" ]
    									},
    									{
    										"string" : [ "limit", "21" ]
    									},
    									{
    										"string" : [ "channel",
    												"Channel[id=44ab0667-d42c-496c-bca2-2bd7eecd6dc9,name=API jQuery Direct]" ]
    									} ],
    							"_class" : "linked-hash-map"
    						},
    						"outcome" : "SUCCESS",
    						"userId" : "1",
    						"ipAddress" : "127.0.0.1",
    						"serverId" : "f85e48e2-32b3-429f-bee5-31630d8143a2"
    					} ]
    		}
    	};
    
    	$(document).ready(function() {
    		$('#table_id').DataTable({
    			data : jsdata.list.event,
    			columns : [ {
    				title : "Id",
    				data : 'id'
    			}, {
    				title : "Level",
    				data : 'level'
    			}, {
    				title : "Name",
    				data : 'name'
    			}, {
    				title : "UserId",
    				data : 'userId'
    			}, {
    				title : "Ip Address",
    				data : 'ipAddress'
    			}
    
    			]
    		});
    	});
    <link href="https://cdn.datatables.net/1.10.12/css/jquery.dataTables.min.css" rel="stylesheet"/>
    
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
    
    <script src="https://cdn.datatables.net/1.10.12/js/jquery.dataTables.min.js"></script>
    
    
    <table id="table_id" class="display" width="100%"></table>

    【讨论】:

    • 感谢@abhijeet 的帮助。还有一件事,如何在一个字段中添加两个数据?例如,我想在一个字段中显示 ID 和级别。
    • 我更新了我的评论,但您没有收到此@Abhijeet 的通知。您知道如何在一个字段中添加两个数据吗?例如,我想在一个字段中显示“ID”和“级别”。
    • @ObsessiO 你可以点击这个链接stackoverflow.com/questions/18081967/…
    【解决方案2】:
    • 你不需要使用JSON.stringify
    • 您需要使用columns.data 属性为每一列指定数据属性

    2 列表的示例代码如下所示。为其他列添加更多 column.data 条目。

    $('#table_id').DataTable( {
       data: jsonObj.list.event,
       columns: [
          { data: 'name' },
          { data: 'level' }
       ]
    });
    

    【讨论】:

      猜你喜欢
      • 2020-10-30
      • 1970-01-01
      • 2020-05-23
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 2016-09-06
      相关资源
      最近更新 更多