Question

我有以下SQL查询：

select created, sum(count), count(distinct `source_host`) from monitor where external_host='facebook.com' group by created;

这给出了我在json中表示的数据：

[
  {
    "Created": "2017-08-17",
    "SourceHostCount": 130,
    "Count": 2
  },
  {
    "Created": "2017-08-18",
    "SourceHostCount": 76,
    "Count": 2
  },
  {
    "Created": "2017-08-19",
    "SourceHostCount": 78,
    "Count": 2
  }
]

但是在模板中我希望有一个看起来像这样的表：

|                 | 2017-08-17 | 2017-08-18 | 2017-08-19 |
|-----------------|------------|------------|------------|
| SourceHostCount | 130        | 76         | 78         |
| Count           | 2          | 2          | 2          |

因此，列必须是Created字段中的值，而行是其他字段。有什么办法可以通过使用jQuery Datable来实现吗？

Answer 1

您必须为DataTable稍微“格式化”数据。

行是容器数组中的数组列标题是容器数组中的对象。

下面是两个类似的“选项”，用于从您使用PHP创建的对象数组中对其进行格式化但您还可以直接在服务器端为DataTable正确格式化数据...

如果有，请查看文档中的this example。

如果您在发布时必须使用数据，那么它（在两行上）

var data = [
  {
    "Created": "2017-08-17",
    "SourceHostCount": 130,
    "Count": 2
  },
  {
    "Created": "2017-08-18",
    "SourceHostCount": 76,
    "Count": 2
  },
  {
    "Created": "2017-08-19",
    "SourceHostCount": 78,
    "Count": 2
  }
];

// Prepare the data to DataTable format
var row0 = [{title:""}];
var row1 = ["SourceHostCount"];
var row2 = ["Count"];

for(i=0;i<data.length;i++){
  row0.push({title:data[i].Created}); 
  row1.push(data[i].SourceHostCount);  
  row2.push(data[i].Count);
}

var datatableData = [row1, row2];

$("#result").DataTable({
  data: datatableData,
  columns: row0
});

<link href="https://cdn.datatables.net/1.10.15/css/jquery.dataTables.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://cdn.datatables.net/1.10.15/js/jquery.dataTables.min.js"></script>

<table id="result">
</table>

如果你需要一行上的所有数据，这里有一个略有不同的片段：

var data = [
  {
    "Created": "2017-08-17",
    "SourceHostCount": 130,
    "Count": 2
  },
  {
    "Created": "2017-08-18",
    "SourceHostCount": 76,
    "Count": 2
  },
  {
    "Created": "2017-08-19",
    "SourceHostCount": 78,
    "Count": 2
  }
];

var row0 = [{title:""}];
var row1 = ["SourceHostCount<br>Count"];

for(i=0;i<data.length;i++){
  row0.push({title:data[i].Created}); 
  row1.push(data[i].SourceHostCount+"<br>"+data[i].Count);  
}

var datatableData = [row1];

$("#result").DataTable({
  data: datatableData,
  columns: row0
});

<link href="https://cdn.datatables.net/1.10.15/css/jquery.dataTables.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://cdn.datatables.net/1.10.15/js/jquery.dataTables.min.js"></script>

<table id="result">
</table>

jQuery Datatable根据数据创建列

1 个答案: