使用 jquery 显示两个数据透视表答案

【问题标题】：display two pivot tables using jquery使用 jquery 显示两个数据透视表
【发布时间】：2018-06-25 17:24:58
【问题描述】：

我正在尝试使用 pivottable.js 创建两个数据透视表来显示工资小时数

想要的结果是这样的：

位置 1 的工资单

foo
bar
biz

地点 2 的工资单

bad
bash 
bin

显然在我无法在此处重新创建的 pivottable.js 显示表单中

然而，数据透视表只为页面显示一个，它是位置 1 或位置 2

我对 javascript 或 html 的了解不够，无法理解我在这里做错了什么，这似乎是一个我没有看到的简单问题。这都在一个 php 文件中。

这是我用于 php 文件的代码

$pageStart = '<html>
<head>
    <title>Payroll</title>
    <!-- c3 and d3 scripts and jquery -->
    <link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/c3/0.4.11/c3.min.css">
    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.5/d3.min.js"></script>
    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/c3/0.4.11/c3.min.js"></script>
    <script type="text/javascript" src="./jquery/jquery-3.2.1.min.js"></script>
    <script type="text/javascript" src="./jquery/jquery-ui-1.12.1/jquery-ui.min.js"></script>

    <!-- PivotTable.js -->
    <link rel="stylesheet" type="text/css" href="./jquery/pivottable/dist/pivot.css">
    <script type="text/javascript" src="./jquery/pivottable/dist/pivot.js"></script>
    <script type="text/javascript" src="./jquery/c3_renderers.js"></script>

    <style>
        body {font-family: Verdana;}
    </style>

    <!-- mobile support -->
    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui-touch-punch/0.2.3/jquery.ui.touch-punch.min.js"></script>

</head>
<body>
<p> Location 1 payroll hours
    <script type="text/javascript">
// This loads the payroll hours for location 1
// no derived attributes
var derivers = $.pivotUtilities.derivers;
var renderers = $.extend($.pivotUtilities.renderers,
$.pivotUtilities.c3_renderers);
$(function(NB){NB,
        $("#output").pivotUI(
        ' . $json . ',
        {rows: ["Name"],
        cols: ["Hours_type", "Date"],
        aggregatorName: "Sum",
        vals: ["Hours"],}
        );
 });
 </script>
 <br>
 <p> location 2 Payroll Hours
 <script>
$(function(SV){
        $("#output").pivotUI(SV,
        ' . $json2 . ',
        {rows: ["Name"],
        cols: ["Hours_type", "Date"],
        aggregatorName: "Sum",
        vals: ["Hours"],}
        );
 })
    </script>

    <div id="output" style="margin: 30px;"></div>

</body>
</html>';

print $pageStart;

$json 和 $json2 是 mysql 函数，用于拉取数据以供数据透视表显示

【问题讨论】：

标签： javascript php jquery html pivottable.js

【解决方案1】：

如果您对两个表都使用 $("#output")，那么其中一个会覆盖另一个。

【讨论】：

所以第二个 $("#output") 应该重命名为 $("#output2")
即使在我重命名输出后，我仍然只返回一个数据透视表，然后我突然想到原因是因为我需要放置两个单独的<div>...</div>，所以它最终看起来像<div id="output" style="margin: 30px;"></div>另一行说<div id="output2" style="margin: 30px;"></div>，再次感谢

【解决方案2】：

您需要两个具有不同 ID 的不同标签，例如：

在输出中引用第一个表，在输出1中引用第二个表

【讨论】：