Question

是否可以使用数据表将从服务器返回的单个对象json转换为表的行，其中键为column1，值为column2。

来自服务器的单个对象Json：

{"data":"abc","name":"Diago","Age":23}

样本表： 使用上面的json生成，键：值对为行

----------------------
| key    |    value  |
----------------------
| data   |   abc     |
| name   |   Diago   |
| Age    |   23      |

Answer 1

你会喜欢这个：

https://igniteui.com/grid/overview

标准解决方案：

var json = {"data":"abc","name":"Diago","Age":23};
var output = [];
output.push("<table>");
$.each(json, function(k, v) {
            output.push("<tr><td>");
            output.push(k);
            output.push("</td><td>");
            output.push(v);    
            output.push("</td></tr>");
});
output.push("</table>");

console.log(output.join(""));

DEMO

完整解决您的问题：

<强> jQuery的：

$(document).ready( function () {

  var json = {"data":"abc","name":"Diago","Age":23};
  var output = [];
  output.push("<table>");
  $.each(json, function(k, v) {
            output.push("<tr><td>");
            output.push(k);
            output.push("</td><td>");
            output.push(v);    
            output.push("</td></tr>");
  });
  output.push("</table>");

  $("#container").append(output.join(""));

  $("#container").find("table").dataTable();


});

<强> HTML：

<!DOCTYPE html>
<html>
    <head>
        <link href="//datatables.net/download/build/nightly/jquery.dataTables.css" rel="stylesheet" type="text/css" />

        <script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
        <script src="//datatables.net/download/build/nightly/jquery.dataTables.js"></script>

        <meta charset=utf-8 />
        <title>DataTables - JS Bin</title>
    </head>
    <body>
        <div id="container">
        </div>
    </body>
</html>

Answer 2

使用此代码：

$(function() {
  json = '[{"data":"abc","name":"Diago","Age":23}]';

  parsedJson = JSON.parse(json);
  var otable = $("#datatable").dataTable();
  otable.fnClearTable();
  $.each(parsedJson[0], function(key, value) {
    otable.dataTable().fnAddData([
      key,
      value
    ]);
  })
});

Example here

希望这有帮助

jquery DataTables：单个对象json到行，其键为column1，值为col2

2 个答案: