Question

我有一个非常复杂的数组，我想在DataTables中显示，以便进行一些研究和csv导出。

这里有一页摘录：https://api.myjson.com/bins/w8pzl

这是结构：

[
 [
  {
   title : "title",
   stacks: {
    stackname : "stackname",
    stackValue : [
     "value1","value2","value3"
    ]
   },
   ..... multiple article
 ],
  .....multiple pages
]

我既不知道如何构建表格，也不知道如何填充表格。我到目前为止的第一次尝试：

<div id="page-content-wrapper">
  <div class="container">
    <div class="row">
      <table id="example" class="display" cellspacing="0" width="100%">
         <thead>
             <tr>
                 <th>Stackname</th>
                 <th>stackvalue</th>
             </tr>
            </thead>
     </table>
   </div>
 </div>
</div>

<script>
$(document).ready(function() {
    $('#example').DataTable({
        "processing" : true,
        "ajax" : {
            "url" : "/",
            dataSrc : ''
        },
        "columns" : [ {
            "data" : "stackName"
        }, {
            "data" : "stackValue[,]"
        }]
    });
});
</script>

但看起来我必须通过所有文档来获取我的信息..

如果它不可能......我已经完成了一个更简单的结构版本：

[
 [
  {
   title : "title",
   stacks: [
     "value1","value2","value3"
    ]
   },
   ..... multiple article
 ],
  .....multiple pages
]

但仍然无法解析它......我正在与两个第一阵列挣扎..

使用回答进行编辑

感谢所选答案帖子的帮助，我设法让这段代码正常工作：

$('#example').DataTable( {
  "processing" : true,
  "ajax": {
    "url": "/",
    "dataSrc" : function ( json ) {
      return json.reduce(function(a, b) {
        return a.concat(b)
      }).map(function(value) {
        return value.stacks
      })
      .reduce(function(a, b) {
        return a.concat(b)
      })
    }
  }
 ,... other configuration

Answer 1

您可以使用ajax.dataSrc选项作为操作从服务器返回的数据的函数。

ajax.dataSrc

功能 ajax.dataSrc（数据）

作为一个函数，dataSrc提供了将服务器返回的数据从一种形式操作到另一种形式的能力。例如，如果您的数据被分割为多个数组，您可以将它组合成一个数组，以便返回DataTables进行处理和显示。 ... 的

这是一个例子。

＆＃13;

$('#example').DataTable( {
  "ajax": {
    "url": "https://api.myjson.com/bins/w8pzl",
    "dataSrc" : function ( json ) {
      return json[0].map(function(value) {
      	return value.stacks
      })
      .reduce(function(a, b) {
      	return a.concat(b)
      })
    }
  },
  "columns": [
    { "data": "stackName" },
    { "data": "stackValue[, ]" }
  ]
});

＆＃13;

<link href="https://cdn.datatables.net/1.10.15/css/jquery.dataTables.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdn.datatables.net/1.10.15/js/jquery.dataTables.min.js"></script>

<table id="example" class="display" cellspacing="0" width="100%">
  <thead>
    <tr>
      <th>Stackname</th>
      <th>stackvalue</th>
    </tr>
  </thead>
  <tfoot>
    <tr>
      <th>Stackname</th>
      <th>stackvalue</th>
    </tr>
  </tfoot>
</table>

＆＃13;

将复杂的数组渲染为数据表

1 个答案: